Web制作コース

【パーツ編📦】ウェブサイトの主要なセクションパーツを作成

スクールサイトを作ろう

サンプルコードはここで紹介するコーディングルールに従っています。
**コーディングルールには正解はありません**。人それぞれな部分も多くありますが、まずはシンプルなルールをこちらで設定しています。


#### フォルダ構造
  - 任意の場所に新しいフォルダを作成しフォルダ名を`SmileCooking`としてください。
  -   `SmileCooking`フォルダ内に`index.html`と`style.css`を作成してください。
  -  `SmileCooking`フォルダ内に`image`フォルダを作成し、その中に画像データを配置してください。

~~~

SmileCooking/
├ index.html
├ css/
│  └ style.css
└ image/
　　├ course1.png
　　├ course2.png
　　├ course3.png
　　├ favicon.ico
　　└ FV.png

~~~


#### パスの記述方法
~~~ html~index
<img src="image/***.png" alt="..." />
~~~
相対パスを使用します。
- 相対パスとは<br>
現在のディレクトリからの位置を基準に指定するパス。<br>
例: ../images/logo.png (親ディレクトリのimageフォルダ内のファイル)




#### メディアクエリ

~~~css~style

.header__title {
  font-size: 40px;
}
@media screen and (max-width:768px) {
 .header__title{  
   font-size:24px
 }
}
~~~
メディアクエリはデスクトップファーストで記述します。また、セレクタ毎に並べて記述する事により、**見やすく保守性が高いコード**になります。


#### スタイリング
スタイリングを指定する場合は、クラス名をつけるようにしてください。**スタイリングのために、idは使用しない**ことが推奨されております。


#### HTMLの雛形を作る

~~~html~index
<!DOCTYPE html>
<html lang="ja">
  	<head>
		
		<meta charset="UTF-8" />
		
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		
		<title>Smile Cooking</title>
		
		<meta name="description" content="お料理教室「Smile Cooking」のサイトです" />
		
		<meta name="format-detection" content="telephone=no" />
		
		<link rel="shortcut icon" href="image/favicon.ico" />
		
		<link
			rel="stylesheet"
			href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css"
		/>
		
		<link rel="stylesheet" href="css/style.css" />
	</head>
    <body>
    ...
    </body>
</html>
~~~


#### CSSの雛形を作る
~~~css~style
@charset "utf-8";
/**
 * 共通部品
 *
 * @format
 */

html {
  font-family: 'Noto Sans JP', sans-serif;
  color: #333333;
  line-height: 1.5;
  letter-spacing: 0.08em;
}
/* ここから記述します。 */
~~~

1. 3. コーディングルールの確認と準備(スクール)