50歳から自分の好きな職業に簡単に転職できるの? ここは「がっちゃん 」が実際に体験した転職への道を記録するブログである

超初心者向け!HTMLとCSSの基本を学ぶ:その②

どうも!職業訓練生のがっちゃんです!

 ただいま、「情報セキュリティ管理者資格コース」を絶賛受講中です!ここでは職業訓練で学んだことを復習がてら掲載しています。このコースの受講を検討中の方への参考になればと思います。

 今回は「HTMLとCSSの基本について:その①」の続き、CSSについて学んだことをお伝えしたいと思います!「その①」をまだ見ていない方は、まずは「その①」から見てくださいね!

コードエディタ「Visual Studio Code」・ブラウザ「Google Chrome」いずれも無料。

CSSって、なんぞ!?

 「Cascading Style Sheets」(カスケーディング・スタイル・シート)の略称で、HTMLのお供で、装飾、レイアウトなどデザインを担当する言語だよ。

 今回もコードエディタ「Visual Studio Code」を使いました無料のソフトですが、コードを入力するときに「このコードを使う!?」「このフォルダのこのデータを使う!?」みたいに入力補助をしてくれて、とても便利です。

 「Visual Studio Code」をインストールしたら「拡張機能」から、コマンドを日本語表示してくれる「Japanese Language Pac for Visual Studio Code」と、HTMLコードをブラウザで表示できる「View In Browser」をインストールしておくことをオススメします!

 この辺りのことは、「超初心者向け!HTMLとCSSの基本を学ぶ:その①」で、ご確認くださいね。

スタイルシートの書式

https://qiita.com/io_fleming/items/c4435977073aba1e8ede より引用

セレクタとは!?

 セレクタは、HTMLの「どこに!?」デザインのルールを適用するかを指示する場所のことです。上の例では「h1」という場所に「デザイン」を付けちゃってねぇ、ということになります。

 セレクタには「id属性」「class属性」「タグ属性」などを指定します。

宣言ブロックとは!?

 どんなデザインを適用したいのかを書く場所です。「{」 と「 }」の間に、「プロパティ」というふうに書きます。

プロパティとは!?

 設定項目のことです。上の例ではフォントサイズですが、他にも色、ボックスの幅や高さなど、様々な項目があります。

値とは!?

 プロパティに設定する「値」です。プロパティによって数字、文字、特定のキーワードなど、設定値はそれぞれ異なります。プロパティと値は「:」でつなげます。値の後ろには必ず「;」を付けます。 

セレクタの種類

タイプセレクタ

 タグ名をデザイン適用場所に指定します。下記の例では<p></p>にデザインが適用され、<h2></h2>には適用されません。

CSSファイル
p{

     color:#ff0000;
}

HTMLファイル
<h2 id=”news”>NEWS</h2>
<p>5月30日掲載されました!</p>
<p>4月18日オープンしました!</p>

全称セレクタ

 *(アスタリスク)は「全称セレクタ」といい、全てにデザインが適用されます。以下の例では、<h2></H2>、<p></p>のどちらにも適用されます。

CSSファイル
*{

     color:#ff0000;
}

HTMLファイル
<h2 id=”news”>NEWS</h2>
<p>5月30日掲載されました!</p>
<p>4月18日オープンしました!</p>

idセレクタ

 特定のid属性値を指定(「お前は闇の属性だ!」っていう感じで指定かな?)し、その属性値だけにデザインを適用させます。id属性名の手前には必ず「#」を付けます。
CSSファイル
#footer{

       color:#ffff00;
}

HTMLファイル
<div id=”footer”>
       <p>&copy;Copyright KUJIRA cafe. All rights reserved.</p>
</vid>

classセレクタ

 特定のclass属性値が指定された値だけに適用させます。class属性名の手前には必ず「.」を付けます。
CSSファイル
.keyvisual{

       margin: 20px 0 0 0;
}

HTMLファイル
<div class=”keyvisual”>
       <img src=”./images/keyvisual.jpg” alt=”自慢のタルトです!”/>
</div>

擬似クラス

 特定のセレクタの要素の状態によって設定していくのが擬似クラスです。擬似クラスは必ず「:」で始めます。よく使用される例がリンクの作成で使用される「a」タグ(アンカータグ)です。
CSSファイル
a:link{

       color:#6aa4d6;  /*通常*/
}
a:visited{
      color:#6aa4d6;  /*リンク先が訪問済み*/
}
a:hover{
       color:#4f7697;  /*マウスポインタがリンクに乗っている*/
}
a:active{
       color:#aed3f2;  /*マウスポインタが押されている*/
}

子孫コンビネータ

 特定の要素に含まれる子要素、子孫要素に適用させるセレクタが子孫コンビネータです。セレクタとセレクタは、半角スペースで区切ります。下の例ではid属性値が”nav”の親要素に含まれるliだけに適用されます。

CSSファイル
#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」というファイル名をつけることが一般的です。

HTMLファイル
<head>
       <!–外部CSSファイルへのリンク–>
       <link rel=”stylesheet” type=”tet/css” href=”css/style.css”>
</head>
  CSSファイルの作成には、先頭に必ず文字コードを記述します。
CSSファイル
@charset”UTF-8″;

CSSの記述プロパティと値

文字の色を指定する

 文字色を指定するのが「color」プロパティです。色は16進数のカラーコードで指定します。また、主要な色は「red」「blue」などの文字で指定することも可能です。

 カラーコードは「原色大辞典」などのサイトを参考にして記述します。

p{
       /*pタグを赤に*/
       color:#ff0000;
}

書体、文字の大きさを指定する

 書体(フォント)を指定するのが「font-family」、文字の大きさを指定するのが「font-size」です。

p{
       /*pタグをセリフ体に指定*/
       font-family:serif;
       /*文字の大きさを指定*/
       font-size:smaller;
}
 font-sizeは、12pxや1.0emなど数値による指定の他に、標準サイズに対する相対的なサイズを指定できます。
xx-large 非常に大きい
x-large より大きい
large 大きい
medium 標準のフォントサイズ
small 小さい
x-small より小さい
xx-small 非常に小さい
smaller
larger

背景色を変える

 背景色を指定するのが「background-color」プロパティです。

p{
       /*pの背景をグレーにする*/
background-color:#666666;
}

コメント文

 CSSにもコメント文を記述することができます。
/*ここはコメント文です*/

/*
    複数行にコメントを書くこともできます。
    複数行にコメントを書くこともできます。
    複数行にコメントを書くこともできます。
*/

横幅、高さの指定

 要素の横幅や高さを指定できます。指定には単位が必要です。px(ピクセル)で指定します。
HTMLファイル
<h1>アクセス</h1>
<img src=”./images/map.png”>

CSSファイル
h1{
       width:500px;
       height:80px;
       background-color:#9de8ea;
}

img{
       width:500px;
       height:300px;
}

CSSボックスモデル

 文書内の全ての要素はボックスと呼ばれる四角形の領域を作られています。各ボックスは以下の4つの領域で構成されています。領域の大きさは各プロパティによって指定することができます。

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」というファイルを作成します。内容は以下の通りに入力していきます。

新しく出てきた値など

 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」で出来上がったホームページはこんな感じになります!

 ホントはこれで完成ではないそうです。確かにナビゲーションメニューにリンクを付けましたが、アクセスのところだけ地図のリンクを付けただけです。それに先生からもらった素材は他にもありましたから、きっとこのトップページだけでなく、リンクページもどんどん作っていくんでしょうね。

 授業で教えていただけたのは、ここまででした。皆さんもこのブログ「その①」と「その②」のコードを書いてもらえれば同じトップページができるはずです!これができれば実際の職業訓練での勉強も問題なく解けるはず。

それでは本日も最後までお付き合いいただき、ありがとうございました!

「バイナラ〜」って、きょうび聞かねぇなぁ。

スポンサーリンク
最新情報をチェックしよう!