スタイルを作成する

外部ファイルで作成していきます。

style.css を作成する

まずはクラスを使わずに反映してみます。

@charset "UTF-8";

body{
font-family: 'メイリオ', 'Meiryo', sans-serif ;	/*フォントの種類*/
font-size:17px;	/*フォントサイズ*/
background:#ffeee6; /*背景色*/
}

div{
width:60%; /*<div>の幅*/
margin:20px auto; /*上下20px 左右自動(中央に配置)*/
border:1px solid #ccc; /*枠線*/
background:#fff; /*背景色を白色に*/
}

枠線はあとで消します。どのように適用されているかわかりやすくするための一時的な目印としています。

h1{
font-weight:none; /*太字をなくす*/
font-size:25px;	/*フォントサイズ*/
text-align:center; /*文字を中央揃え*/
height:100px; /*行の高さ*/
}

p{
text-align:center; /*文字を中央揃え*/
}

img{
margin:0px auto 30px auto; /*上右下左 autoは中央揃え*/
border-radius:25px; /*画像の角を丸く*/
border:3px solid #ccc; /*枠線*/
}

以上です。「style.css」で保存してください。

sozai.html、flour.html、vegetable.htmlのすべてのページに記述してください。

</head>の前に記述します。

<link rel="stylesheet" href="./style.css" type="text/css">

ブラウザで確認するとこのようになります。

次にクラスを使って詳細ページの見た目を変えていきます。

style.cssに追記します。

/*花の素材ページ*/
.flour{
border:3px solid #FFAEC9;
}
.flour img{ /*flourの中にある img に適用される*/
border:3px solid #FFAEC9;
}

<div class="flour">

スタイルシートは1行目から処理されるので、先に<div>にスタイルが設定してあっても、後に記述してあるコードが適用されます。

同じように野菜の素材ページのクラスも作成してみましょう。

以上で「CSSを使ったサイトを作ってみよう」は終わりです。

お付き合いありがとうございました。

最終更新日:2023/07/21