未経験からweb制作【基礎学習とCSS】
本日はWEB業界未経験の筆者がHTMLについて触れていきます！
WEB制作会社への就職を決意してからの自己学習時間「100時間」をアウトプットしていきたいと思います。
- 【C S Sの基本知識】
- H T M Lファイルとリンクさせる
- レイアウトの詳細を記述する
- ソースコード
- 自己学習に使用した教材
【C S Sの基本知識】
見た目をデザインするC S S
H T M L文書のレイアウトや装飾など見た目を指定する為の言語でH T M Lと組み合わせて使用します。
※H T M Lと同じでバージョンがあり、現在は「CSS3」
C S Sの基本文法
C S Sの記述はセレクタ、プロパティ、値の３つで構成されている
こんな感じ→セレクタ{プロパティ:値;}
つまり → どれの{何を:どうするか;} となるようです。
{何を:どうするか;} を「スタイル宣言」と言います。
※半角スペースや改行はスタイルに影響しない為、これらを使用してコードを書くと見やすくなるそうです。(インデント)
一つのセレクタに複数のスタイル宣言をする
文字の{
色を: 赤にする;
太さを: 太字にする;
左側の余白を: 20pxにする;
}
これをコードで書くと‥。
P {
Color: red;
Font-weight: bold
maegin-left: 20px;
}
複数のセレクタに同じスタイル宣言をする
複数のセレクタに対して、同じスタイルを指定することもできる。
例えば見出し１にも適応したい場合にはpタグとh1タグの書くセレクタをカンマ（,）で区切って並べます。
P,h1 {〜〜〜〜〜〜
こんな感じですね。
なるべくまとめて指定した方がいいようです。
なぜなら、ファイルも軽くなり、管理も楽になるからです。
複数のコーダーで管理することなどを考えると「見やすいコード」を書くことも重要ですね。
特定の場所にあるセレクタだけに別の指定をする
C S Sの記述はH T M L文書内の対象となるタグ全てに対して適応される。
しかし、header要素の中にあるp要素だけは別の色にしたい。
このようにある要素の中に内包されている要素の事を親子関係に例えて、上位の要素を「親要素」その中にある要素の事を「子要素」と呼ぶ。
特定の親要素に含まれる子要素だけに指定したい場合、親とこのセレクタの間に半角スペースを挿入します。例えば「header要素の中にあるp要素だけをセレクタにする場合は以下のように入力する。
Header p {
Color:l blue;
}
これで別のセレクタに指定をしていけるわけですね。
テキストを装飾するプロパティ
文字サイズを指定する font-size
→サイズ指定には「px」「％」「em」などがあり、用途によって使い分ける。
文字の太さを指定する font-weight
→値は400を基準として、±100の数値で指定する。
数値以外でもnormal bold などで指定する場合もあります。
行と行の間隔を指定する line-height
→1.5や1.75など文字サイズの倍数を単位を付けずに記述することが一般的。(pxも可能)
行の揃えを指定する text-align
→left center right justify から指定することが出来る
文字の色を指定する color
→色の値は「red」「bule」などのカラー名で指定する場合や、rgb関数、16進数などで使用するなどいくつかある。
rgb関数 color: rgb(255.173.172)
16進数 color: #ffffff
要素の外側の余白サイズを指定する margin
Maginプロパティは隣り合う要素との距離（つまり外側の余白）を指定するコンテンツ
上下左右それぞれ個別に設定できます。
「margin:20px」→上下左右全てに適応される
「margin-top:20px」→T O Pつまり上だけに適応させることが出来る。
※bottom（下） left（左） right（右）もある。
「margin: 10px 5px 5px 10px」→ 上右下左の順で適応される。
要素の内側のサイズを指定する padding
Paddingプロパティは要素の縁から内側の余白を指定する為のもの
基本的な記述はmarginと同じ。
要素の高さと幅のサイズを指定する height/width
前者が「高さ」で後者が「幅」ですね。
高さ：ハイト
幅：ウィドゥス
と読むようですが「width」に関してはたくさん読み方があるようです。
値の単位は通常pxを使用します。
しかし、スマートフォンからのアクセスを考慮すると、レスポンシブ対応のW E Bサイトを作成していく必要があります。
その場合はwidthを％で指定し、端末のサイズに合わせて伸縮するように記述する。
C S Sを記述する場所
C S Sの記述方法は３つあります。
タグのstyle属性に直接記述する
H T M Lタグに直接記述する方法は、スタイルを指定したい要素にstyle属性を追加し、記述する方法です。
特定の要素をピンポイントで指定できるので便利ですね。
style要素内に記述する
H T M L文書のhead要素内にstyle要素を作成し、その中にC S Sを記述する方法
ページ毎に記述する必要がある為、ページ数の多いサイトでは管理しづらい欠点がありますが、手軽にC S Sを使用できます。
外部ファイルに記述する
C S Sファイルを別に用意し、link要素でH T M Lファイルから参照させる方法
W E Bデザインの現場ではこの外部ファイルとして用意するケースが最も多く取られるそうです。
なぜならば、「文書構造はH T M L」「装飾はC S S」と切り分けることによりW E B
ブラウザや検索エンジンに効率良く正確な情報を伝える事ができるからです。
また、製作者やデザイナーが効率良くページを修正、管理する事ができる。
H T M Lファイルとリンクさせる
前回までに作成したH T M LファイルにC S Sのリンクを記載していきます。
CSSを記述する
まず、C S Sの１行目には文字コードを書く
というルールがあるため「@charset "utf-8";」
utf-8で書きますと記載します。
<!DOCTYPE html>
<html>
<head>
<meta charaset="UTF-8">
<title>ののくんページ</title>
<link href="css/style.css" rel="stylesheet">
</head>
ベースになるスタイルを選択する
ページの余白を０にする
まず。Body要素のmarginとpaddingを０に指定します。
@charset "utf-8";
body {
margin: 0;
padding: 0;
}
余白サイズはW E Bブラウザの種類によって初期値が異なる事があるので、解除する為にbody要素のmargin とpadding を０に指定します。
ページの背景色を指定する
初期値は「白」ですが今回は薄いグレーにします
背景色の指定にはbackground-colorプロパティを使用し、値は16進数のカラーコード「#cccccc」で指定します。
テキストの色を指定する
全体の基本となる文字色を指定していきます。
Cololrプロパティを使用して濃いグレー(#333333)にします
@charset "utf-8";
body {
margin: 0;
padding: 0;
background-color: #cccccc;
color: #333333;
}
テキストサイズと行間を指定する
さらにfont-sizeプロパティで文字サイズを指定
line-highプロパティで行間を指定します
@charset "utf-8";
body {
margin: 0;
padding: 0;
background-color: #cccccc;
color: #333333;
font-size: 15px;
line-height: 2;
}
ブラウザの既定スタイルを解除する
各ブラウザはデフォルトのスタイルがそれぞれ独自に設定されており、ブラウザによって不要な余白ができてしまったり、余白の大きさが違ったりと、意図しない表示になってしまう事があります。
各部の装飾を始める前に、まずはこのデフォルトスタイルを解除する必要があります。
それによりブラウザ間の表示の差異を無くして、一度まっさらな状態にしてからC S Sを描き始める事ができます、
この作業を「リセットC S S」と呼ばれている。
見出しと段落の上マージンをなくす
h要素とp要素にはデフォルトで上部にマージンが設定されています。
このマージンをmargin-topプロパティで「０」に設定して解除し、スタイリングをしやすくします。
p,h1,h2,h3,h4,h5,h6{
margin-top: 0;
}
画像下部の余白をなくす
<img>タグに対してvertical-alignプロパティをbottomに指定し、画像の縦位置を調整します。
img{
vertical-align: bottom;
}
リスト項目の余白をなくす
ul要素もmargin、paddingともに「０」に設定します。
ul{
margin: 0;
padding: 0;
}
リンクの書式と装飾を設定する
リンクには様々な状態がある
通常のリンク
訪問済みのリンク
マウスポインターを置いたとき
H T M L上でそれらを区別するタグは存在しない。
そこで「擬似クラス」を使用し、要素の特定の状態を指定してスタイルを適用します。
「a:hover」→マウスポインタを置いた状態
「a:visited」→訪問済みのリンク
訪問前、後のリンク文字の色を指定する
通常のリンクは青系「#3583aa」
訪問済みのリンクはグレー「#788d98」に設定する。
リンク文字の下線の表示/非表示を指定する
テキストリンクは初期設定では文字の下に線が入っています。
text-decorationプロパティを使用し、変更していきます。
a {
color: #3583aa;
text-decoration: none;
}
a:visited{
color: #788d98;
}
a:hover {
text-decoration: underline;
}
では、プレビューでBefore＆Afterを確認してみましょう。
《Before》
《After》
レイアウトの詳細を記述する
ヘッダーのスタイルを指定する
ヘッダーのサイズを設定する。
要素の大きさの指定にはwidthとheightプロパティを使用します。
header {
width: 960px;
height: 100px;
}
ヘッダーエリアの位置を設定する
ヘッダーエリアをW E B部ブラウザの中央に表示する指定をします。
中央揃えにはmarginプロパティの上下の余白を０にし、左右には「auto」という値を使用します。
左右に指定する「auto」という値は「ブラウザの幅から要素の幅を引いた値を、左右均等に分配して余白を設ける」という指定です。
ロゴとメニューの位置を指定する
使用するのは「float」
logo {
float: left;
}
global-nav {
float: right;
}
ロゴとメニューの位置を調整する
左右に配置できたらmargin topプロパティで上部の余白を作り、掲載位置を調整します。
logo {
float: left;
margin-top: 50px;
}
global-nav {
float: right;
margin-top: 60px;
}
メニュー項目を横に並べる
リスト形式では縦に並ぶのがデフォルト
横にするにはclass属性「global-nav」と目印をつけたul要素の子要素となるli要素に対して、floatプロパティで左揃えを指定します。
global-bav li {
float: left;
}
メニュー項目の細部を調整する
各項目の左右に余白を作り、文字サイズを大きくします。
global-bav li {
float: left;
margin: 0 20px;
font-size: 20px;
}
メニュー文字の行頭アイコンを非表示にする
リスト化すると自動で「・」がつくが、これを非表示にする。
List-styleプロパティを使用しnoneという値を指定します。
global-bav li {
float: left;
margin: 0 20px;
font-size: 20px;
list-style: none;
メニュー文字のリンク色を設定する
.global-nav li a {
color: #ffffff;
}
メニュー文字の下線を設定する①
マウスポインタを置いた時にメニュー文字の下に白い線が表示される様に設定します。
要素に境界線を引きたいときはborderプロパティを使用します。
基本は四辺に出る線だが、下部だけ指定する事もできる。
Border-bottomプロパティを使用すればそれが可能です。
.global-nav li a:hover {
border-bottom: 2px solid #ffffff;
メニュー文字の下線を設定する②
①で設定した線の間隔が狭くて窮屈なので、余白を指定します。
Padding-bottomプロパティで３pxに設定
また、最初に指定した下線が不要になったので削除します。
.global-nav li a:hover {
border-bottom: 2px solid #ffffff;
padding-bottom: 3px;
text-decoration: none;
コンテンツエリアのレイアウトを揃える
floatプロパティを整える
ヘッダー内の各要素に指定したfloatプロパティはそれ以降の要素を回り込ませてしまう為、必要が無ければ解除しておく必要があります。
Header要素の後に続く、id属性で「wrap」と名前のついたdiv要素要素に影響を与えない様にする為、id属性「wrap」に対してclearプロパティを使用します。
#wrap {
clear: both;
}
コンテンツエリアを中央に揃える
content {
width: 960px;
margin: 0 auto;
}
フッターのスタイルを指定する
文字を中央揃えにしてサイズを小さくする
footer {
text-align: center;
color: #ffffff;
padding: 20px 0;
}
余白を設定する
padding: 20px 0;
}
コピーライト表記の文字サイズを設定する
footer small {
font-size: 12px;
}
これで、一通り終了です。
C S Sファイルを加えてどの様に変化したか見てみましょう。
【Before】
【After】
CSSの反映されたサイト
基礎学習はここまでとします。
以降は様々なレイアウトのWEBサイトを作成し、共有していきます。
ソースコード
【HTML】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>サンプルページ</title>
<link href="https://fonts.googleapis.com/css?family=Bitter:400,700" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!-- header始まり -->
<header>
<div class="logo">
<a href="index.html"><img src="images/logo.png" alt="SNAPPERS"></a>
</div>
<nav>
<ul class="global-nav">
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<!-- header終わり -->
<!-- wrap始まり -->
<div id="wrap">
<div class="content">
</div>
</div>
<!-- wrap終わり -->
<!-- footer始まり -->
<footer>
<small>(C)2017 Hattori-studio.</small>
</footer>
<!-- footer終わり -->
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>サンプルページ</title>
<link href="https://fonts.googleapis.com/css?family=Bitter:400,700" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!-- header始まり -->
<header>
<div class="logo">
<a href="index.html"><img src="images/logo.png" alt="SNAPPERS"></a>
</div>
<nav>
<ul class="global-nav">
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<!-- header終わり -->
<!-- wrap始まり -->
<div id="wrap">
<div class="content">
</div>
</div>
<!-- wrap終わり -->
<!-- footer始まり -->
<footer>
<small>(C)2017 Hattori-studio.</small>
</footer>
<!-- footer終わり -->
</body>
</html>
【CSS】
charset "utf-8";
body {
margin: 0;
padding: 0;
background-color: #cccccc;
color: #333333;
font-size: 15px;
line-height: 2;
}
p,h1,h2,h3,h4,h5,h6 {
margin-top: 0;
}
img {
vertical-align:bottom;
}
ul {
margin: 0;
padding: 0;
}
a {
color: #3583aa;
text-decoration: none;
}
a:visited {
color: #788d98;
}
a:hover {
text-decoration: underline;
}
header {
width: 960px;
height: 100px;
margin: 0 auto;
}
.logo {
float: left;
margin-top: 50px;
}
.global-nav {
float: right;
margin-top: 60px;
}
.global-nav li {
float: left;
margin: 0 20px;
font-size: 20px;
list-style: none;
font-family: 'Bitter', serif;
}
.global-nav li a {
color: #ffffff;
}
.global-nav li a:hover {
border-bottom: 2px solid #ffffff;
padding-bottom: 3px;
text-decoration: none;
}
#wrap {
clear: both;
}
.content {
width: 960px;
margin: 0 auto;
}
footer {
text-align: center;
color: #ffffff;
padding: 20px 0;
}
footer small {
font-size: 12px;
}
