5日で何となく分かった気になるHTML&CSSの使い方入門【3日目】

HTML&CSS学習3日目トップ画像HTML・CSS
この記事は約10分で読めます。

分かった気になるHTML&CSSの3日目はCSSを中心に解説します。CSSはスタイルシートと呼ばれるもので、Webページのレイアウトやコンテンツの装飾など、デザインを定義する言語になります。短く言えば、見た目を設定する記述と言えば分かり易いでしょうか。

HTMLでコンテンツの構造や意味合いを定義して、それらを見栄え良く装飾したり、配置したりする事でWebページの視認性が高まります。

色彩感覚やデザイン力というのはセンス的な部分も大きいですが、まずはCSSの基本的な使い方を理解しましょう。

正直な話、私はデザインセンスについてあまり自信ありませんが・・・

前回の記事は下記を参照してください。

5日で何となく分かった気になるHTML&CSSの使い方入門【2日目】
分かった気になるHTML&CSSの2日目です。今回は初心者が最初に躓きがちな相対パスと絶対パスのお話から始めたいと思います。Webサイトを作成する際には、相対パスと絶対パスは必ず理解しておかなければならない項目です。
スポンサーリンク

CSSの記述場所

CSSを記述には、大きく分けて3パターンの方法があります。

  • <head>タグ内に記述する方法
  • 外部ファイルを作成しリンクする方法
  • 直接HTMLタグ内に記述する方法
CSSの外部ファイルをHTMLやCSS内にインポートする方法については今回は省略します。

<head>タグ内に記述する方法

使い方としては、ページ毎に別のデザインを適用したい場合に利用されます。

直接ブラウザに表示されない領域の<head>タグ内に記述します。

<head>
<meta charset="UTF-8">
<title>タイトル</title>
<style>
/* ここの領域に記述 */
</style>
</head>

以前は<style type=”text/css”>と記述しなければなりませんでしたが、HTML5からは「type=”text/css”」は不要になりました。

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標準のメモ帳を利用していましたが、今回からは無料のテキストエディタを利用したいと思います。

最初の内はコードのベタ打ちに慣れた方が、HTMLやCSSの習得には良いと考えています。
ある程度理解が深まりWebサイトの作成をするなら、入力補助のある高性能な「Visual Studio Code」や「Brackets」などを利用すると良いでしょう。
これらのソフトウェアについてはまた別の機会に記事にしてみたいと思います。

軽量で動作も軽く、必要な機能がそろった無料テキストエディタでお勧めしたいのが「Mery」です。

残念ながらWindowsのみの対応ですが、扱いやすくポータブル版もあるのでとても気に入っています。

Meryのダウンロードページ

上記よりダウンロードしてインストールもしくは解凍して利用して下さい。

任意の場所にフォルダを作成しその中にHTMLファイルを保存します。

フォルダの名前は任意で構いませんが、私は「practice1」としました。

それではダウンロードした「Mery」を起動してください。

1日目に解説したHTMLの基本構造のサンプルコードを貼り付けます。

meryファイル保存

先程作成した「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プロパティは線の太さ、線の種類、色を指定しています。各項目に半角の空白を空けて指定します。順序は任意です。

通常16進数のカラーコードは#+6桁ですが、色により3桁に省略できるものがあります。

id属性を指定した箇所にスタイルを適用する場合には、先頭に#(シャープ)を付けてセレクタにします。

一方、クラスを指定した箇所へのスタイル適用は、先頭に.(ピリオド)を付けます。

idにつける値は同Webページ内では、唯一の名称でなくてはなりません。同一の値は1か所のみが大原則です。複数箇所指定する場合には、クラスを使いましょう。

子孫セレクタによる適用

入れ子構造になっている要素に、スタイルを適用する方法です。

下記のスタイルを追記してみて下さい。

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
指定要素をクリックした状態のスタイルを指定。

上記を踏まえた上でブラウザ上でリンクをクリックし、各動作を確認して下さい。

この疑似クラスには記述する順番がありますので注意して下さい。

「link ⇒ visited ⇒ hover ⇒ active」の順番で記述しないと、途中のアクションが上書きされてしまう為うまく動作しません。

まとめ

CSS基礎についての説明は以上です。

CSSのプロパティは沢山存在しますが、それを右から左に覚えようとすると混乱すると思います。

まずはCSSの基本的な記述法やルールなどを把握して、テスト用のページで色々なスタイルを適用して練習してみるのが良いと思います。

焦らず少しずつ試しながら覚えて行くことが習得の近道だと考えています。

より本格的に理解を深めるのであれば、オンラインスクールなどを利用するのも一つの手だと思います。

「TechAcademy」のWebデザインコースなどもありますで、興味のある方はご覧になって下さい。

次回は外部ファイルのCSSを使って、Webページのレイアウトを中心に解説していきたいと思います。

5日で何となく分かった気になるHTML&CSSの使い方入門【4日目】
分かった気になるHTML&CSSの4日目はCSSを使ってWebページのレイアウトを行います。CSSでは多くのプロパティや値などを覚えるのも大変ではあるのですが、1番苦労するのがページのレイアウトや配置の設定です。