分かった気になるHTML&CSSの3日目はCSSを中心に解説します。CSSはスタイルシートと呼ばれるもので、Webページのレイアウトやコンテンツの装飾など、デザインを定義する言語になります。短く言えば、見た目を設定する記述と言えば分かり易いでしょうか。
HTMLでコンテンツの構造や意味合いを定義して、それらを見栄え良く装飾したり、配置したりする事でWebページの視認性が高まります。
色彩感覚やデザイン力というのはセンス的な部分も大きいですが、まずはCSSの基本的な使い方を理解しましょう。
正直な話、私はデザインセンスについてあまり自信ありませんが・・・
前回の記事は下記を参照してください。
CSSの記述場所
CSSを記述には、大きく分けて3パターンの方法があります。
- <head>タグ内に記述する方法
- 外部ファイルを作成しリンクする方法
- 直接HTMLタグ内に記述する方法
<head>タグ内に記述する方法
使い方としては、ページ毎に別のデザインを適用したい場合に利用されます。
直接ブラウザに表示されない領域の<head>タグ内に記述します。
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<style>
/* ここの領域に記述 */
</style>
</head>以前は<style type=”text/css”>と記述しなければなりませんでしたが、HTML5からは「type=”text/css”」は不要になりました。
外部ファイルを作成しリンクする方法
複数ページあるようなWebサイトの場合には、共通のレイアウトや装飾を適用させるため、ベースのCSSファイルを作成し、各ページに読み込ませるというような使い方をします。
<head>タグ内にlink要素で外部CSSファイルへの関連付けを行います。
<link rel="stylesheet" href="css/base.css">最小限の記述になります。こちらもtype属性の記述は必要なくなりました。
- rel属性(必須)
- 関連させるリソースの種類を指定します。(CSSファイルはstylesheetで指定)
- href属性(必須)
- リンクするリソースの相対パスや絶対パスのURLを指定。
直接HTMLタグ内に記述する方法
ピンポイントにスタイルを適用させたい場合に利用されます。
<p style="color:red;">テスト文章です。</p>まだCSSの書き方の説明をしていないので、サンプルコードはさらっと流してください。
<p>タグで囲まれた「テスト文章です。」という文字を赤色にするという意味です。
CSSの記述方法
テキストエディタと学習準備
前回までエディタはWindows標準のメモ帳を利用していましたが、今回からは無料のテキストエディタを利用したいと思います。
ある程度理解が深まりWebサイトの作成をするなら、入力補助のある高性能な「Visual Studio Code」や「Brackets」などを利用すると良いでしょう。
これらのソフトウェアについてはまた別の機会に記事にしてみたいと思います。
軽量で動作も軽く、必要な機能がそろった無料テキストエディタでお勧めしたいのが「Mery」です。
残念ながらWindowsのみの対応ですが、扱いやすくポータブル版もあるのでとても気に入っています。
上記よりダウンロードしてインストールもしくは解凍して利用して下さい。
任意の場所にフォルダを作成しその中にHTMLファイルを保存します。
フォルダの名前は任意で構いませんが、私は「practice1」としました。
それではダウンロードした「Mery」を起動してください。
1日目に解説したHTMLの基本構造のサンプルコードを貼り付けます。
先程作成した「practice1」フォルダ内に「index.html」という名前のファイル名で保存します。
保存の際、エンコードは「UTF-8(BOM無し)」にして下さい。改行コードは「CR+LF(Windows)」でOKです。
<title>タグ内に任意のタイトル名を記述します。
CSSの記述基礎
スタイルを適用する記述の基本形は、以下のような形です。
スタイルを適用する場所を表すのが「セレクタ」、どのようなスタイルかを表すのが「プロパティ」、それに対する「値」を:(コロン)と;(セミコロン)で囲います。
「セレクタ」には複数のプロパティを指定する事が可能ですので、全体を{}(中かっこ)で囲うのが記述方法になります。
文章だと分かりずらいので、実際にスタイルを適用してみましょう。
<body>タグ内下記のような文章があるとします。
<h1>Webページの大見出しを表すのがh1要素です。</h1>この文章の文字色を赤色、文字サイズを50pxにしてみます。
<head>タグ内に以下を記述して下さい。
<style>
h1{
color:#ff0000;
font-size:50px;
}
</style>ブラウザで確認すると、かなり大きめの赤色字で表示されていると思います。
プロパティの「color」で指定した値の「#ff0000」は赤色を表す16進数です。カラーネームのある基本色であれば「red」のように文字で記述する事も可能です。
指定した色やサイズの値を色々変更してみて、どのように変わるか確認してみるのも練習になります。
今度はブラウザの表示領域全体の背景を薄い青にしてみます。
h1セレクタの下にでも下記を追記して下さい。
body{
background-color:skyblue;
}ブラウザで確認すると、背景全体が空色になっているかと思います。
クラスセレクタ、idセレクタの使い方
HTMLの要素を指定した装飾以外に、クラスやidを付与して指定する方法があります。
<body>タグ内に下記のコンテンツを追記して下さい。
<h2>Webページ毎に<span>CSS適用</span>をする練習です。</h2>
<p id="idtext">こちらはidを付与した文章です。</p>
<p class="cltext">こちらは<span>クラスを付与</span>した文章です。</p>先程<head>タグ内に記述したCSSのh1セレクタの下にでも、下記を記述してみて下さい。
h2{
color:#fff;
background-color:#000;
}
#idtext{
font-size:250%;
text-align:center;
}
.cltext{
border:2px solid #ff8c00;
}入力したらブラウザで確認してみましょう。
<h2>タグで囲まれたコンテンツの背景が黒に、文字色が白になっているかと思います。
idで指定したコンテンツは位置が中央になり文字サイズは<h2>タグのコンテンツより大きく、クラス指定したコンテンツは、濃いオレンジの線で囲まれています。
文字サイズはpxだけでなく、%やemなどの値を指定することが可能です。
text-alignプロパティで表示位置を調整しています。
borderプロパティは線の太さ、線の種類、色を指定しています。各項目に半角の空白を空けて指定します。順序は任意です。
id属性を指定した箇所にスタイルを適用する場合には、先頭に#(シャープ)を付けてセレクタにします。
一方、クラスを指定した箇所へのスタイル適用は、先頭に.(ピリオド)を付けます。
子孫セレクタによる適用
入れ子構造になっている要素に、スタイルを適用する方法です。
下記のスタイルを追記してみて下さい。
h2 span{
color:#ff69b4;
font-style:italic;
}
.cltext span{
font-weight:bold;
}ブラウザを開いた状態であれば、F5キーを押してリフレッシュします。
<h2>タグ内の「CSS適用」がピンク色で斜体に、2番目の<p>タグ内「クラスを付与」が太字になっていると思います。
このように親子関係の入れ子構造内を指定して、デザインを適用させることが出来ます。
親要素を表すセレクタと子要素を表すセレクタの間に半角スペースを空けて、セレクタを指定します。
疑似クラスの使い方
疑似クラスとは特定のアクションがあった場合にスタイルを定義するセレクタです。
なんだか難しく書いていますが、リンクにマウスカーソルが指定された時、クリックされた時、クリックされた後などの状況でスタイルを適用させる例で解説していきます。
まずは<body>タグ内に下記を追記して下さい。
<p><a href="https://www.google.co.jp/" target="_blank">google検索にジャンプします。</a></p><head>タグ内のCSSは下記のように記述します。
a:link{
color:#8a2be2;
}
a:visited{
color:#ffffff;
}
a:hover{
color:#000000;
background-color:#ffff00;
}
a:active{
color:#dc143c;
}- :link
- 未訪問状態のスタイルを指定。
- :visited
- 訪問済み状態のスタイルを指定。
- :hover
- 指定要素にポインタを合わせた状態のスタイルを指定。
- :active
- 指定要素をクリックした状態のスタイルを指定。
上記を踏まえた上でブラウザ上でリンクをクリックし、各動作を確認して下さい。
この疑似クラスには記述する順番がありますので注意して下さい。
まとめ
CSS基礎についての説明は以上です。
CSSのプロパティは沢山存在しますが、それを右から左に覚えようとすると混乱すると思います。
まずはCSSの基本的な記述法やルールなどを把握して、テスト用のページで色々なスタイルを適用して練習してみるのが良いと思います。
焦らず少しずつ試しながら覚えて行くことが習得の近道だと考えています。
より本格的に理解を深めるのであれば、オンラインスクールなどを利用するのも一つの手だと思います。
「TechAcademy」のWebデザインコースなどもありますで、興味のある方はご覧になって下さい。
次回は外部ファイルのCSSを使って、Webページのレイアウトを中心に解説していきたいと思います。
