CSS入門とサンプル


HOME > CSS > CSSを使ったサイトを作ってみよう

スタイルを作成する

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

style.css を作成する

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

文字コードの指定

@charset "UTF-8";

<body>のスタイルを設定する

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

<div>のスタイルを作成する

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

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

<h1>のスタイルを作成する

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

<p>のスタイルを作成する

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

<img>のスタイルを作成する

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;
}

flour.html にスタイルを適用する

<div class="flour">


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


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


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

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

最終更新日:2023/07/21

Copyright 2023 Appli Base All Rights Reserved.

Yes:3071 Total:68344 Today:125

single_css