どうも、シノだ。
JavaScript講座をどうしようか迷っていたが、ちょっと今回は一歩前に戻る。CSSについてもう一個解説しておいた方がいいかなと思ったものがあったからだ。
今回は、元々用意されているCSSを使ってみよう、というお話だ。
というのも、CSSは既に色々なところで作られており、無償で使用できるものもある。
それを使えば、わざわざ一から作らなくても、しっかりした見た目を作り上げることができるのだ。
前回の復習
さて、だいぶ間が空いているので、前まで何をやっていたか先に振り返っておこう。
前回は、CSSの基本的な書き方について扱っていた。書き方は3通りあり、それぞれHTMLタグのstyleオプションとして使用する方法、styleタグに記述する方法、外部ファイルに記述して読み込む方法があった。
今回はこれらのうち、外部ファイルを読み込む方法をメインに扱っていく。具体的なものを一つ紹介し、どう使うか見ていこう。
今回使用するCSS
今回は、「SkyBlue CSS Framework」というものを使用させていただく。公式サイトはこちらだ。
先にどんな見た目になるか出しておこう。サンプルページはこちら。今までより、だいぶ見た目が華やかになっていると思う。
これを、一つずつ組んでいくとこうなる、というような感じで説明していこう。
外部CSSの使い方
上にもちらっと書いたが、こういった外部CSSを使用する場合、基本的にHTMLで読み込んでいくことになる。
というわけで、早速読み込んでいこう。
ダウンロードして読み込む
まず、モノがないと読み込めない。
というわけで、公式サイトからCSSファイルをDLしてこよう。上の方に貼った公式サイト内にダウンロードリンクがあるので、そこからDLしてきてほしい。
で、DLして解凍すると色々ファイルがあるが、実際に使用するのは、「css」ディレクトリ内のファイルだ。
二つファイルがあるが、どちらを読み込んでくれても構わない。というわけで、minがついてない方を読み込んでみよう。サンプルは以下の通り。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSSを読み込んでみよう</title>
<link rel="stylesheet" type="text/css" href="(DLしたフォルダ)/css/skyblue.min.css">
</head>
<body>
</body>
</html>とりあえず読み込みだけ。CSSのリンクは状況によって変わるので、書き換えて欲しい。また、サーバで動かす場合、基本的にはそのままDLしてきたもの全部を上げておけば間違いないと思う。今回はとりあえず動かしたいので、そのままあげておこう。
これで、使う準備は整った。
具体的な記述
さて、それでは早速書いてみよう。
とはいえ、いったんは普通にHTMLを組んでいこう。まず、サンプルとして色々表示したいので、ざっと使うものを並べてみる。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSSを読み込んでみよう</title>
<link rel="stylesheet" type="text/css" href="(DLしたフォルダ)/css/skyblue.css">
</head>
<body>
<div>
<h1>H1タグ使用例</h1>
<h2>H2タグ使用例</h2>
<h3>H3タグ使用例</h3>
<h4>H4タグ使用例</h4>
<h5>H5タグ使用例</h5>
<h6>H6タグ使用例</h6>
</div>
<div>
<p>Pタグ使用例<br>改行</p>
</div>
<div>
<ul>
<li><input type="text" value=""></li>
<li><input type="number" value=""></li>
<li>
<ul>
<li><input type="radio" name="radio-sample" value="1" checked>ラジオボタン1</li>
<li><input type="radio" name="radio-sample" value="2">ラジオボタン2</li>
<li><input type="radio" name="radio-sample" value="3">ラジオボタン3</li>
</ul>
</li>
<li>
<ul>
<li><input type="checkbox" name="check-sample" value="1">チェックボックス1</li>
<li><input type="checkbox" name="check-sample" value="2">チェックボックス2</li>
<li><input type="checkbox" name="check-sample" value="3">チェックボックス3</li>
</ul>
</li>
<li><input type="submit" value="決定ボタン"></li>
</ul>
</div>
</body>
</html>ざっとこんなものだろう。これだけでも、もう見た目がちょっと変わっている。というわけで、使うだけならもう完了だ。
しかし、何か物足りない。というのも、今回使用している「SkyBlue CSS Framework」というものは、クラス名をつけることでより効果的に見た目を変更できるのだ。
「SkyBlue CSS Framework」の使い方
上だけで終わったらトマトでも投げつけられそうなので、ちょっと詳細に踏み込んでみる。
使い方は…英語だが、上に貼った公式サイトに全部載っている。その中から、幾つか実際に使ってみよう。
サンプルページで、見出しごとに解説してみる。
見出しタグ
これは、そのまま使用するだけだ。タグ自体にスタイルが定義されている。
該当箇所のサンプルコードは以下の通り。
<h1>H1タグ使用例</h1>
<h2>H2タグ使用例</h2>
<h3>H3タグ使用例</h3>
<h4>H4タグ使用例</h4>
<h5>H5タグ使用例</h5>
<h6>H6タグ使用例</h6>Pタグ
…わざわざ解説を入れるまでもなかったかもしれない。見出しタグ同様、そのまま使用するだけ。
念のため、該当箇所のソースは以下の通りだ。
<p>Pタグ使用例1<br>改行</p>
<p>Pタグ使用例2</p>各種入力タグ
ここはそのままではない。ソースを見てしまおう。
<ul>
<li>テキスト入力：
<input class="form-control" type="text" value="">
</li>
<li>数字入力：
<input class="form-control" type="number" value="">
</li>
<li>ラジオボタン：
<ul>
<li>
<label class="fancy-radio">
<input type="radio" name="radio-sample" value="1" checked><span>ラジオボタン1</span>
</label>
</li>
<li>
<label class="fancy-radio">
<input type="radio" name="radio-sample" value="2"><span>ラジオボタン2</span>
</label>
</li>
<li>
<label class="fancy-radio">
<input type="radio" name="radio-sample" value="3"><span>ラジオボタン3</span>
</label>
</li>
</ul>
</li>
<li>チェックボックス：
<ul>
<li>
<label class="fancy-checkbox">
<input type="checkbox" name="check-sample" value="1"><span>チェックボックス1</span>
</label>
</li>
<li>
<label class="fancy-checkbox">
<input type="checkbox" name="check-sample" value="2"><span>チェックボックス2</span>
</label>
</li>
<li>
<label class="fancy-checkbox">
<input type="checkbox" name="check-sample" value="3"><span>チェックボックス3</span>
</label>
</li>
</ul>
</li>
<li>決定ボタン：<input class="btn btn-empty" type="submit" value="決定ボタン"></li>
</ul>見てもらってわかるかと思うが、色々クラス名をつけている。
このように、特定のクラス名をつけることで、そのクラスに対応したスタイルをつけることが可能だ。
使い方は公式にも載っているので詳細を解説するのは避けよう。代わりに、HTMLタグの説明を一つと、クラス名の書き方で補足を一つ。
HTMLタグは、新たにlabelタグを使用している。これは、まあそのままラベルとして扱うものだ。このCSSを使用するために今回は使用しているが、通常も文字などの表示に使う。
で、クラス名の書き方について。今回、ボタンのクラスに「btn btn-empty」と、半角スペースを入れている。
このようにすると、一つのタグに複数のクラス名をつけることができる。これは、SkyBlue CSSに限った話ではないので、覚えておこう。
サンプルソースコード全文
上で紹介したもの以外にも、トップの見出し、サイドメニュー、ページの分割など、色々なものをサンプルでは使用している。もちろん、公式サイトに解説もある。
以下、サンプルページの全コードを記載しておこう。CSS読み込み部はいつもの通り、環境に合わせて欲しい。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSSを読み込んでみよう</title>
<link rel="stylesheet" type="text/css" href="(DLしたフォルダ)/css/skyblue.css">
</head>
<body>
<div class="bg-dark padding-y-20">
<div class="container text-center">
<h1>CSSを読み込んでみよう</h1>
</div>
</div>
<div class="container">
<div class="row">
<div class="col md-3">
<div class="sidemenu js-sidemenu">
<h5>目次</h5>
<div>
<a href="#contents1">見出しタグ</a><br>
<a href="#contents2">Pタグ</a><br>
<a href="#contents3">入力タグ</a>
</div>
</div>
</div>
<div class="col md-9 float-right">
<h2 id="contents1">見出しタグ</h2>
<div class="row row-border">
<div class="col md-8">
<table class="table">
<tr><td><h1>H1タグ使用例</h1></td></tr>
<tr><td><h2>H2タグ使用例</h2></td></tr>
<tr><td><h3>H3タグ使用例</h3></td></tr>
<tr><td><h4>H4タグ使用例</h4></td></tr>
<tr><td><h5>H5タグ使用例</h5></td></tr>
<tr><td><h6>H6タグ使用例</h6></td></tr>
</table>
</div>
</div>
<h2 id="contents2">Pタグ</h2>
<div>
<p>Pタグ使用例1<br>改行</p>
<p>Pタグ使用例2</p>
</div>
<h2 id="contents3">入力タグ</h2>
<div>
<ul>
<li>テキスト入力：
<input class="form-control" type="text" value="">
</li>
<li>数字入力：
<input class="form-control" type="number" value="">
</li>
<li>ラジオボタン：
<ul>
<li>
<label class="fancy-radio">
<input type="radio" name="radio-sample" value="1" checked><span>ラジオボタン1</span>
</label>
</li>
<li>
<label class="fancy-radio">
<input type="radio" name="radio-sample" value="2"><span>ラジオボタン2</span>
</label>
</li>
<li>
<label class="fancy-radio">
<input type="radio" name="radio-sample" value="3"><span>ラジオボタン3</span>
</label>
</li>
</ul>
</li>
<li>チェックボックス：
<ul>
<li>
<label class="fancy-checkbox">
<input type="checkbox" name="check-sample" value="1"><span>チェックボックス1</span>
</label>
</li>
<li>
<label class="fancy-checkbox">
<input type="checkbox" name="check-sample" value="2"><span>チェックボックス2</span>
</label>
</li>
<li>
<label class="fancy-checkbox">
<input type="checkbox" name="check-sample" value="3"><span>チェックボックス3</span>
</label>
</li>
</ul>
</li>
<li>決定ボタン：<input class="btn btn-empty" type="submit" value="決定ボタン"></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>…すまない、貼って気づいた。aタグのhrefオプションで#始まりのものを使っていた。
解説していなかった気がするので、ここで解説してしまおう。
今回、#contents1のようなリンクを貼っている。これは、そのページ内で「contents1」というID名を付けたところにジャンプする、という意味になる。
そこを押してもらうと、実際にそれぞれの解説部分に飛んでくれると思う。
で、これは別ページでも可能だ。hrefの中身を「ページURL#ID名」にすると、その先のページで、ID名が該当する箇所に自動でスクロールしてくれる。
目次を作るときなんかに非常によく使うので、覚えておこう。
おわりに
いかがだっただろうか。今回は、具体的な題材を元に、外部のCSSを使う方法を解説してみた。
今回使用したSkyBlue CSS Frameworkもそうだが、こういった外部のCSSを使う場合は、それぞれの使い方があるので、それごとに学習をしてほしい。
また、CSSを書けるなら、実際のソースの中身を見て、どう動いているか確認するのも面白いだろう。ただし、これは実際にソースの中身を見ていいよ、となっている場合だけにしよう。
さて、次回は本題に戻ってJavaScript講座だ。やる内容は、jQueryを扱っていこうと思う。
また、次回以降もサンプルページに関しては今回使用したSkyBlue CSS Frameworkを使って画面装飾もしていこう。その方が、見た目が綺麗になるので多少なりともやりやすくなるはずだ。
更新情報はTwitterでも垂れ流している。よかったら、ページ下部のTwitterアイコンから覗いていってほしい。
それでは。
コメント