記事一覧 – オタク向けサイト作成講座

2017年10月9日

CSSを書く①箱の位置を決める

HTMLを書く（前編）では、「ひとまとまりの箱を作る」のを最初に決めておきました。
これは単純に、整理整頓しやすいように分類した、ということです。

この箱を置く場所を決める前に、まずは全体の指定をしておきます。

body {
color: #222; /*基本の文字色を指定します。*/
font-size: 16px; /*文字のサイズを指定します。*/
}

body {

color: #222; /*基本の文字色を指定します。*/

font-size: 16px; /*文字のサイズを指定します。*/

}

まずはIDのついた箱について設定を決めていきましょう。

#header

#header {
background: #ccc; /*背景色を指定します。*/
margin-bottom: 20px; /*箱の下に余白を付けます。*/
}

#header {

background: #ccc; /*背景色を指定します。*/

margin-bottom: 20px; /*箱の下に余白を付けます。*/

}

#headerそのものは幅が全体に及んでいるので、今のところ特に指定はありません。
分かりやすいようにグレーだけ敷いておきます。

marginは箱の外側に付く余白のことです。
指定の仕方は4種類×2です。

.margin {
margin: 0; /*箱の4辺に同じ数値を適用*/
margin: 0 10px; /*上下・左右に同じ数値を適用*/
margin: 0 10px 0; /*上・左右・下で数値を適用*/
margin: 0 10px 0 10px; /*上・右・下・左の順に数値を適用*/
margin-top: 0; /*箱の上にだけ適用*/
margin-right: 0; /*箱の右にだけ適用*/
margin-bottom: 0; /*箱の下にだけ適用*/
margin-left: 0; /*箱の左にだけ適用*/
}

.margin {

margin: 0; /*箱の4辺に同じ数値を適用*/

margin: 0 10px; /*上下・左右に同じ数値を適用*/

margin: 0 10px 0; /*上・左右・下で数値を適用*/

margin: 0 10px 0 10px; /*上・右・下・左の順に数値を適用*/

margin-top: 0; /*箱の上にだけ適用*/

margin-right: 0; /*箱の右にだけ適用*/

margin-bottom: 0; /*箱の下にだけ適用*/

margin-left: 0; /*箱の左にだけ適用*/

}

入れる数値は
絶対指定…px
相対指定…em（文字の大きさ）、%（箱の大きさ）
などがあります。
autoは自動計算で、空気を読んで中央に寄せてくれます。

そのなかのロゴ画像が入ってるところだけは、どれだけ幅が全体に及んでも980pxで真ん中に置きたいので、指定を追加します。

#header .inner {
width: 980px; /*幅を指定します。*/
margin: 0 auto; /*箱の位置を指定します。*/
}

#header .inner {

width: 980px; /*幅を指定します。*/

margin: 0 auto; /*箱の位置を指定します。*/

}

#wrap

#wrap {
border: 2px solid #000; /*枠線を指定します。*/
}

#wrap {

border: 2px solid #000; /*枠線を指定します。*/

}

中身の全体は分かりやすいよう黒い枠線を付けておきます。
線の太さ・タイプ・色の順にまとめて指定しています。
個別に設定もできますが、今回は目安であとで消すのでこのままで。

#mvArea {
width: 980px;
margin: 0 auto;
}

#mvArea {

width: 980px;

margin: 0 auto;

}

メイン画像も同じ幅の指定です。
同様に中央寄せにしておきます。

#gnavArea {
width: 980px;
margin: 0 auto 20px;
background: #ccc;
}

#gnavArea {

width: 980px;

margin: 0 auto 20px;

background: #ccc;

}

ナビも幅は同様です。
分かりやすいように背景色を付けました。

#contentsArea {
width: 980px;
margin: 0 auto;
background: #000;
}
#mainArea {
width: 650px;
float: left; /*左側に浮かせる*/
background: #ccc;
}
#sideArea {
width: 300px;
float: right; /*右側に浮かせる*/
color: #fff;
background: #fff;
}

#contentsArea {

width: 980px;

margin: 0 auto;

background: #000;

}

#mainArea {

width: 650px;

float: left; /*左側に浮かせる*/

background: #ccc;

}

#sideArea {

width: 300px;

float: right; /*右側に浮かせる*/

color: #fff;

background: #fff;

}

コンテンツ内も同様です。
#mainAreaは左、#sideAreaは右側に置きたいので、今回はfloatで浮かせます。

floatはおそらく最初に引っかかるポイントです。
場所を指定するイメージが強いですが、実際のところはふわふわ浮いている状態です。
この状態ではブラウザに高さがあると認識してくれません。
高さがゼロになってしまうので、そのままだとレイアウトは崩れてしまいます。

そのため、繋ぎとめて上げる必要があります。
その方法はclearで指定できます。
それぞれで指定する方法もあるのですが、それも面倒なのでクラスを一つ作ってしまいます。
その方法で最も有名なのがclearfixです。

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

/* clearfix */

.clearfix:before,

.clearfix:after {

content:"";

display: table;

}

.clearfix:after {

clear: both;

}

.clearfix: {

*zoom: 1;

}

/* clearfix end */

上記の方法は、箱内に重石を作り、そこに浮かせた要素を固定する方法です。
これには色々なやり方があるので、調べてみると良いと思います。

floatはめんどくさいですが、これを覚えてしまうとあらゆるレイアウトの5割は再現できます。

#footer

#footer {
	width: 100%;
	background: #ccc;
}
#footer .copy {
	padding: 10px; /*箱内の余白を指定します。*/
	text-align: center; /*要素を中央寄せにします。*/
}

#footer {

width: 100%;

background: #ccc;

}

#footer .copy {

padding: 10px; /*箱内の余白を指定します。*/

text-align: center; /*要素を中央寄せにします。*/

}

#footerも指定しておきます。
paddingは箱内に作る余白なので、背景色を敷いた場合にも適用されます。
指定の種類はmarginと同じです。

.padding {
padding: 0; /*箱の4辺に同じ数値を適用*/
padding: 10px; /*上下・左右に同じ数値を適用*/
padding: 10px 0; /*上・左右・下で数値を適用*/
padding: 10px 0 10px; /*上・右・下・左の順に数値を適用*/
padding: 0; /*箱の上にだけ適用*/
padding: 0; /*箱の右にだけ適用*/
paddingm: 0; /*箱の下にだけ適用*/
padding: 0; /*箱の左にだけ適用*/
}

.padding {

padding: 0; /*箱の4辺に同じ数値を適用*/

padding: 10px; /*上下・左右に同じ数値を適用*/

padding: 10px 0; /*上・左右・下で数値を適用*/

padding: 10px 0 10px; /*上・右・下・左の順に数値を適用*/

padding: 0; /*箱の上にだけ適用*/

padding: 0; /*箱の右にだけ適用*/

paddingm: 0; /*箱の下にだけ適用*/

padding: 0; /*箱の左にだけ適用*/

}

これで箱の位置を決めることが出来ました。
実際に作ったものを見てみましょう。
→CSSの箱のサンプル

ちなみに指定する順番は、自分でルールを作っておくと良いと思います。
（とっちらかると意外と後から探すのが面倒）
オススメは
大きさに関すること→位置関係→文字関係→その他、装飾など
です。
次回はもっと細かくデザインを適応させていきます。

＜フロートの使い所＞

フロートはよく使われ、とても便利な要素です。
ただ、clearfixを使って無理やり押し込んでる状態なのでとっつきにくいし、そもそも完璧に正しいわけではありません。
しかし現状もっとも手軽に、かつ昔のブラウザでもデザインの再現が可能なやり方です。
全てにこれを使ってしまうとこんがらがってしまうので、フロートを使わなくてもいいところでは極力他の方法も探してみましょう。

2017年3月11日2017年3月11日

CSSとは

CSSが何の略か、は今回も置いておきます。
HTMLは要素の配置ですが、更にデザインを再現させるのがCSSの役割です。

紙に限らず、WEBでもデザイン優先です。
もちろん状況によってできないことはあります。ECサイトなどは特に制限が大きいです。
でもせっかく趣味のサイトなんだから、入れたいことを盛り込みましょう。
仕事じゃないんだから、作ってて楽しいのが一番。
やりたいデザインを実現するためには、CSSを理解するのが大事です。

基本の書き方

header {width:960px}

1	header {width:960px}

反映させたい箇所（セレクタ）　{要素（プロパティ）:その内容（値）}
です。
基本はたったこれだけ。

書く場所は3通りです。

1.専用ファイルを作成して、htmlを読み込ませる。

<link rel="stylesheet" type="text/css" href="css/style.css">

1	<link rel="stylesheet" type="text/css" href="css/style.css">

どのページにも適用させたい、別にまとめたいものはこのやり方です。
ヘッダーやフッター、基本のレイアウトなど。
複数読み込ませることも出来ます。
その場合、上から順次適用されていきます。

@charset "UTF-8";

1	@charset "UTF-8";

外部ファイルを使用するときは、htmlと同様に1行目に文字コードの宣言を入れておきます。

2.htmlと同じページのhead内に書き込む。

<style type="text/css">
	header {width:960px}
</style>

header {width:960px}

</style>

そのページ内での独自のCSSのときに使用します。
1.よりも優先順位が高くなります。

3.適用させたい箇所に直接書く。

<header style="width:960px;">

1	<header style="width:960px;">

特定の箇所のみ適用させたい時に使用します。
1.2.よりも優先順位が高くなります。

優先順位が高くなるほど汎用性は低くなります。

CSSをリセットする

実際にCSSを書く前に、サンプルをよく見てみましょう。
→トップのサンプル

微妙に隙間があったり、色が指定されています。
これはブラウザが「見やすいように」気を利かせてくれているからです。
ですが、自分で設定する場合はこれが邪魔をしてきます。

そのために、現在ブラウザで指定されているスタイルを全てリセットしてしまいます。

@charset "UTF-8";
body,header,footer,section,div,p,a,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,table,tr,th,td,figure,img{
	margin:0;
	padding:0;
	border:0;
	vertical-align: bottom;
}
body {
	font-size: 16px;
	line-height: 1;
}
ol,ul {
	list-style: none;
}

@charset "UTF-8";

body,header,footer,section,div,p,a,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,table,tr,th,td,figure,img{

margin:0;

padding:0;

border:0;

vertical-align: bottom;

}

body {

font-size: 16px;

line-height: 1;

}

ol,ul {

list-style: none;

}

本当はもっとあったほうが良いのですが、いったんこれだけで。

リセットCSSは色々作ってくれている人がいるので、そちらを借りることも出来ます。
reset css　とかで検索すると色々出てきます。
慣れてきたら自分でカスタマイズしましょう。

→リセットCSSを適用させたサンプル

きっちり詰め詰めになりました。
次回はデザインに合わせてCSSを書いていきます。

＜!importantを使うとき＞

CSSでどうしても優先させて使いたいのに、他のスタイルが適用されてしまい、でもそのCSSは触りたくない、という時があります。
そんなときは!importantを使います。

header {width:960px !important}

1	header {width:960px !important}

ただ、基本的には使わないほうが無難です。
色んな所で使った挙句、何が原因かわからない…ということになるからです。

2017年1月21日2017年1月28日

HTMLを書く（後編）

3.要素を入れる

では実際に要素を入れていきますが、
スマホ版の時に増えるもの・消えるものが有ります。

これはCSSで調整するので、一旦は全て入れておきます。

必要なら画像も用意しておきます。
今回は全部ダミーです。
他のページとも共通になる部分から先に作ります。

■ヘッダー
<head>とは別に、表示上の基本情報を入れます。
だいたいロゴとか、最初に目にしてほしいものです。

<div id="header">
<div class="inner">
	<h1><img src="images/logo.png" width="150" height="90" alt="logo"></h1>
	<p class="menuBtn">MENU</p>
</div>
</div>

</div>

画像（imgタグ）はh1で囲みました。
見出しタグといい、h1～h6まであります。名前のとおり、見出しに使います。
なおルール上、h1はそのページの主題につけるため、一度しか使えません。
テキストを<p>で囲っていますが、これは場所をコントロールするための準備です。
念のためclassも付けておきます。
こうしておくと後から要素を増やした時に調整が効きやすくなります。

※divを忘れてたので足しました

■フッター
一番最後に表示したい情報を入れます。
企業サイトだとここにカテゴリ一覧載せてることが多いです。
特に無いのでそれっぽくコピーライトでも入れておきましょう。

<div id="footer">
	<p class="copy">&copy;copyright</p>
</div>

<p class="copy">©copyright</p>

</div>

©は実体参照という書き方です。
見る環境、主に機械そのものに影響されて表示できなくなる文字が有ります。
これを「機種依存文字」と呼び、表示を揃えるために実体参照に変換して記述します。

ここまで記述したら、一旦そのファイルをコピーして取っておきましょう。
他のページを作るのに使います。

■TOPの中身を作る

メイン画像を入れます。

<div id="mvArea">
	<p><img src="image/mvImage.jpg" width="980" height="400" alt="main"></p>
</div>

</div>

一旦ここも<p>で画像を囲っておきます。

ナビを入れます。

<div id="gnavArea">
	<ul>
		<li><a href="#">カテゴリ1</a></li>
		<li><a href="#">カテゴリ2</a></li>
		<li><a href="#">ブックマーク</a></li>
		<li><a href="#">フォーム</a></li>
	</ul>
</div>

<ul>

<li><a href="#">ブックマーク</a></li>

</ul>

</div>

並列情報はリストタグで配置します。
別に<p>でも良いのですが、グループを作っておくことで分かりやすくなります。
aはリンク用のタグです。WEBでいちばん重要なタグです。

メインを入れます。

<div id="mainArea">
	<ul class="news">
		<li><a href="#">
				<dl>
					<dt><img src="images/news_img01.jpg" alt="20XX.XX.XX" width="200" height="100"></dt>
					<dd>
						<span class="date">20XX.XX.XX</span>
						<span class="text">dummy</span>
					</dd>
				</dl>
			</a>
		</li>
	</ul>
</div>

<dl>

<dd>

<span class="text">dummy</span>

</dd>

</dl>

</a>

</li>

</ul>

</div>

長くなるので一つしか入れていませんが、構成書では最高6つなので、入れておきましょう。
これも並列情報なので大枠はリストにしておきます。
更新情報から直接リンクしたいので、aで囲みます。
その中にもう一つあるdlは「定義リスト」のタグです。
dt　で定義した要素を、
dd　で補完あるいは説明する
という特殊な役割です。
spanはdivと同じように囲むタグですが、箱と言うよりは布のように柔軟な包み方が出来るタグです。

サイド…は構成書ではツイッターのウィジェットなので、今回は置いておきます。

上に戻るボタンを入れます。

<p class="goTop"><a href="#header">↑</a></p>

1	<p class="goTop"><a href="#header">↑</a></p>

構成上無くても平気な方は不要です。
指定しているリンクは、飛ばしたいエリアのIDと同じものを入れます。
#を最初に必ず必要です。これはclassではできません。
昔は<a name=”top”></a>などと指定しなければいけなかったページ内リンクですが、今は不要です。

これでTOPのHTMLは完成です。

さっき作っておいたコピーを使って、他のページも作っておきます。

<div id="contentsArea">
	<div id="sideArea">
		<dl>
			<dt>見出し</dt>
			<dd>
				<ul>
					<li><a href="">サブメニュー1</a></li>
					<li><a href="">サブメニュー2</a></li>
					<li><a href="">サブメニュー3</a></li>
				</ul>
			</dd>
		</dl>
	</div>
	<div id="mainArea">
		<div class="section">
			<h2>文章</h2>
			<div class="inner">
				<p>dummydummydummy.</p>	<p>dummydummydummydummydummydummydummydummydummydummydummydummy.</p>
			</div>
		</div>

		<div class="section">
			<h2>画像一覧</h2>
			<div class="inner">
				<ul class="unker">
					<li><a href="#sub01">ジャンル1</a></li>
					<li><a href="#sub02">ジャンル2</a></li>
					<li><a href="#sub03">ジャンル3</a></li>
					<li><a href="#sub04">ジャンル4</a></li>
					<li><a href="#sub05">ジャンル5</a></li>
				</ul>
			</div>

			<div class="column3">
				<div class="column">
					<p><a href="#">
						<span class="img"><img src="images/photo/thum/item01.jpg" alt="画像1" width="300" height="150"></span>
						<span class="title">タイトル</span>
						<span class="info">詳細説明<br>dummydummy</span>
					</a></p>
				</div>
				<div class="column">
					<p><a href="#">
						<span class="img"><img src="images/photo/thum/item02.jpg" alt="画像2" width="300" height="150"></span>
						<span class="title">タイトル</span>
						<span class="info">詳細説明<br>dummydummy</span>
					</a></p>
				</div>
				<div class="column">
					<p><a href="#">
						<span class="img"><img src="images/photo/thum/item03.jpg" alt="画像3" width="300" height="150"></span>
						<span class="title">タイトル</span>
						<span class="info">詳細説明<br>dummydummy</span>
					</a></p>
				</div>
				<div class="column">
					<p><a href="#">
						<span class="img"><img src="images/photo/thum/item04.jpg" alt="画像4" width="300" height="150"></span>
						<span class="title">タイトル</span>
						<span class="info">詳細説明<br>dummydummy</span>
					</a></p>
				</div>
				<div class="column">
					<p><a href="#">
						<span class="img"><img src="images/photo/thum/item05.jpg" alt="画像5" width="300" height="150"></span>
						<span class="title">タイトル</span>
						<span class="info">詳細説明<br>dummydummy</span>
					</a></p>
				</div>
				<div class="column">
					<p><a href="#">
						<span class="img"><img src="images/photo/thum/item06.jpg" alt="画像6" width="300" height="150"></span>
						<span class="title">タイトル</span>
						<span class="info">詳細説明<br>dummydummy</span>
					</a></p>
				</div>
			</div>
		</div>
	</div>
</div>

<dl>

<dd>

<ul>

<li><a href="">サブメニュー1</a></li>

<li><a href="">サブメニュー2</a></li>

<li><a href="">サブメニュー3</a></li>

</ul>

</dd>

</dl>

</div>

<p>dummydummydummy.</p> <p>dummydummydummydummydummydummydummydummydummydummydummydummy.</p>

</div>

</ul>

</div>