• ログインログイン
  • 新規登録新規登録

MENU

初心者の初心者による初心者のためのWEBサイト制作入門 第4回

連載初心者の初心者による初心者のためのWEBサイト制作入門

プログラミングが全くわからない!そもそもホームページの作られ方からよくわかっていない、という学生必見のコンテンツです。今となっては周りに聞きづらい、タグの説明やCSSの書き方まで、初心者が一番知りたい内容が盛りだくさんです。

前回までのプログラミング学習コラムに続き4回目の勉強内容です。

前回はCSSの概論を説明してDreamweaver CCをダウンロードするところまで進めました。今回は実際に記述してHTMLに反映させたいと思います。

前回保存したスタイルシートを開いてください。このスタイルシートは前回行った作業によって第1・2回で作成したHTMLファイルとリンクしています。

<!DOCTYPE html>
<html>
<head>

<link href="style1.css" rel="stylesheet" type="text/css">
<title>笑論法</title>
<meta charset="UTF-8">
</head>
<body>
<ul>
<li>新進気鋭のお笑いサークルです</li>
<li id="practice">毎週火曜日に練習を行っています</li>
<li>定期的に漫才やコントのライブも開催しています</li>
</ul>
<a href="http://engineer-intern.jp"><img src="pictures/logo.jpg" alt="ロゴ" width="600px" height="333px"></a>
</body>
</html>

笑論法

いまから画像の中の3行ある文章のうち、真ん中の文「・毎週火曜日に練習を行っています」に装飾を施します。前回やったCSSの書式、セレクタ{プロパティ:値} を思い出してください。このうちセレクタ部分に装飾を施したいタグを記述するのでしたね。

しかし、<li>タグは<ul>タグを親とする構造のうち、3つの文すべてにかかっています。このままではセレクタ部分にliと記述すれば、3つの文すべてに装飾がほどこされてしまいます。

そこで同じタグのうち一部は違うデザインにしたいときの方法を紹介します。これはIDセレクタと呼ばれるものを利用するやり方で、HTML側で要素に属性として「id=”id名“」を追加し、CSS側では「要素#id名」で指定します。idを使って要素に名前を付けよう、というわけです。ただし、同じid名は1ページに1つだけしか使えません。

では、笑論法.txtの方では、

<li id=”practice”>毎週火曜日に練習を行っています</li>

と記述してください。一方、style.cssの方では、

ul li#practice

と記述します(親要素ulの中の子要素li#practiceを指定するという意味です)。

あとは装飾を思う存分施すだけです。まずは文字の色を変更してみましょう。

文字の色を変更するためには、color:色コード; を用います。色コードとは16進数を使った色の表示形式です。例えば、#FF0032 のように表します。このコードでは、光の三原色である「赤」「緑」「青」それぞれを0~255の256階調で表すことができ、16進数表記では00からFFまでとなります。

左から2桁ずつRed,Green,Blueとなっています。この場合はRed=FF,Green=00,Blue=32なので、鮮やかな赤色となりますね。他にも、直接色の名前でredやorangeと記述する方法があります。

では、スタイルシートに、

ul li#practice{color:#00FF21;}

と記述してみましょう。これで2つ目の文が緑色になったはずです。

次に文字をいじってみましょう。文字の太さを変える場合は、

font-weight:値;

値にはnormalやboldを使用します。また下線などを引きたい場合は、

text-decoration:値;

値にはunderline(下線)、overline(上線)、line-through(打ち消し線)を使用します。

ここでは文字を斜体にしてみましょう。

ul li#practice{
color:#00FF21;
font-style:italic;
}

と記述してください。

斜体文字

これ以外にもline-height:○○px;で行の高さが、letter-spacing:○○px;で文字間隔が指定できます。それぞれ○○には数値が入り、normalで普通の高さや文字間隔にすることができます。さらに、text-indent:○○px;ではインデントを下げることができます。

今回はCSSで文字の装飾をしました。次回も引き続きCSSを扱いますのでよろしくお願いします。

オススメ記事一覧

もっと見る
完全無料!

1で登録完了!

エンジニアの仕事・年収や選考ノウハウ記事が読めるほか、
会員にはプログラミング講習やES・面接対策などリアルな無料サポートも充実。
ここだけの求人情報も多数。

今すぐ新規会員登録
Page Top