CSS入門
CSS(Cascading Style Sheet)とは、HTMLが表示するページを装飾するための言語です。
HTMLとは別々にすることによって、文章とデザインを分けるために作られました。
項目内容
-
HTMLがCSSを読み取れるようにする
-
CSSを書いてみる
-
CSSコード解説
-
Twitter Bootstrapを導入する
-
Twitter Bootstrapを使ってみる
-
ドロップダウンボタンを追加する
-
ドロップダウンを実装する
- ドロップダウンボタンのスタイル変化させる
CSSを実際に使うためには、HTMLにこれを読み取るように指示してあげなければいけません。
HTML入門で作成したhtmlファイルを以下のように変更しましょう。
<html>
<head>
<title>This is the title</title>
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>追加されたのは<link rel="stylesheet" href="main.css" type="text/css">と、という一行です。
これを追加することによってCSSが読み込めるようになりました。
また、bodyにあるHello World!も<h1></h1>で囲まれました。これは、これで囲まれたところが見出しであるということを指定するタグです。項目のまとまりを見やすくするために使えます。
ターミナルを開いて
vim main.css
と打ち込み、CSSファイルを作成し、以下のCSSの基本構造の例を打ち込んでください。
body {
color: red;
}
h1 {
border-left: 10px solid #2EA7E0;
padding-left: 10px;
}この入力が終わったら、一度ファイルを保存し
open index.html
と打ち込んで、ブラウザでindex.htmlを開いてみましょう。 下の画像と同じ表示がされているか確認して下さい。
実際に書いたCSSのコードを見て行きましょう。
body {
color: red;
}
h1 {
border-left: 10px solid #2EA7E0;
padding-left: 10px;
}まずbody{}と書いてある箇所から見ていきます。
body {
color: red;
}まず、どの箇所にスタイルを適用するかというのを指定します。今回の場合は、body{}と書いてあるので、htmlファイルで記述した<html></html>で囲んだ箇所についてスタイルを適用するということがわかります。
次に、{}の中にはcolor: red;と書かれています。これは、テキストやボーダーラインの色を赤色に指定する、という意味です。
つまり、bodyのタグに囲まれている箇所のテキストやボーダーラインを赤に指定するということです。今回はテキストしかないので、Hello World!が赤色になっているのがわかると思います。
残りの部分も見てみましょう。
h1 {
border-left: 10px solid #2EA7E0;
padding-left: 10px;
}今回はh1{}で囲まれているので、htmlファイルのh1タグで囲まれている箇所がスタイルの適用範囲であることがわかります。
この適用範囲には、border-left: 10px solid #2EA7E0;とpadding-left: 10pxというスタイルが指定されています。
border-leftは指定された箇所の左側のボーダーラインを指定します。その後に続く10pxは10ピクセルで、ボーダーラインの太さを指定しています。solidは実践でボーダーラインを描くように指示をしている箇所です。#2EA7E0はブラウザ上で見えるHello World!の横にあるボーダーラインの青みがかった色を指定しています。
ここで注目したいのは、htmlファイル上でh1タグが、bodyタグの中に入っていることです。
bodyタグに囲まれているので、CSSファイル上ボーダーラインは赤で描画されるように見えますが、CSSファイルのh1タグのスタイル指定の箇所で、その色を#2EA7E0と指定するように書かれているので、スタイルは上書きされ、結果的にボーダーラインは青みがかった色になることがわかります。
実際に以下のようにmain.cssを書き換えると
h1 {
border-left: 10px solid;
padding-left: 10px;
}bodyの方でredと指定しているので、ボーダーラインはこのような表示になることがわかります。
最後に、Twitter Bootstrapというものを使ってみましょう。
Twitter Bootstrapから以下のページに飛んでください。
このページにあるDownload Bootstrapと書かれているボタンをクリックし、zipファイルをダウンロードしてください。
ダウンロードが完了したら、zipファイルを解凍し、解凍されたbootstrapという名前のフォルダをindex.htmlと同じ場所に移動してください。
Twitter Bootstrapとは、自分のウェブサイトを簡単にかっこよくするためのキットのようなものです。
これを用いることによって、先ほどのページの下の方で紹介されているページを、比較的簡単に作ることができるようになります。
では実際にTwitter Bootstrapを導入してみましょう。
いままで作ってきたindex.htmlファイルを開いて、以下のように編集してみましょう。
<html>
<head>
<title>This is the title</title>
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css" type="text/css">
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>headタグの中の、<link rel="stylesheet" href="main.css" type="text/css">の箇所が<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">に変わっているのがわかります。
これは、このページにアクセスする際に、bootstrap.min.cssというCSSファイルにアクセスし、これを使うという処理が書かれています。これでTwitter Bootstrapが使えるようになりました。
では実際にインストールしたTwitter Bootstrapを使ってみましょう。
今回は例としてドロップダウンボタンを追加してみましょう。下の画面が完成品となります。
まずドロップダウンボタンというものを追加してみましょう。Twitter Bootstrapのサイトの上のほうにあるメニューバーからComponentsをクリックしてコンポーネントを紹介しているページに飛んでください。
次に左側にナビバーメニューがあると思うので、Button dropdownsというところをクリックして、ドロップダウンボタンを紹介している箇所に飛んでください。以下のようなページが見られると思います。
このページでは、どのようなものが実際に実装できるのか、そしてその下にはどのように記述すれば実装できるのかというのが書かれています。
では実際にそのページに書かれているように、今まで作ってきたindex.htmlファイルのbodyの中に書いてみましょう。<h1>Hello</h1>の下に書いていくと以下のページのようになると思います。
今のままではボタンをクリックしても、なんの変化も起こらないと思います。次はボタンをクリックした時に、ドロップダウンメニューが現れるという動きを実装してみましょう。
ドロップダウンを実装するには、まずTwitter Bootstrapが提供しているjavascriptを使う必要があります。
これを今扱っているindex.htmlファイルで読み込むように設定するには、以下のように変更する必要があります。
<html>
<head>
<title>This is the title</title>
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
</head>
<body>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="./bootstrap/js/bootstrap.min.js"></script>
<h1>Hello World!</h1>
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Action
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<!-- dropdown menu links -->
</ul>
</div>
</body>
</html>bodyに入ってすぐに以下の2行を追加しました。
<script src="http://code.jquery.com/jquery.js"></script>
<script src="./bootstrap/js/bootstrap.min.js"></script>
この２つを追加することによって、ドロップダウンボタンをクリックすると、メニューが展開する、という動きができるようになります。
しかしこれだけではまだメニューの設定をしていないので、表示するものがありません。
では実際にメニューの設定をしてみましょう。
次に先ほどのTwitter Bootstrapのページのcomponentsにある左側のメニューからDropdownsを選択してみましょう。以下のページが見えると思います。
ここのページに従って、htmlファイルを以下のように書き換えてみましょう。
<html>
<head>
<title>This is the title</title>
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
</head>
<body>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="./bootstrap/js/bootstrap.min.js" ></script>
<h1>Hello World!</h1>
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Action
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a>Action</a></li>
<li><a>Another Action</a></li>
<li><a>Some Other Action</a></li>
<li class="divider"></li>
<li><a>Separated</a></li>
</ul>
</div>
</body>
</html>
<!-- dropdown menu links -->のところに
<li><a>Action</a></li>
<li><a>Another Action</a></li>
<li><a>Some Other Action</a></li>
<li class="divider"></li>
<li><a>Separated</a></li>
が追加されているのがわかると思います。
<li>タグはリストを表すタグで、<a>はアンカータグといって、挟んでいるものがリンクであることを表すタグです。
これを追加したあとにhtmlファイルをブラウザで
open index.html
と打ち込んで、ブラウザでhtmlファイルを見てみましょう。
ボタンをクリックすると、ドロップダウンでメニューが表示されていると思います。
次はドロップダウンのボタンの色を変化させてみましょう。
Twitter Bootstrapの上のメニューのBase CSSをクリックし、飛んだページの左メニューからButtonsをクリックして以下のページに飛びましょう。
ここのページでは、様々な色のボタンの実装の方法を紹介しています。
このページによると、btnクラスが適用された箇所に追加すれば実装できるように書いてあることがわかります。
btnクラスが適用された箇所とは、これまで書いてきたhtmlファイルのなかの
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
という箇所です。
<a>に対してclass="btn dropdown-toggle"と書くことによって、btnクラスとdropdown-toggleクラスが適用されていることを示しています。もしボタンの色を青色に変更したい場合は、btn-primaryというものをclassの箇所に追加し、下のようにすることで、
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
青色のボタンを実装することができます。
新しいボタンを更に追加して、ボタンのスタイルをそれぞれ変更してみましょう。
以上で終了です。おつかれさまでした！