初心者必見!WordPressで0からブログを作ってみよう!CSSの入門編

このエントリーをはてなブックマークに追加

初心者必見!WordPressで0からブログを作ってみよう!CSSの入門編

次回に引き続きブログサイトを作ってみます。前回でHTMLでマークアアップすることができました。そして今回はCSSで文字の色を変えたり、レイアウトしたりとスタイルを適用してみましょう。

Contents

こんなブログサイトを作る

一緒に作っていくブログサイトは以下のようなものになります。ほとんどこのブログと同じ感じですけど、一般的なブログを作るという意味ではいいのかなと思います。
こんなブログを作ろう

とはいえいきなり上記のようなサイトは作れないので順を追って進めていきます。まずは、CSS編の完成例として以下のところまでやってみましょう!!

CSS編で使うファイルを一式ダウンロードできます。

作れるようになるまでの流れ

実際に作っていく手順としては以下のように進めていこうかと思っています。HTML,CSSできるよってかたは3番のWordPressテーマ作成編から進めていただくといいかもしれません。

1. HTMLの入門編
2. CSSの入門編 ←いまここ
3. WordPressテーマ作成編
4. カテゴリメニュー・パンくずリスト・ページャー作成編
5. 検索できるようにしよう編
6. WordPressで問い合わせページを作ろう編
7. レスポンシブでスマートフォンにも対応させよう編
8. 作ったブログをサーバーにアップしてみよう編

上記以外にも、CSSの管理をしやすいようにSassやGulpを使ってみたり、WordPressのショートコードを作ってみたり、Javascriptでフォームのバリデーションも、その他応用編として記事にしてみようかなと思っています。

CSSとは

CSSとは「カスケーティング・スタイル・シート」といいます。HTMLは文書構造を表すものでしたね。CSSはその文書構造に対して装飾をしていく役割になります。例えば、文字の色や大きさを変更したり、レイアウトをしたりします。

CSSで装飾をすることで僕らがよく見ているWEBサイトのような見栄えになります。

HTMLにCSSを適用する方法

HTMLにCSSのスタイルを適用する方法はインライン、head内に記述、外部ファイル化と3種類あります。が、基本的には外部ファイル化を使うようにしたほうがいいでしょう。

インラインでCSS

これはHTMLのタグのなかにstyle属性を使ってスタイルを適用します

<p style="color:#f00;">文字が赤くなる</p>

というように記述します。しかし、この方法はあまりおすすめしません。

head内にCSS

これはHTMLのhead内にstyleタグを使って記述します

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>サンプル</title>
	<style>
		p{
			color:#f00;
		}
	</style>
</head>
<body>
	<p>文字が赤くなる</p>
</body>
</html>

これでPタグの文字が赤くなります。これもインラインの方法と同様であまりおすすめしません。

外部ファイル化

これはCSSを別のファイルで作り、HTMLのほうでそのCSSファイルを呼び出すという方法です。一般的にこの方法が業界のルールというかスタンダード的なやり方です。

テキストエディタでcssフォルダの中にstyle.cssという名前で保存しましょう。おっとcssフォルダはまだ作っていなかったですね。なので、studyフォルダの中に「css」フォルダを作成してください。

さらに、そのなかに「style.css」を保存しましょう。

フォルダ構成の画像

次に、style.cssをindex.html側で呼び出します。

head内のtitleの下に記述をします。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>タイトル</title>
	<link rel="stylesheet" href="css/style.css">
</head>

というように記述しましょう。またパスがでてきましたね。もしこのパスがわからない場合はこちらを確認してくださいね。

これでHTML側からCSSを呼び出すことができました。試しにCSSがちゃんと呼び出せているか確認してみましょう。

style.css

p{
	color:#f00;
}

これで保存をしていただいて、index.htmlをブラウザで確認すると・・・

どうですか?pタグの部分だけ文字が赤くなりましたね。

インラインとhead内記述をあまりおすすめしない理由

先ほど、インラインとhead内記述はおすすめしないと書きましたね。これにはちゃんと理由があります。

というのも、CSSのメリットというのがHTMLと分離することができる点なんです。もっと突っ込んだ言い方をすると文書構造と見た目を完全に分離したいんですね。理由は2点あります。

一つ目は、分離することで管理がしやすくなります。ファイルが分かれているので、見た目変えたいときはCSS、文書構造変更するときはHTMLといった具合にできますよね。これが、インラインで書かれていると、見た目を変えたいときもHTMLのタグを修正しなければいけませんし、ソースコードも見辛くなります。

二つ目は、HTMLに文書構造のみを書きましょうというルールがあるんですね。これがCSSが生まれた理由でもあります。そうすることで検索エンジンにひっかかりやすくなるというメリットもあります。

CSSを書いてみよう

次にCSSの書き方を見ていきましょう。基本的には「どこの」「何を」「どんな風に」変更するとひたすら書きます。家に例えるとリビングのカテーンの色を赤にするといった感じです。コード的に書くと・・・

リビングのカーテン{
	色:赤;
}

といったようになりますね。専門的な書き方をすると

セレクタ{
	プロパティ:値;
}

となります。そしてこのセレクタの部分が重要になります。そう、「どこを」の部分ですね。セレクタにはいろんな種類があります。それらを駆使して「どこを」と指定します。いくつかセレクタをご紹介しますね。

全称セレクタ

これは文字どおり全てのタグに対してスタイルを適用できます。

*{
	color:#f00;
}

これで、全てのタグが文字の色が赤になります。ですが、最近ではこのセレクタはあまり使われないですね。なぜかというと、読み込みに時間がかかってしまうんです。

タイプセレクタ

これはpタグなど、タグごとにスタイルを適用することができます。

p{
	color:#f00;
}

これでそのページ内の全てのpタグの文字の色が赤になります。

クラスセレクタ

これは部分的にスタイルを指定できます。というのも、上記のタイプセレクタで全てのpタグに対して文字の色を赤にしました。でも、一部のpタグは文字の色を青にしたいなどという場合に使えます。

css側にクラスという任意の名前のスタイルを作り、html側のタグ内にそのクラスを適用するという流れになります。

.sample{
	color:#00f;
}
<p>ここの文字の色は変わらない</p>
<p class="sample">ここの文字の色が青になるよ</p>
<p class="sample">ここの文字の色が青になるよ</p>

これで、sampleとクラスをつけられた部分は文字の色が青になるというわけですね。さらに、ページ内に同じクラスが何個あっても問題ありません。

そして、基本的にこのクラスを多用してページ全体のスタイルを適用したりレイアウトしたりします。なので、一番使用頻度が多いセレクタです。

idセレクタ

idセレクタは使い方としてはクラスセレクタと同じような使い方になります。これも任意で名前をつかられます。が、違いはクラスセレクタはページ内に何個でも使って良いのですが、同じ名前のidセレクタはページ内に一個しか使えません。

#id_sample{
	color:#00f;
}
<p>ここの文字の色は変わらない</p>
<p id="id_sample">ここの文字の色が青になるよ</p>

セレクタはまだまだもっとあります。古いブラウザでは対応していないものがありますが、便利なセレクタがたくさんあります。以下の記事を参考にしてみるといいと思います。

参考
セレクタの種類-CSSの基本
CSS3のセレクタ全42種 まとめておさらい使い方リファレンス | EXP – クリエイティブな事をはじめた(い)全ての人達へ

セレクタの詳細度について

基本的にCSSは上から順番にスタイルが適用され、後に書いたものほど優先されます。つまりこういうことです。

p{
	color:#f00;
}
p{
	color:#00f;
}

こうするとpタグは最後に書かれたものが優先されるので文字の色は青になるんですね。次にこの場合はどうでしょう?

.sample{
	color:#f00;
}
p{
	color:#00f;
}
<p class="sample">文字の色は赤</p>

この場合は文字の色は赤になります。というのも、CSSには詳細度というセレクタにおける優先順位があるんですね。

全称セレクタ > タイプセレクタ > クラスセレクタ > idセレクタ

と右に行くほど優先度が強くなります。この優先度をうまく使うことでCSSで効率よくスタイルを適用することができます。例えば

p{
	color:#f00;
	font-size:14px;
}
.sample{
	color:#00f;
}
<p>文字の色は赤、文字サイズ14px</p>
<p class="sample">文字の色は青、文字サイズ14px</p>

こうすることでpタグ全体は文字の色が赤で文字サイズは14pxのスタイルが適用できます。さらにクラスsampleをつけることでその部分だけ文字の色が青に上書きされます。が、文字サイズはそのまま14pxのままにできます。

こうすることで文字のサイズを変更するスタイルを何度も書かなくていいですね。

とはいえ、この詳細度を理解しておかないと思わぬ落とし穴で、スタイルを変えたのにスタイルが適用されないなどの問題が起こることもあります。その場合は、詳細度が低くて上書きができていない状態が考えられます。

詳細度
詳細度 – CSS | MDN
エンジニアはもう一度CSSとちゃんと向き合ってみよう – 詳細度編 – Qiita
CSSの詳細度を雑に上書きする – sys9kdr’s diary

ブラウザのCSSをリセットしよう

ここから実際に前回作ったindex.htmlに対してcssを適用します。ということでまずはreset.cssをつかいます。これは、ブラウザにはもともとブラウザ固有のcssが適用されています。全てのブラウザが同じcssを使っているのであれば問題ないのですが、ブラウザによって使われているcssが違うので、微妙に見た目が違います。

そうするとどういうことがおきるかというと、ブラウザcssをリセットせずにスタイルを適用すると例えばchromeとIEでここの要素の下の感覚が微妙に違うとか、見た目が同じに統一できないことが考えられますね。なので、スタイルを適用する前にブラウザCSSをリセットします。

reset.cssをダウンロード

reset.cssはいろんなものがたくさんインターネットに公開されています。その中でも有名なものを今回はダウンロードしてつかいましょう。

ダウンロード: Downloads – html5resetcss – A reset stylesheet including HTML5 elements – Google Project Hosting

こちらから最新版をダウンロードしてください。次に、reset.cssとリネームしてcssフォルダに保存をしてください。そこまで、できたらindex.htmlに記述しましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>タイトル</title>
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/style.css">
</head>

このようにstyle.cssよりも上にreset.cssが読み込まれるようにしてください。これで、文字の下にあった変な間隔や文字のサイズのばらつきがなくなったのではないでしょうか。

共通で使うスタイルを定義しよう

いよいよstyle.cssにスタイルを書いていきましょう。まずは、共通設定と言われるスタイルです。例えば、サイト全体で基準となる文字のサイズや色、リンクの色などを変更します。

おそらくはじめにpタグのスタイルがあるので削除してから作業をはじめてくださいね。

body {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
  font-size: 10px;
  line-height: 1.6;
  color: #515151;
  background: #fff;
  height: 100%;
}

img {
  vertical-align: bottom;
}

a img:hover {
  opacity: 0.7;
  filter: alpha(opacity=70);
}

a:link {
  color: #0bd;
  text-decoration: none;
}

a:visited {
  color: #0bd;
  text-decoration: none;
}

a:active {
  color: #0bd;
  text-decoration: none;
}

a:hover {
  color: #0bd;
  text-decoration: underline;
}

li {
  list-style: none;
}

文字化けしないように文字コードの指定

@charset "utf-8";

書体を指定しています

font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;

文字の行間(今回は文字の大きさの1.6倍)

line-height: 1.6;

背景色を白に今回は別に変化なし

background: #fff;

画像の縦揃えを下にする

vertical-align: bottom;

こうすることで、通常画像の下に変な余白が出てしまったりするのをなくすことができます。

リンクの中の画像だけマウスが乗ったら画像は少し薄くなる

a img:hover {
  opacity: 0.7;// 画像を薄くする
  filter: alpha(opacity=70);// IE用
}

:hoverというの擬似クラスというセレクタで、要素にマウスが乗ったときのスタイルになります。opacityを使って画像を薄くしています。filterはIE用のopacityです。

リンクの初期スタイル

a:link {

}

訪問済みのリンクスタイル

a:visited {

}

クリックしたときのリンクスタイル

a:active {
  
}

マウスが乗ったときのリンクスタイル

a:hover {
  
}

:link、:visited、:active、:hoverは擬似クラスと言って主にaタグに対して使用します。しかも、cssを書くときはこの順番に書く必要があります。

文字の装飾、下線

text-decoration: none;
text-decoration: underline;

CSSのコメントアウトについて

CSSのコメントアウトは以下のようにできます。コメントアウトでうまく見出しのようにしてCSSファイルが見やすく管理しやすいように心がけましょう。


// 一行だけ

/*
この中身がコメントアウトになる、複数行
*/

CSSでレイアウトをしよう メインコンテンツ・サイドコンテンツ

<div class="main-content">
	<section>
		<ul>
			<li>
				<a href="#">
					<p>HTML</p>
					<div>
						<img src="images/img_blog_sample_01.png" alt="スマホサイトってリキッドレイアウトと固定幅どっちで作った方がいいの?" width="390" height="240">
					</div>
					<h2>スマホサイトってリキッドレイアウトと固定幅どっちで作った方がいいの?</h2>
					<p>
						スマートフォンサイトの制作時に、リキッドレイアウトと固定幅の2パターンがあります。正直どちらも見た目上がそんなに違いはありませんが、どっちで制作するの...
					</p>
					<p>2015/07/08</p>
				</a>
			</li>
			
			・・・省略

	</section>
	<nav>
		<ul>
			<li>1</li>
			<li><a href="#">2</a></li>
			<li><a href="#">3</a></li>
		</ul>
	</nav>
</div>

<div class="side-content">
	<aside>
		<!-- 検索フォームがここに入ります -->
		<div>
			<h2>
				Follow us
			</h2>
			
		・・・省略

	</aside>
</div>

上記のように該当箇所のdivタグに対してクラスを指定します。「main-content」と「side-content」の部分ですね。

style.css

/*---------------------------------------------------

メインコンテンツ

---------------------------------------------------*/
.main-content{
  width:820px;
  float:left;
  
  border:1px solid #f00;// これは枠線、後で消します
}

/*---------------------------------------------------

サイドコンテンツ

---------------------------------------------------*/
.side-content{
  width: 300px;
  float:right;
  
  border:1px solid #f00;// これは枠線、後で消します。
}

ブラウザで確認をするとレイアウトが崩れてしまっていますね。じつは、「float」というプロパティを使うとレイアウトが崩れるんですね。とはいえ、横並びのレイアウトをするときには必須の技術です。

このままだとレイアウトが崩れた状態なので、修正します

floatについて

これは要素を横並びにするときに使うプロパティです。慣れないと難しいのでちょっと練習をしましょう。

同じdivタグの中にfloatで左に配置するもの、右側に配置するものがあったとします。

<div class="wrap">
	<div class="float-left">
		左側
	</div>
	</div class="float-right">
		右側
	</div>
	<div class="float-clear">
		float解除
	</div>
</div>
.wrap{
	width:800px;
}
.float-left{
	width:300px;
	height:300px;
	float:left;
	border:solid #f00 1px;
}
.float-right{
	width:300px;
	height:300px;
	float:right;
	border:solid #f00 1px;
}

このようにするとレイアウトが崩れていますね。じつは、floatを使った場合はfloatの解除というのをしなければいけません。

floatの解除方法その1

floatした要素の次の要素でclearプロパティを使う。
次の要素、今回のサンプルの場合だとクラス「float-clear」のdivタグですね。

cssに追記

.float-clear{
	clear:both;

	width:800px;
	height:100px;
	border:solid #f00 1px;
}

ただ、floatする要素もclearする要素も同じ要素内にないとダメなんです。今回の場合ならfloatするものも解除するものも「wrap」内にあるからできるんすね。では同じ要素内にclearする要素がない場合はどうしたらいいのでしょうか?

floatの解除方法その2

floatとした要素を囲う要素でoverflowする。

clearを使えないケース

<div class="wrap">
	<div class="float-left">
		左側
	</div>
	<div class="float-right">
		右側
	</div>
</div>
<div>
	float解除できない要素
</div>

こうゆう場合はclearする要素がないですよね。そういう場合は、囲っている要素、今回なら「wrap」ですね。「wrap」にoverflowプロパティをつかいます。

.wrap{
	width:800px;
	overflow:hidden;
}

これはfloat解除のテクニックの一つです。おまじないというように覚えておくといいと思います。
ただ、デメリットもあってcssのテクニックにボックスの周りに浮き出ているように影をつけることができるのですが、「overflow:hidden;」を使用すると影がうまく表示されないケースがあるんですね。

floatの解除方法その3

clearfixを使う。

これは、floatを解除するテクニックです。overflowを使うときと同じように囲っている要素に対してCSSを記述します。が、実際WEBサイト作るときって至る所でfloat使うことが想定されます。なので、float解除用のクラスを作っておくと便利です。

.clearfix {
  *zoom: 1;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

これでクラスを作ることができたので、htmlにクラスを追加しましょう。

<div class="wrap clearfix">
	<div class="float-left">
		左側
	</div>
	<div class="float-right">
		右側
	</div>
</div>
<div>

これで解除できましたね。今回の3つのやり方は覚えておいてくださいね。ただ、僕もよく使うのはclearfixですね。汎用的にどこにでも使えるので便利です。

では、本編にもどりますね。

wrapper作ってclearfixしよう

wrapperという全体を囲う要素を追記して、wrapperとclearfixというクラスをつけましょう。

<div class="wrapper clearfix">
	<div class="main-content">
		・・・省略
	</div>

	<div class="side-content">
		・・・省略
	</div>
</div>

先ほどメインコンテンツのcssの記述の上に

/*---------------------------------------------------

共通クラス

---------------------------------------------------*/
.clearfix {
  *zoom: 1;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

/*---------------------------------------------------

ラッパー

---------------------------------------------------*/
.wrapper{
  width:1180px;
  margin:0 auto 60px;
}

widthで1180pxというように幅を指定しています。さらにmarginという新しいプロパティがでてきましたね。

margin:0 auto 60px;

これは、簡単にいうと要素の周りに間隔をつけます。ただ、今回のはテクニックで「auto」というので要素が画面の真ん中に配置するようにしています。「margin:0 auto 60px;」がないとじつは「wrapper」は画面の左はじにきてしまいます。それを中心に来るようにしているんですね。

と、ここまではテクニックのお話なんですが、じつはこのmarginとかwidthというのはボックスモデルといってものすごく大事な考え方というか理解しておかなければいけないことなんです。

ボックスモデルとは

ボックスモデルとは、ブロックレベル要素の領域のことをいいます。ボックスモデルは、「width(幅)」「height(高さ)」「padding(余白)」「border(枠線)」「margin(間隔)」から成ります。

ボックスモデル

css書き方を細かく紹介しますね。

width,height

width:100px;
height:100px;

というように基本的には数値と単位で幅や高さの指定をします。px以外にも%などもあります。

padding

paddingやmarginは同じように書くことができ、上下左右で違う数値にすることができます。

padding-top:10px;
padding-right:15px;
padding-bottom:20px;
padding-left:5px;

しかし、これだと4行も書くことになってしまいますね。短く簡潔に書く方法としてショートハンドという書き方もできます。

padding:10px 15px 20px 5px;

といように、上から時計回りで「上、右、下、左」というように記述できます。他にも

padding:10px;//上下左右に10px
padding:10px 20px;//上下が10pxで左右が20px
padding:10px 20px 15px;// 上が10px 左右が20px 下に15px

というように状況に応じて書き分けることも可能です。

border

これは枠線です。画像でいうと赤い線の部分ですね。枠線は色、線の太さ、線の種類を記述します。

border:#f00 1px solid;

この場合は赤い1pxの実線にできます。
他にも上下左右で指定を変えることもできます。

border-top:;
border-right:;
border-bottom:;
border-left:;

とそれぞれ指定をすればOKです。

もっと詳しく知りたい方は
margin?padding?ボックスモデルを理解しよう!あとbox-sizingが便利だよ、って話 | アライドアーキテクツのクリエイターブログ
CSSのわからないを解決する基礎知識 ボックスモデル編 – タオルケット体操

うまくいかない場合はChromeデベロッパー・ツールで確認してみよう

これは、開発者のためのツールでChromeなど多くのブラウザソフトについている機能です。その要素に対して適用されているCSSを調べたりすることができるので、HTMLもCSSもちゃんと書いたはずなのにブラウザで見るとレイアウトが崩れてるなどの場合にChromeデベロッパー・ツールを使うといいでしょう。

使い方はWeb開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 – Build Insiderを参考にするといいと思います。

Chromeデベロッパー・ツールを使いこなせるかどうかだけで、WEBサイトを作るときの効率が格段によくなります。これを機に使い方をマスターしてくださいね。

CSSでレイアウトしてみよう ヘッダー

次にヘッダー部分のレイアウトをしてみましょう。いままで、習ったことでほぼほぼできます。頑張ってやってみましょう!!

<header class="header">
	<div class="header__inner clearfix">
		<h1 class="header__logo"><a href="index.html"><img src="images/logo.png" alt="Logo" width="110" height="50"></a></h1>
		<nav class="header__nav">
			<ul class="header__nav__menu">
				<li class="header__nav__list"><a href="#">HTML</a></li>
				<li class="header__nav__list"><a href="#">CSS</a></li>
				<li class="header__nav__list"><a href="#">Javascript</a></li>
			</ul>
		</nav>
	</div>
</header>

cssについては共通クラス・clearfix:afterの後に追記するといいでしょう。

/*---------------------------------------------------

ヘッダー

---------------------------------------------------*/
.header{
  margin-bottom:20px;
  border-bottom:1px solid #f8f8f8;
}

.header__inner{
  width: 1180px;
  margin:0 auto;
}

.header__logo{
  width:110px;
  height:50px;
  float:left;
  margin:20px 20px 20px 0;
}

.header__nav{
  width: 1050px;
  float:left;
}

.header__nav__menu{
  width:830px;
  vertical-align: middle;
}

.header__nav__list{
  display:inline-block;
}

.header__nav__list a{
  display:inline-block;
  min-width:80px;
  padding:0 10px;
  height:90px;
  text-align: center;
  line-height:90px;
  font-size:1.4em;
}
.header__nav__list a:link{
  color:#515151;
  text-decoration: none;  
}

.header__nav__list a:visited{
  color:#515151;
  text-decoration: none;  
}

.header__nav__list a:hover{
  color:#515151;
  background: #f8f8f8;
}

ちょっと解説
「.header__nav__list」で「display:inline-block;」というプロパティがありますね。これもじつはfloat同様に横並びにできます。floatと違うところは中のコンテンツの幅に合わせて幅が決まります。文字の大きさに応じてコンテンツの幅を変えたいときなどに使えるテクニックです。あとは「min-width:80px;」ですが、最低でも80pxの幅は確保するという記述になります。似たようなもので「max-width」というものもあります。これは最大で○○pxまでというものです。

CSSでレイアウトしてみよう パンくずリスト

次はパンくずリストをレイアウトしてみましょう。パンくずリストを設置しておくと現在のページがどこなのかがわかりやすくなるというメリットがあります。今回はTOPページを作っていますが、他のページが表示されている場合のデザインを作りましょう。

<nav class="breadcrumb">
		<ul class="breadcrumb__menu">
			<li class="breadcrumb__list"><a href="#">Home</a></li>
			<li class="breadcrumb__list">記事詳細</li>
		</ul>
	</nav>

今回は、記事詳細を表示していると仮定しています。

cssはヘッダーの下に追記します

/*---------------------------------------------------

パンくずリスト

---------------------------------------------------*/
.breadcrumb{
  margin-bottom:20px;
}

.breadcrumb__menu{
  width:1180px;
  margin:0 auto;
}

.breadcrumb__list{
  display:inline;
  font-size:1.2em;
}

.breadcrumb__list a:link,
.breadcrumb__list a:visited,
.breadcrumb__list a:active{
  color:#515151;
}

.breadcrumb__list:after{
  content:'>';
  margin:0 10px;
}

.breadcrumb__list:last-child:after{
  display:none;
}

ちょっと解説
「.breadcrumb__list」の「display:inline;」はブロック要素をインライン要素にするという記述です。そうすることで横並びにできます。しかし、使い方は限られます。パンくずリストのように文字だけが並ぶものの場合のみなので注意してください。あとインラインの場合は、marginとpaddingの上下をつけたり、widthやheightの指定もできません。

次に「font-size:1.2em;」は文字の大きさを指定していますが、見慣れない単位が使われていますね。これは先祖要素を辿って、一番近い文字サイズの指定のされた先祖の文字サイズを「1」としたときの倍率を表しています。今回の場合ですと、「.breadcrumb__list」を囲っている要素を辿って行って、文字サイズの指定をしているのは・・・「body」のみですね。10pxとなっているので、これを「1」とした場合の「1.2倍」なので12px相当ということになります。

「.breadcrumb__list:after{」では「:after」という新しいセレクタがでてきましたね。これは、要素の後ろに要素を追加するときなどに使えます。今回は「content:”>”;」で「>」を追加しているんですね。

「.breadcrumb__list:last-child:after」の:last-childは「.breadcrumb__list」の最後の要素という書き方になります。

他にも便利なセレクタがあるので保存版!CSS3セレクタの説明書|Webparkを参考にしてみてくださいね。

CSSでレイアウトしてみよう フッター

次にフッターをレイアウトします。

<footer class="footer">
	<nav>
		<ul class="footer__menu">
			<li class="footer__list"><a href="#">お問い合わせ</a></li>
			<li class="footer__list"><a href="#">このサイトについて</a></li>
		</ul>
	</nav>
	<p class="footer__copyright">コピーライト</p>
</footer>
/*---------------------------------------------------

フッター

---------------------------------------------------*/

.footer{
  padding:20px 0;
  background: #666;
}

.footer a:link,
.footer a:visited,
.footer a:active{
  color:#fff;
}

.footer__menu{
  text-align: center;
  margin-bottom:20px;
}

.footer__list{
  display:inline;
  margin:10px;
  font-size:1.3em;
}

.footer__copyright{
  text-align: center;
  color:#fff;
}

汎用的に使える共通パーツを作ろう

いろんなページ、いろんな場所で使いまわせるパーツを作っていきましょう。まずは、ボタンを作ってみましょう。

枠線消す

メインコンテンツとサイドコンテンツに仮でつけているCSSの枠線を消してしまいましょう。

/*---------------------------------------------------

メインコンテンツ

---------------------------------------------------*/
.main-content{
  width:820px;
  float:left;

  border:1px solid #f00;//消す
}

/*---------------------------------------------------

サイドコンテンツ

---------------------------------------------------*/
.side-content{
  width: 300px;
  float:right;

  border:1px solid #f00;//消す
}

ボタンのCSS

clearfixの記述の下に書くといいでしょう。

/* btn
--------------------------------------------------------- */
.btn{
  color:#fff;
  background:#9265cf;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  padding:16px 0;
  font-size: 1.4em;
  width:100%;
  border:none;
}

.btn:link{color:#fff; text-decoration: none;}
.btn:visited{color:#fff; text-decoration: none;}
.btn:active{color:#fff; text-decoration: none;}
.btn:hover{
  opacity: 0.7;
  filter: alpha(opacity=70);
}


/* color
--------------------------------------------------------- */
.btn--facebook{
  background:#436699;
}
.btn--twitter{
  background:#5bafe9;
}
.btn--feedly{
  background:#70CA3B;
}

このようにbtn全般のスタイルとそれぞれ微妙に違う部分(今回の場合なら色)とそれぞれ違うクラスで作るといいです。そうすることで、新しく色の違うボタンを作らなければいけない場合色のCSSだけ作ればいいですもんね。

さらに今回はbtnの下にmarginをつけたいので、こちらも追記しましょう。

/* btn-wrap
--------------------------------------------------------- */
.btn-wrap{
  margin-bottom:20px;
}
<ul>
	<li>
		<div class="btn-wrap">
			<a class="btn btn--facebook" href="https://www.facebook.com/ichimarunidesign">Facebook</a>
		</div>
	</li>
	<li>
		<div class="btn-wrap">
			<a class="btn btn--twitter" href="#">Twitter</a>
		</div>
	</li>
	<li>
		<div class="btn-wrap">
			<a class="btn btn--feedly" href="#">Feedly</a>
		</div>
	</li>
</ul>

タイトルのCSS

次はサイト全体で使いまわせるタイトルを作りましょう。

共通スタイルとサイズで分けました。btn関連の下に記述しましょう。

/* title
--------------------------------------------------------- */
.title{
  line-height: 1.2;
  margin-bottom:16px;
  font-weight:normal;
}

.title--h1{
  font-size: 3.2em;
}

.title--h2{
  font-size: 2.8em;
}

.title--h3{
  font-size: 2.2em;
}

.title--h4{
  font-size: 1.8em;
}

.title--h5{
  font-size: 1.4em;
}
<h2 class="title title--h2">
	Follow us
</h2>

同じように「新着記事」の部分もやっておきましょう。

サイドコンテンツ内の要素のまとまりをわかりやすくする

今の状態だと「Follow usのまとまり」「新着記事のまとまり」がわかりにくいですね。まとまりごとに下にmarginをつけてわかりやすくしましょう。

まとまりごとにdivタグで囲っているので、そこにクラス「side-content__item」を付与します。

<div class="side-content__item">
	<h2 class="title title--h2">
		Follow us
	</h2>
	<ul>
		<li>
			<div class="btn-wrap">
				<a class="btn btn--facebook" href="https://www.facebook.com/ichimarunidesign">Facebook</a>
			</div>
		</li>
		<li>
			<div class="btn-wrap">
				<a class="btn btn--twitter" href="#">Twitter</a>
			</div>
		</li>
		<li>
			<div class="btn-wrap">
				<a class="btn btn--feedly" href="#">Feedly</a>
			</div>
		</li>
	</ul>
</div>
<div class="side-content__item">
	<h2 class="title title--h2">
		新着記事
	</h2>
	<ul>
		<li>
			<a href="#">
				<div>
					<img src="images/thumb_blog_sample_01.png" alt="Handlebars.最近気になった記事をまとめてみました 2015/06/29〜2015/07/3" width="80" height="80">
				</div>
				<div>
					<p>2014/07/08</p>
					<h3>最近気になった記事をまとめてみました 2015/06/29〜2015/07/3</h3>
				</div>
			</a>
		</li>
		
		・・・省略

	</ul>
</div>

つぎにCSSの記述です。.side-contentの下に記述するといいでしょう

.side-content__item{
  margin-bottom:40px;
}

サイドコンテンツ内の新着記事一覧をレイアウトする

次はサイドコンテンツにある記事一覧のスタイルをしてみましょう。今回だと新着のみですが、今後例えば、人気記事だったり、関連記事を載せたいなんていう場合があります。現にイチマルニデザインもそうですね。このように拡張性を考えたCSSをあらかじめ作っておくと今後作業が楽になります。

一応、今後のこともかんがえて汎用的に作ってあります。なので、場所はtitle関連の下に書くといいでしょう。

/* side-post-lists
--------------------------------------------------------- */
.side-post-lists{}
.side-post-lists__item{
  border-bottom:1px solid #f8f8f8;
  padding:15px 0;
}

.side-post-lists__item:first-child{
  border-top:1px solid #f8f8f8;
}

.side-post-lists__item a:link,
.side-post-lists__item a:visited,
.side-post-lists__item a:active,
.side-post-lists__item a:hover{
  color:#515151;
}

.side-post-lists__item__img{
  float:left;
  margin-right:10px;
}

.side-post-lists__item__date{
  font-size:1.2em;
  color:#ccc;
}

.side-post-lists__item__title{
  font-size:1.4em;
  font-weight:normal;
  line-height: 1.2;
  color:#515151;
}

htmlの方も書き換えましょう

<div class="side-content__item">
	<h2 class="title title--h2">
		新着記事
	</h2>
	<ul class="side-post-lists">
	    <li class="side-post-lists__item">
	        <a href="#" class="clearfix">
			<div class="side-post-lists__item__img">
				<img src="images/thumb_blog_sample_01.png" alt="Handlebars.最近気になった記事をまとめてみました 2015/06/29〜2015/07/3" width="80" height="80">
			</div>
			<div>
				<p class="side-post-lists__item__date">2014/07/08</p>
				<h3 class="side-post-lists__item__title">最近気になった記事をまとめてみました 2015/06/29〜2015/07/3</h3>
			</div>
		</a>
	</li>
		
		・・・省略

	</ul>
</div>

メインコンテンツ内のレイアウトをする

最後にメインコンテンツ内のレイアウトをしましょう。

まずはパネルを作る

画像やテキストなどがある記事の一覧はpannelという名前でクラスを作りましょう

「side-post-lists」関連の下に追記します

/* pannel
--------------------------------------------------------- */
.pannel-group{
  width:864px;
  margin-left:-42px;
}
.pannel-group__item{
  margin:0 0 40px 40px;
  width:390px;
  height:390px;
  float:left;
  border:solid 1px #f8f8f8;
  position:relative;
  padding-bottom:10px;
}

.pannel-group__item a:link,
.pannel-group__item a:visited,
.pannel-group__item a:active,
.pannel-group__item a:hover{
  color:#515151;
}

.pannel-group__item__category{
  position:absolute;
  top:0;
  left:0;  
  display:inline-block;
  padding:5px 15px;
  height:20px;
  line-height: 20px;
  text-align: center;
  background: #ccc;
  color:#fff;
  font-size:1.3em;
}

.pannel-group__item__category--html{
  background: #ff921e;
}
.pannel-group__item__category--css{
  background: #0070b7;
}
.pannel-group__item__category--js{
  background: #ffd948;
}

.pannel-group__item__img{
  width:390px;
  height:240px;
  margin-bottom:10px;
}

.pannel-group__item__title{
  font-size:2.0em;
  line-height: 1.2;
  font-weight:normal;
  color:#515151;
  margin:0 10px 10px;
  height:50px;
  overflow: hidden;
}

.pannel-group__item__text{
  font-size: 1.4em;
  line-height: 1.2;
  font-weight:normal;
  color:#818181;
  margin:0 10px 5px;
  height:50px;
  overflow: hidden;
}

.pannel-group__item__date{
  font-size: 1.2em;
  line-height: 1.2;
  font-weight:normal;
  color:#818181;
  margin:0 10px;
}
<div class="main-content">
	<section>
		<ul class="pannel-group clearfix">
			<li class="pannel-group__item">
				<a href="#">
					<p class="pannel-group__item__category pannel-group__item__category--html">HTML</p>
					<div class="pannel-group__item__img">
						<img src="images/img_blog_sample_01.png" alt="スマホサイトってリキッドレイアウトと固定幅どっちで作った方がいいの?" width="390" height="240">
					</div>
					<h2 class="pannel-group__item__title">スマホサイトってリキッドレイアウトと固定幅どっちで作った方がいいの?</h2>
					<p class="pannel-group__item__text">
						スマートフォンサイトの制作時に、リキッドレイアウトと固定幅の2パターンがあります。正直どちらも見た目上がそんなに違いはありませんが、どっちで制作するの...
					</p>
					<p class="pannel-group__item__date">2015/07/08</p>
				</a>
			</li>
			
			・・・省略
</div>

ポイント解説 positionの使い方

position:absolute;
top:0;
left:0;  

というのがありますね。今回の場合だと、画像の上にある「HTML」などのカテゴリーを表すアイコンです。これは画像の左上に固定配置したいのです。その場合に使うテクニックなんです。

上記のようにすれば左上配置ができるのですが、ポイントがあります。
基準となる要素に「position:relative;」を記述しなければいけません。今回の場合だと「pannel-group__item」がそうですね。こうしておかないと画面の左上を基準になってしまいます。

詳しくはCSS : positionの「absolute」「relative」「fixed」のリファレンス | CSS Lectureを確認するといいと思います。

ポイント解説 はみ出したものを見えなくさせる

height:50px;
overflow: hidden;

2箇所上記のようなスタイルがあると思います。これは横並びの解除をしているのではなく、指定範囲をはみ出したものは強制的に見えなくさせるテクニックです。「overflow: hidden;」使い方としてむしろこちらの方がよく使います。

ポイント解説 pagerを作ろう!!

ついに最後ですね。pagerといわれる番号が付いていて次のページに遷移するのにつかうアレです。

「pannel-group」関連の下に追記します

/* pager
--------------------------------------------------------- */
.pager{
  text-align: center;
}

.pager__menu{
  display: inline-block;
}

.pager__list{
  display: inline-block;
  text-decoration: none;
  width:40px;
  height: 40px;
  line-height: 40px;
  font-size: 1.4em;
  border:solid 1px #f8f8f8;
  margin:4px;
  text-align: center;
}

.pager__list a:link,
.pager__list a:visited,
.pager__list a:active{
  color:#666;
  text-decoration: none;
  display:block;
}

.pager__list a:hover{
  background: #9265cf;
  color:#fff;
}

.pager__list--current{
  background: #9265cf;
  color:#fff;
}
<div class="main-content">
	<section>
		・・・省略
	</section>
	<nav class="pager">
		<ul class="pager__menu">
			<li class="pager__list pager__list--current">1</li>
			<li class="pager__list"><a href="#">2</a></li>
			<li class="pager__list"><a href="#">3</a></li>
		</ul>
	</nav>
</div>

「pager__list–current」として違うスタイルを作っておくことで現在のページがわかりやすくなります。とりあえず今回はスタイルだけ作っておきましょう。

おわりに

これでCSS編はおわりです。いかがでしたか?基本的な使い方はマスターできたでしょうか。ただ今の場合ですとブログのように文章を投稿したり編集したりできませんね。いわゆる静的ページというやつです。

次回はついにWordPressを使ってブログとして投稿や編集などができるようにしていきます。

イチマルニデザインブログをフォローしよう

イチマルニデザインブログではTwitterアカウントでWebに関する情報をつぶやいています。フォローすることで最新情報をすぐに受け取ることができます

いいなと思ったらシェアお願いします

このエントリーをはてなブックマークに追加

同じカテゴリーの記事

ページの先頭へ