はじめに
HTMLCSSの勉強を始めて、HTMLで自分が表示させたいテキストを書けてもCSSでスタイルづけするのがとても難しかったです。正直CSSからがweb制作の開始な気がしました。
難しいので複数回に分けて投稿していきます。
今回はHTMLファイルとCSSファイルが交代で出てきますのでファイル名を記述してみます。
CSSとは
CSS(Cascating Style Sheets)は。HTMLのテキストの色や大きさ、配置を指定するための言語 です。CSSを使うにはどこに（セレクタ）、どんな装飾を（プロパティ）、どのように（値）の三つを記述して使用します。
CSSはすべて次のような記述ルールで使用します。
セレクタ{プロパティ:値;}
セレクタ内には複数のスタイル指定（宣言）をすることができます。
コメントの書き方
CSSの場合は/* */で囲んだ部分がコメントになります。
どこに書けばいいか
CSSをHTMLで使用するには三つの方法があります。
- インライン指定
- エンベッド指定
- CSSファイルをリンクで取り込む
インライン指定
HTMLのタグ内に直接書き込む方式です。指定する際にはstyle属性を記載します。
<!-- 文字の色を赤に指定 -->
<body>
<p style="color:ff0000;">
こんにちは
</p>
</body>
エンベッド指定
HTMLのhead要素内にstyleタグを使用して記載します。
<!-- 文字の色を赤に指定 -->
<head>
<style>
p {
color:#ff0000;
}
</style>
</head>
<body>
<p>
こんにちは
</p>
</body>
インライン指定もエンベッド指定もHTMLファイルに直接かけますが、複数のサイトで共通するレイアウトを記載する場合に面倒になるので基本的にはCSSファイルを用意して記載します。
CSSファイルをリンクで取り込む
CSSファイルを別で用意することでサイト内のヘッダーやナビゲーションメニュー、フッター等の共通のレイアウトをHTMLファイルごとに記載することなく1つのファイルを再利用することができます。
HTMLファイルでCSSファイルを取り込むにはheadタグ内にどのファイルを取り込むかのリンクを指定する必要があります。
rel="stylesheet"でCSSファイルを読み込む宣言をし、href="style.css"で実際に読み込むCSSファイルへのファイルパスを記載します。今回はstyle.cssはcssフォルダに入れていません💦
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>
こんにちは
</p>
</body>
p {
color:#ff0000;
}
セレクタの種類
セレクタにはいろんな種類があり、複数のセレクタを記載することもあれば、classで指定することもあり特殊なセレクタを使うこともあります。
タイプセレクタ
セレクタ単体で指定します。指定されたタグすべてに同じスタイルが適用されます。
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>夕食</h1>
<p>和食</p>
<p>中華</p>
<p>洋食</p>
</body>
/* h1タグの文字の色を赤に指定 */
h1 {
color:#ff0000;
}
/* pタグの文字の色を緑に指定 */
p {
color:#3eb370;
}
複数セレクタ
複数のセレクタに対して同じスタイルを指定したいときに使用します。各セレクタを,で区切って使います。
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>夕食</h1>
<p>和食</p>
<p>中華</p>
<p>洋食</p>
</body>
/* h1とpタグの文字の色を赤に指定 */
h1,p {
color:#ff0000;
}
任意で命名できるセレクタ
必要に応じて任意で命名します。
IDセレクタは1つのHTMLファイル内に1つのゆういつの名前を使用できます。CSSでIDセレクタを指定する際は＃セレクタ名 で記載します。
また、classセレクタは複数のタグに同じ名前をつけて使用できます。CSSでclassセレクタを指定する際は. セレクタ名 で記載します。
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 id="shop_name">海の家<h1>
<h2>ランチメニュー</h2>
<ul class="menu">
<li>カレーライス</li>
<li>ラーメン</li>
<li>焼きそば</li>
</ul>
<h2>ドリンク</h2>
<ul class="menu">
<li>お茶</li>
<li>コーヒー</li>
<li>ソフトドリンク</li>
</ul>
</body>
/* idがshop_nameの文字の色を青に指定 */
#shop_name {
color:#0095d9;
}
/* classがmenuの文字の色を赤に指定 */
.menu {
color:#ff0000;
}
子孫セレクタ
親要素の中にある、特定の子要素だけ指定したいときに使います。個人的にCSSで難しいなと感じたのは、この子孫セレクタを色んな要素に当てはめてスタイルを指定するときでした。
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>海の家<h1>
<h2 class="menu">ランチメニュー</h2>
<h3>カレーライス</h3>
<h3>ラーメン</h3>
<h3>焼きそば</h3>
</ul>
</body>
/* classがmenuのh3の文字の色を赤に指定 */
.menu h3 {
color:#ff0000;
}
擬似クラスと擬似要素
上記のと違う特殊なセレクトがあります。
HTML要素が特定の状態の時にスタイルを適用させたい時に使うのが擬似クラスと言います。実際に使うにはセレクタ:擬似クラスで記述します。例えばマウスポインタがその要素に重なっている時にテキストの色を変えたい時などに使用します。
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>ナビメニュー</h2>
<a>ご挨拶</a>
<a>事業内容</a>
</body>
/* aの要素をまだクリックしてリンクに訪問していないときはを黒に指定 */
a:link {
color:#000000;
}
/* aの要素にマウスポインタが重なっている時はを赤に指定 */
a:hover {
color:#ff0000;
}
/* aの要素に既に訪問済みの時はを青に指定 */
a:visited {
color:#0095d9;
}
また、HTMLの特定の要素の前後にスタイルを指定する時に使います。実際に使用するときはセレクタ::after(before) のように使用します。
<h2>おやつ</h2>
/* h2の要素の前に"★"を追加する指定 */
h2::before {
content:"★";
}
/* h2の要素の後ろに"★"を追加する指定 */
h2::after {
content:"★";
}
様々なレイアウトの変え方
上記でずっと使用していましたが、文字の色を変えるにはcolorプロパティを使用します。color:#(16進数の色コード) で使用します。
他にも様々なプロパティがあります。
文字サイズの変更
文字サイズを変更するにはfont-size:10px のように記載します。文字サイズの単位にはem,px,%があります。
emは一文字分の長さ、pxは画面上の1px、%は親要素のうちのパーセントで使われています。
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>こんにちは</h1>
</body>
/* h1のフォントサイズを12pxに指定 */
h1 {
font-size:12px;
}
文字の種類を変える
フォントの種類を変えるにはfont-familyプロパティを使います。実際にはfont-family:書体名 のように記載します。
ただし、OSによっては対応していないフォントもあるので複数記載することが多いです。
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>こんにちは</h1>
</body>
h1 {
font-family:'YuGothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', 'Meiryo',sans-serif;
}
背景色を変える
背景色を変えるにはbackground-colorプロパティを使います。実際にはbackground-color:#色コード のように色を指定します。
また、色以外にも画像を背景にするbackground-image:url(ファイルパス) もあります。
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="food">
<h1>こんにちは</h1>
<h2>ようこそ</h2>
</div>
</bo
/* h1の背景色を赤に指定 */
h1 {
background-color:#ff0000;
}
/* classがfood内の背景画像をimagesフォルダ内のtop.jpgに指定 */
.food {
background-image:url(images/top.jpg)
}
横幅、高さの変更
要素の横幅、高さを変更する場合はwidth,heightプロパティを使います。この場合はpxで指定するのが一般的ですが、親要素がある場合は％で指定するとデバイスに合わせたレスポンシブなデザインもできます。
widthやheightを指定することで文字の周りを囲む要素の大きさを指定できるのでその要素に対して使うbackground-color等の背景色を指定することもできます。
要素の外には他にもpadding、border、marginの順でプロパティが存在しています。
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>こんにちは</h1>
</body>
/* h1は横幅500px高さ90pxの要素で背景色を赤に指定 */
h1 {
width: 500px;
height: 90px;
background-color:#ff0000;
}
また、親要素内で子要素全体を中央寄せにするには、margin: 0 auto; を使用します。これらは前回話したwrapperクラスやcontainerクラス等のサイトの要素全体を中央寄せにする時に使用します。これらの要素全体にスタイルの適用範囲を持つ< div>タグなどで囲まれたものをブロック要素 と言います。
それに対してテキストやボタンなどの< a>タグなどで囲まれた最小のパーツをインライン要素 と言います。インライン要素ではレイアウトの配置をいじるときはtext-alignを使います。
また、インライン要素はdisplay:inline-block;を使用することでインラインブロック要素に変更することができます。インラインブロック要素ならばmarginやpaddingを上下左右使えます。
padding border margin
要素に空白を入れるにはpadding:px; と記述します。空白の外側に枠線を引きたいときはborderを使用します。枠線の外側にさらに余白を持たせたいときはmarginを使用します。
marginとpaddingは同じ空白ですが、要素の内側に空白を作るか外側に空白を作るかの違いがあります。また隣同士の要素でmarginを使用しているとmarginは相殺することもあります。この二つは"-top","-bottom","-left","-right"で指定するとそれぞれ異なる空白を作ることができます。
borderはborder:太さ 種類 色; で記載すると使用することができます。
border:5px solid red;で記述すると上下左右囲まれた枠線ができますが、
border-bottom:1px solid red;で記述すると赤の下線が引かれたようになります。
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>こんにちは</h1>
</body>
h1 {
/* h1の要素に上10px、右5px、下20px、左6pxの空白を入れて背景色を赤に指定してその要素を5pxの太さの黒い枠線を引く */
padding:10px 5px 20px 6px;
background-color:#ff0000;
border:5px solid #000000;
/* h1の要素の黒い枠線の外側に上下20px、左右10pxの余白を入れる */
margin:20px 10px;
}
行間の調整
行間を調整するには、line-heightを使います。line-heightプロパティの高さの中心に文字が配置されるので、要素の高さとline-heightプロパティを同じ値にすると、文字の高さが中央に配置されます。
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>こんにちは</h1>
h1{
/* h1は80pxの高さを持ち、24pxの文字サイズのテキストがちょうど80px内の中央に配置される */
font-size:24px
height:80px
line-height:80px
}
最後に
一つずつプロパティは解説しましたが、CSSはナビゲーションや見出し、サイトのレイアウトと一緒に説明するとわかりやすいので、次はもっと短い文量で機能ごとに解説をしていきます。
明日からweb系の勉強を進めるので次がいつ投稿になるかわかりませんが、気長に続けていきたいと思います。
最後まで読んでいただきありがとうございました。
参考文献
一冊ですべて身につくHTML & CSSとWebデザイン入門講座
世界一わかりやすいHTML&CSSコーディングとサイト制作の教科書[改訂2版]
Progate