はじめてのCSS②　初心者がUdemyでどこまでできるようになるか！？

CSSの２回目の学習です。今回は、フォント・ボックスの概念・フロートプロパティについてです。

フォントを変えたり、ボックスを横並びにしたりすると、ページのレイアウトが美しくなり見栄えがします。

では、今回の学習で作ったページです。３つのボックスを並べる練習でしたので、夏目漱石の前期三部作の冒頭部分を並べてみました。

フォント
Webフォント
1. 有名Webフォント
ボックスモデル
フロートレイアウト
まとめ

フォント

フォントを指定するには、次のコードを使用します。

フォントの指定

フォントを指定するコードは次の通りです。

セレクタ　｛
font-family: フォント名　or フォントファミリー　;
}

フォント名を指定した場合、そのフォントが見ている側のデバイスに入っていないと、意図しないフォントで表示される場合があるため注意が必要です。

フォントファミリーとは、デザインを統一した複数のフォントをまとめたもので、２つあります。

serif（セリフ）
日本の表記でいうと「明朝体」のこと

sans-serif（サンセリフ）
日本の表記でいうと「ゴシック体」のこと

コードの書き方の例

Font-family: “Hiragino Kaku Gothic ProN”,”メイリオ”,serif;

このように書くと、１番目に「Hiragino Kaku Gothic ProN」があれば使用され、なければ次に「メイリオ」を使用します。それもなければ「serif」（何かしらの明朝体）が使用されるという書き方になります。

有名サイトのフォント

インターネットでよく見られているサイトのフォントをGoogle Chromeのデベロッパーツールで調べると次のようになっています。

YAHOO!JAPANのフォント
font-family:Hiragino Kaku Gothic Pro,Meiryo,Osaka,MS PGothic,sans-serif;

楽天市場
font-family:”Meiryo”, “Hiragino Kaku Gothic ProN”, “MS PGothic”, sans-serif;

フォントに関するプロパティ

フォントに関するプロパティには次のようなものがあります。

・font-family 　　フォント名を指定する。
・font-size　　　　フォントのサイズを指定する。
・font-weight　　フォントの太さを指定する。（normalかbold）
・line-height　　　行間を指定する。
・text-align　　　文字寄せを設定する。（右・中央・左など）
・text-decoration　装飾線（下線や取り消し線など）を付ける。

サイズの指定

サイズの指定には「相対単位」と「絶対単位」があります。

「相対単位」とは、割合や決められた大きさに比べてどれくらいかを指定する単位
「絶対単位」とは、インチや画素を基にした単位

「相対単位」には、％やem、remなどがあり、「絶対単位」には、pt（ポイント）やpx（ピクセル）などがあります。

Webフォント

Webフォントは、Webサーバー上に設定されたフォントファイルをインターネットを経由して配信しているもので、Webサーバーから受け取って表示させることができる仕組みのことです。

Webフォントには英語などの欧文フォントと日本語を表記する和文フォントなどがあります。文字数が少ない欧文フォントはWebフォントとして普及しているが、文字数が多く、データ量が多くなるなどのデメリットから和文フォントはあまり普及していない。

また、Webフォントには無料で利用できるものと有料となるものがあります。有料であっても、PV数などにより無料となるものもあり、初心者に優しいWebフォントもあります。

有名Webフォント

・Google Web Fonts （欧文フォントと和文フォントがあります）　無料

・モリサワ TypeSquare（和文フォント）有料

・Font Awesome 4.7（アイコン）無料

ボックスモデル

文字などの内容（content）の外側にはpaddingという領域があり、その外に枠（border）を描くことができ、そのさらに外側に（margin）という領域があります。

これらを設定することで、文字から枠までの隙間を開けたり、枠と枠の間を調整したりすることができます。（↓こんな感じです）

フロートレイアウト

HTMLでコードを書いただけだと、基本的に立て並びにコンテンツが並ぶことになります。この立て並びになったコンテンツを横に並べる方法の１つにフロートレイアウトがあります。

フロートレイアウトで段組みする方法

１　widthプロパティで、各要素の幅を指定する。
２　floatプロパティを指定してフロートさせる。
３　clearプロパティでフロートを解除する。

（例）HTML

<div id="wrap">
<div id="box1">BOX１</div>
<div id="box2">BOX２</div>
<div id="box3">BOX３</div>
</div>

（例）CSS

#wrap {
width: 100%;　１で指定する幅の指定（全体）
}
#box1 {
width: 50%;　１で指定する幅の指定（１つ目のBOX）
float: left;　２のfloatプロパティの指定（左側に配置）
}
#box2 {
width: 50%;　１で指定する幅の指定（２つ目のBOX）
float: right;　２のfloatプロパティの指定（右側に配置）
}
#box3 {
clear: both;　３のfloatプロパティの解除（元通り）
}

このコードで、BOX１とBOX２を半分ずつの幅で横並びにして、BOX３をその下にもとのサイズで立て並びにするという指定になります。

最後に今回のプログラムコードを載せておきます。

完成HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="stylesheets/css2.css">
<link href="https://fonts.googleapis.com/css?family=Kosugi+Maru&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Kosugi|Kosugi+Maru|M+PLUS+Rounded+1c&display=swap" rel="stylesheet">
<title>CSSステップアップ</title>
</head>
<body>
<h1>CSSステップアップ</h1>
<div id="wrap">
<div id="box1">
<h2>三四郎</h2>
<p>
うとうととして目がさめると女はいつのまにか、隣のじいさんと話を始めている。このじいさんはたしかに前の前の駅から乗ったいなか者である。発車まぎわに頓狂とんきょうな声を出して駆け込んで来て、いきなり肌はだをぬいだと思ったら背中にお灸きゅうのあとがいっぱいあったので、三四郎さんしろうの記憶に残っている。じいさんが汗をふいて、肌を入れて、女の隣に腰をかけたまでよく注意して見ていたくらいである。
</p>
</div>
<div id="box2">
<h2>それから</h2>
<p>
誰か慌あわただしく門前を馳かけて行く足音がした時、代助だいすけの頭の中には、大きな俎下駄まないたげたが空くうから、ぶら下っていた。けれども、その俎下駄は、足音の遠退とおのくに従って、すうと頭から抜け出して消えてしまった。そうして眼が覚めた。<br>
枕元まくらもとを見ると、八重の椿つばきが一輪畳の上に落ちている。代助は昨夕ゆうべ床の中で慥たしかにこの花の落ちる音を聞いた。
</p>
</div>
<div id="box3">
<h2>門</h2>
<P>
宗助そうすけは先刻さっきから縁側えんがわへ坐蒲団ざぶとんを持ち出して、日当りの好さそうな所へ気楽に胡坐あぐらをかいて見たが、やがて手に持っている雑誌を放り出すと共に、ごろりと横になった。秋日和あきびよりと名のつくほどの上天気なので、往来を行く人の下駄げたの響が、静かな町だけに、朗らかに聞えて来る。肱枕ひじまくらをして軒から上を見上げると、奇麗きれいな空が一面に蒼あおく澄んでいる。その空が自分の寝ている縁側の、窮屈な寸法に較くらべて見ると、非常に広大である。たまの日曜にこうして緩ゆっくり空を見るだけでもだいぶ違うなと思いながら、眉まゆを寄せて、ぎらぎらする日をしばらく見つめていたが、眩まぼ［＃ルビの「まぼ」はママ］しくなったので、今度はぐるりと寝返りをして障子しょうじの方を向いた。障子の中では細君が裁縫しごとをしている。
</P>
</div>
</div>
</body>
</html>

完成CSS

#wrap {
width: 100%;
}
#box1 {
background-color: red;
color: aliceblue;
width: 50%;
float: left;
font-family: 'Kosugi Maru', sans-serif;
}
#box2 {
background-color: blue;
color: aliceblue;
width: 50%;
float: right;
font-family: 'Kosugi', sans-serif;
}
#box3 {
background-color: green;
color: aliceblue;
clear: both;
font-family: 'M PLUS Rounded 1c', sans-serif;
}