どうも！職業訓練生のがっちゃんです！
ただいま、「情報セキュリティ管理者資格コース」を絶賛受講中です！ここでは職業訓練で学んだことを復習がてら掲載しています。このコースの受講を検討中の方への参考になればと思います。
今回は「HTMLとCSSの基本について：その①」の続き、ＣＳＳについて学んだことをお伝えしたいと思います！「その①」をまだ見ていない方は、まずは「その①」から見てくださいね！
ＣＳＳって、なんぞ！？
「Cascading Style Sheets」(カスケーディング・スタイル・シート)の略称で、ＨＴＭＬのお供で、装飾、レイアウトなどデザインを担当する言語だよ。
今回もコードエディタ「Visual Studio Code」を使いました無料のソフトですが、コードを入力するときに「このコードを使う！？」「このフォルダのこのデータを使う！？」みたいに入力補助をしてくれて、とても便利です。
「Visual Studio Code」をインストールしたら「拡張機能」から、コマンドを日本語表示してくれる「Japanese Language Pac for Visual Studio Code」と、HTMLコードをブラウザで表示できる「View In Browser」をインストールしておくことをオススメします！
この辺りのことは、「超初心者向け！HTMLとCSSの基本を学ぶ：その①」で、ご確認くださいね。
スタイルシートの書式
セレクタとは！？
セレクタは、HTMLの「どこに！？」デザインのルールを適用するかを指示する場所のことです。上の例では「h1」という場所に「デザイン」を付けちゃってねぇ、ということになります。
セレクタには「id属性」「class属性」「タグ属性」などを指定します。
宣言ブロックとは！？
どんなデザインを適用したいのかを書く場所です。「{」 と「 }」の間に、「プロパティ：値；」というふうに書きます。
プロパティとは！？
設定項目のことです。上の例ではフォントサイズですが、他にも色、ボックスの幅や高さなど、様々な項目があります。
値とは！？
プロパティに設定する「値」です。プロパティによって数字、文字、特定のキーワードなど、設定値はそれぞれ異なります。プロパティと値は「：」でつなげます。値の後ろには必ず「；」を付けます。
セレクタの種類
タイプセレクタ
タグ名をデザイン適用場所に指定します。下記の例では<p></p>にデザインが適用され、<h2></h2>には適用されません。
p{
color:#ff0000;
}
HTMLファイル
<h2 id=”news”>NEWS</h2>
<p>５月３０日掲載されました！</p>
<p>４月１８日オープンしました！</p>
全称セレクタ
＊（アスタリスク）は「全称セレクタ」といい、全てにデザインが適用されます。以下の例では、<h2></H2>、<p></p>のどちらにも適用されます。
*{
color:#ff0000;
}
HTMLファイル
<h2 id=”news”>NEWS</h2>
<p>５月３０日掲載されました！</p>
<p>４月１８日オープンしました！</p>
idセレクタ
#footer{
color:#ffff00;
}
HTMLファイル
<div id=”footer”>
<p>©Copyright KUJIRA cafe. All rights reserved.</p>
</vid>
classセレクタ
.keyvisual{
margin: 20px 0 0 0;
}
HTMLファイル
<div class=”keyvisual”>
<img src=”./images/keyvisual.jpg” alt=”自慢のタルトです!”/>
</div>
擬似クラス
a:link{
color:#6aa4d6; /*通常*/
}
a:visited{
color:#6aa4d6; /*リンク先が訪問済み*/
}
a:hover{
color:#4f7697; /*マウスポインタがリンクに乗っている*/
}
a:active{
color:#aed3f2; /*マウスポインタが押されている*/
}
子孫コンビネータ
特定の要素に含まれる子要素、子孫要素に適用させるセレクタが子孫コンビネータです。セレクタとセレクタは、半角スペースで区切ります。下の例ではid属性値が”nav”の親要素に含まれるliだけに適用されます。
#nav li{
display: inline;
list-style-type: none;
padding-right: 30px;
}
HTMLファイル
<ul id=”nav”>
<li>ホーム</li>
<li>店舗案内</li>
<li>アクセス</li>
<li>メニュー</li>
<li>お問い合わせ</li>
</ul>
外部CSSファイルとして作成
スタイルシートをHTML内に書くことも可能ですが、見た目が混み入ってしまい見にくくなります。また、修正も面倒です。通常は、外部CSSファイルとして作成し、サイト内で共有することができる上に、修正もCSSファイル内だけで済むため、メンテナンス性もよくなります。
外部CSSをHTMLに適用するため、適用したいHTMLファイルの<head></head>内にCSSファイルのリンクを書きます。CSSファイルには「style.css」というファイル名をつけることが一般的です。
<head>
<!–外部CSSファイルへのリンク–>
<link rel=”stylesheet” type=”tet/css” href=”css/style.css”>
</head>
@charset”UTF-8″;
CSSの記述プロパティと値
文字の色を指定する
文字色を指定するのが「color」プロパティです。色は１６進数のカラーコードで指定します。また、主要な色は「red」「blue」などの文字で指定することも可能です。
カラーコードは「原色大辞典」などのサイトを参考にして記述します。
/*pタグを赤に*/
color:#ff0000;
}
書体、文字の大きさを指定する
書体（フォント）を指定するのが「font-family」、文字の大きさを指定するのが「font-size」です。
/*pタグをセリフ体に指定*/
font-family:serif;
/*文字の大きさを指定*/
font-size:smaller;
}
| xx-large | 非常に大きい |
| x-large | より大きい |
| large | 大きい |
| medium | 標準のフォントサイズ |
| small | 小さい |
| x-small | より小さい |
| xx-small | 非常に小さい |
| smaller | |
| larger |
背景色を変える
背景色を指定するのが「background-color」プロパティです。
/*pの背景をグレーにする*/
background-color:#666666;
}
コメント文
/*
複数行にコメントを書くこともできます。
複数行にコメントを書くこともできます。
複数行にコメントを書くこともできます。
*/
横幅、高さの指定
<h1>アクセス</h1>
<img src=”./images/map.png”>
CSSファイル
h1{
width:500px;
height:80px;
background-color:#9de8ea;
}
img{
width:500px;
height:300px;
}
CSSボックスモデル
文書内の全ての要素はボックスと呼ばれる四角形の領域を作られています。各ボックスは以下の４つの領域で構成されています。領域の大きさは各プロパティによって指定することができます。
content（コンテンツ）
テキストや画像など、要素そのものの内容が表示される領域です。この領域のサイズは width（幅） と height（高さ）プロパティで指定することができます。また、backgroundプロパティの指定がある場合、contentとpaddingに背景が表示されます。
padding（パディング）
content と border の間にある余白の領域です。要素の内側の余白を取るために使います。この領域のサイズは padding プロパティで指定することができます。
border（ボーダー）
padding の外側にある領域、いわゆる枠線です。この領域のサイズは border-width プロパティで指定することができます。paddingやmarginのように、余白を指定するのではなく、borderプロパティにより線の種類（border-style）や太さ（border-width）、色（border-color）を変更します。
margin（マージン）
ボックスの一番外側の余白の領域です。隣り合うボックスとの余白になります。この領域のサイズは margin プロパティで指定することができます。margin領域には背景が表示されないので常に透明になります。
引用元：http://zero.css-happylife.com/basic/box.shtml よりクジラカフェにCSSを適用します
コードエディタ「Visual Studio Code」で、「その①」で作成した「cafe」ディレクトリ内に「style.css」というファイルを作成します。内容は以下の通りに入力していきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
@charset "UTF-8"; /*全てのWebページに背景色を設定*/ body{ background-color: #f5f3eb; /*ブラウザがあらかじめ持っている少しの余白 （上下左右に9pxのマージン）を一旦ゼロにする*/ margin: 0 0 0 0; padding: 0 0 0 0; } /*wrapperクラスに対し幅900pxを設定し左右マージンを auto（自動）と指定することにより中央揃えにします。*/ .wrapper{ margin: 0 auto 0 auto; width:900px; } /*個別のスタイル*/ .keyvisual{ margin: 20px 0 0 0; } .news_item{ margin: 0 0 0 0; } h2{ /*h2で書かれたNews見出し色を茶色に、 フォントサイズを18pxに設定します。*/ color:#442220; font-size: 18px; /*News見出しの下に2pxの茶色の点線を引く*/ border-bottom-width: 2px; border-bottom-style: dotted; border-bottom-color: #666666; /*マージン、パディングの余白設定*/ margin-top: 20px; margin-right: 0px; margin-bottom: 20px; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; } /*アンカーテキストのリンクの色を設定 この順番で記述しないとスタイルが適用されません*/ a:link{ /*通常の時の色*/ color: #6aa4d6; } a:visited{ /*リンク先が訪問済みの時の色*/ color: #6aa4d6; } a:hover{ /*マウスポインタがリンクに乗った時の色*/ color: #4f7697; } a:active{ /*マウスボタンが押された時の色*/ color: #aed3f2; } /*h1タグにあるロゴ画像を中央に配置し ロゴの上下に30pxのマージンを設定します*/ h1{ margin: 30px 0 30px 0; padding: 0 0 0 0; line-height: 0; /*画像下にできる空欄をなしに*/ text-align: center; } /*<a>タグに<img>タグが含まれる場合、リンクを示す 枠線が表示されることがあるため、次のようにスタイルを 設定し、ロゴ画像のボーダー（枠）を消すようにします*/ img{ border-style:none; } /*ナビゲーションメニューの仕上げ <li>要素を横並び（inline）にします*/ #nav li{ display: inline; list-style-type: none; padding-right: 30px; } /*ナビゲーションメニューに上下パディングに余白を 設けて、背景画像（menu-bg.png）を設定します*/ #nav{ margin: 0 0 0 0; padding: 15px 30px 10px 30px; background-image: url(./images/menu-bg.png); } /*フッターの仕上げ メインとフッターの区切りとなる背景画像（footer-bg.png）を 設定し、横方向に繰り返します*/ #footer{ background-image: url(./images/footer-bg.png); background-repeat: repeat-x; margin-top: 30px; padding: 20px 0 20px 0; font-size: smaller; color: green; } |
新しく出てきた値など
h1タグの設定で「line-height:0」を使って画像下の余白をなくしました。通常「line-height」は行の高さを調整するために使用します。「line-height:20px」や「line-height:160%」というように行の高さを指定します。
ナビゲーションメニューの仕上げで「list-style-type:none」を使いました。これは、リストの先頭に表示するマーカーの種類を指定するものです。今回は「none」で、指定なしとしましたが、以下のような設定があります。他にも色々あります。
| list-style-type:disc | 黒丸 |
| list-style-type:circle | 白丸 |
| list-style-type:square | 黒四角 |
| list-style-type:lower-roman | 小文字のローマ数字 |
| list-style-type:upper-roman | 大文字のローマ数字 |
| list-style-type:decimal | 算用数字 |
| list-style-type:lower-alpha | 小文字のアルファベット |
| list-style-type:upper-alpha | 大文字のアルファベット |
| list-style-type:hiragana | ひらがなの「あいうえお」順 |
| list-style-type:katakana | カタカナの「アイウエオ」順 |
背景画像の繰り返しで「横方向に繰り返す」場合、「repeat-x」を使いました。他にも以下のような繰り返しがあります。xが横、yが縦というのは、数学で習ったx軸、y軸をイメージすれば覚えやすいですね。
| background-repeat:repeat | 縦横にリピート |
| background-repeat:repeat-x | 横方向にリピート |
| background-repeat:repeat-y | 縦方向にリピート |
| background-repeat:no-repeat | リピートなし |
出来上がったホームページがこちら！
「その①」で作った「index.html」と今回作成した「style.css」で出来上がったホームページはこんな感じになります！
ホントはこれで完成ではないそうです。確かにナビゲーションメニューにリンクを付けましたが、アクセスのところだけ地図のリンクを付けただけです。それに先生からもらった素材は他にもありましたから、きっとこのトップページだけでなく、リンクページもどんどん作っていくんでしょうね。
授業で教えていただけたのは、ここまででした。皆さんもこのブログ「その①」と「その②」のコードを書いてもらえれば同じトップページができるはずです！これができれば実際の職業訓練での勉強も問題なく解けるはず。
それでは本日も最後までお付き合いいただき、ありがとうございました！
「バイナラ〜」って、きょうび聞かねぇなぁ。
