ファンサイトを作りながら学ぶWeb開発 -CSSによるデザイン-
今回の記事ではCSS(Cascading Style Sheets)を触っていきます。CSSはHTMLの見た目を整えるための技術です。これまでの記事で作成した以下のHTMLを使って試していきましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ももんご</title>
</head>
<body>
<p>大すこ</p>
<img src="https://img.nogizaka46.com/www/member/img/oozonomomoko_prof.jpg">
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">本日1月24日(日)20:05頃〜、NHKラジオ第1「らじらー！サンデー」に、<a href="https://twitter.com/hashtag/%E5%A4%A7%E5%9C%92%E6%A1%83%E5%AD%90?src=hash&ref_src=twsrc%5Etfw">#大園桃子</a> がリモート生出演します！<br>みなさま、ぜひお聴きください！<a href="https://twitter.com/hashtag/nhk%E3%82%89%E3%81%98%E3%82%89%E3%83%BC?src=hash&ref_src=twsrc%5Etfw">#nhkらじらー</a><a href="https://twitter.com/hashtag/%E4%B9%83%E6%9C%A8%E5%9D%8246?src=hash&ref_src=twsrc%5Etfw">#乃木坂46</a><a href="https://t.co/jNl7iFSWqU">https://t.co/jNl7iFSWqU</a> <a href="https://t.co/FCirjhgmgV">pic.twitter.com/FCirjhgmgV</a></p>— 乃木坂46 (@nogizaka46) <a href="https://twitter.com/nogizaka46/status/1353293467850477568?ref_src=twsrc%5Etfw">January 24, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</body>
</html><body>タグ内の<p>タグにstyle属性を追加して次のように変更してみてください。
<p style="font-size: 3em; color: red;">大すこ</p>これはフォントのサイズを大きくして(emというのはフォントサイズの単位です）、色を赤にするという意味です。
ブラウザで表示するとこんな感じになります。愛が大きくなりましたね。
しかし、style属性を使うと指定する値が増えた場合に読みにくくなったり、他のタグでも同じデザインを使いたい時に毎回同じ値を書かなければいけなかったりしてメンテナンスが大変です。そこで、定義自体に名前をつけて管理します。
ここでは愛を表現する意味で「momokolove」という名前をつけましょう。以下2つを変更します。
・<head>タグ内に<style>タグを追加してmomokoloveを定義
・<p>タグにclass属性を追加してmomokoloveを指定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ももんご</title>
<style>
.momokolove {
font-size: 3em;
color: red;
}
</style>
</head>
<body>
<p class="momokolove">大すこ</p>
<img src="https://img.nogizaka46.com/www/member/img/oozonomomoko_prof.jpg">
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">本日1月24日(日)20:05頃〜、NHKラジオ第1「らじらー！サンデー」に、<a href="https://twitter.com/hashtag/%E5%A4%A7%E5%9C%92%E6%A1%83%E5%AD%90?src=hash&ref_src=twsrc%5Etfw">#大園桃子</a> がリモート生出演します！<br>みなさま、ぜひお聴きください！<a href="https://twitter.com/hashtag/nhk%E3%82%89%E3%81%98%E3%82%89%E3%83%BC?src=hash&ref_src=twsrc%5Etfw">#nhkらじらー</a><a href="https://twitter.com/hashtag/%E4%B9%83%E6%9C%A8%E5%9D%8246?src=hash&ref_src=twsrc%5Etfw">#乃木坂46</a><a href="https://t.co/jNl7iFSWqU">https://t.co/jNl7iFSWqU</a> <a href="https://t.co/FCirjhgmgV">pic.twitter.com/FCirjhgmgV</a></p>— 乃木坂46 (@nogizaka46) <a href="https://twitter.com/nogizaka46/status/1353293467850477568?ref_src=twsrc%5Etfw">January 24, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</body>
</html><style>タグの中の「.momokolove」は頭にドットをつける必要があるのでご注意ください。
ブラウザで表示すると最初に定義したものと同じものが表示されると思います。メリットがわかりにくいので、もう1つ<p>タグを追加してみましょう。
<p class="momokolove">大すこ</p>
<img src="https://img.nogizaka46.com/www/member/img/oozonomomoko_prof.jpg">
<p class="momokolove">ももんご大すこ</p>文字のデザインを変えたい！と思ったら、<style>タグの内容を1箇所変更するだけで、momokoloveを指定した文字全てのデザインが変更できるので便利です。
さらに、CSSのデザイン定義は増えていく傾向にあるため、通常は<style>タグの部分を個別のファイルとして定義します。実際にやってみましょう。
最初に作ったindex.htmlと同じ階層に「css」というフォルダを作成して、その中にstyle.cssファイルを作成して下さい。
style.cssには次の内容を定義します。
.momokolove {
font-size: 3em;
color: red;
}次にindex.htmlの<head>タグに以下を追加します。先ほど作ったCSSファイルを参照してね、という宣言です。
<link rel="stylesheet" href="css/style.css" />最終的にこのような内容です。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ももんご</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<p class="momokolove">大すこ</p>
<img src="https://img.nogizaka46.com/www/member/img/oozonomomoko_prof.jpg">
<p class="momokolove">ももんご大すこ</p>
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">本日1月24日(日)20:05頃〜、NHKラジオ第1「らじらー！サンデー」に、<a href="https://twitter.com/hashtag/%E5%A4%A7%E5%9C%92%E6%A1%83%E5%AD%90?src=hash&ref_src=twsrc%5Etfw">#大園桃子</a> がリモート生出演します！<br>みなさま、ぜひお聴きください！<a href="https://twitter.com/hashtag/nhk%E3%82%89%E3%81%98%E3%82%89%E3%83%BC?src=hash&ref_src=twsrc%5Etfw">#nhkらじらー</a><a href="https://twitter.com/hashtag/%E4%B9%83%E6%9C%A8%E5%9D%8246?src=hash&ref_src=twsrc%5Etfw">#乃木坂46</a><a href="https://t.co/jNl7iFSWqU">https://t.co/jNl7iFSWqU</a> <a href="https://t.co/FCirjhgmgV">pic.twitter.com/FCirjhgmgV</a></p>— 乃木坂46 (@nogizaka46) <a href="https://twitter.com/nogizaka46/status/1353293467850477568?ref_src=twsrc%5Etfw">January 24, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</body>
</html>実際の表示は以下の通りで、CSSを外部ファイルにしても表示結果は同じです。HTMLとCSSの定義が分離されるので、コードが読みやすく、編集しやすくなります。
このCSSを利用してデザインを行っていくのですが、一般的なWebサイトのように綺麗な表示をゼロから整えていくのはとても大変です。そこでよく使われるのがCSSフレームワークと呼ばれるものです。これは誰でも綺麗なデザインが簡単にできるように作られたツールで、有名なところではBootstrapなどがあります。
次回はCSSフレームワークを使って、もう少し綺麗なページにしていきたいと思います。
サポートいただいた費用はすべて「ももさいと」のサーバやドメインの管理費用に充てます。桃子さんの生写真やグッズに充ててしまったらごめんなさい...。