作成例

藪の中

芥川龍之介

検非違使（けびいし）に問われたる木樵（きこ）りの物語

　さようでございます。あの死骸（しがい）を見つけたのは、わたしに違いございません。わたしは今朝（けさ）いつもの通り、裏山の杉を伐（き）りに参りました。すると山陰（やまかげ）の藪（やぶ）の中に、あの死骸があったのでございます。あった処でございますか？　それは山科（やましな）の駅路からは、四五町ほど隔たって居りましょう。竹の中に痩（や）せ杉の交（まじ）った、人気（ひとけ）のない所でございます。
　死骸は縹（はなだ）の水干（すいかん）に、都風（みやこふう）のさび烏帽子をかぶったまま、仰向（あおむ）けに倒れて居りました。何しろ一刀（ひとかたな）とは申すものの、胸もとの突き傷でございますから、死骸のまわりの竹の落葉は、蘇芳（すほう）に滲（し）みたようでございます。いえ、血はもう流れては居りません。傷口も乾（かわ）いて居ったようでございます。おまけにそこには、馬蠅（うまばえ）が一匹、わたしの足音も聞えないように、べったり食いついて居りましたっけ。
　太刀（たち）か何かは見えなかったか？　いえ、何もございません。ただその側の杉の根がたに、縄（なわ）が一筋落ちて居りました。それから、――そうそう、縄のほかにも櫛（くし）が一つございました。死骸のまわりにあったものは、この二つぎりでございます。が、草や竹の落葉は、一面に踏み荒されて居りましたから、きっとあの男は殺される前に、よほど手痛い働きでも致したのに違いございません。何、馬はいなかったか？　あそこは一体馬なぞには、はいれない所でございます。何しろ馬の通（かよ）う路とは、藪一つ隔たって居りますから。

作成手順

作業用フォルダ rensyu にアクセスしてください。以降の操作は全て rensyu フォルダ内で行います。
rensyu フォルダ内に白紙のHTMLファイル rensyu1.html と、 CSSファイル rensyu1.css を用意します。

基礎実習ページ掲載の新規HTMLページ作成用サンプルを使うなどして調達すると便利です。
rensyu1.html を編集します。<head>～</head> 範囲内に、 rensyu1.css を読み込むための <link> を記述します。
```
・・省略・・
<head>

<link rel="stylesheet" href="rensyu1.css">

</head>
・・省略・・
```
<body>～</body> 範囲内を編集します。<h1>による見出しで 藪の中 と記入します。

<h1>藪の中</h1>
同様に、<h2>による見出しで 芥川龍之介 と記入します。

<h2>芥川龍之介</h2>

見出しができました。
下の文章を全てコピーして、本文として記入します。 (出典：芥川龍之介藪の中青空文庫より)
検非違使（けびいし）に問われたる木樵（きこ）りの物語さようでございます。あの死骸（しがい）を見つけたのは、わたしに違いございません。わたしは今朝（けさ）いつもの通り、裏山の杉を伐（き）りに参りました。すると山陰（やまかげ）の藪（やぶ）の中に、あの死骸があったのでございます。あった処でございますか？　それは山科（やましな）の駅路からは、四五町ほど隔たって居りましょう。竹の中に痩（や）せ杉の交（まじ）った、人気（ひとけ）のない所でございます。<br> 死骸は縹（はなだ）の水干（すいかん）に、都風（みやこふう）のさび烏帽子をかぶったまま、仰向（あおむ）けに倒れて居りました。何しろ一刀（ひとかたな）とは申すものの、胸もとの突き傷でございますから、死骸のまわりの竹の落葉は、蘇芳（すほう）に滲（し）みたようでございます。いえ、血はもう流れては居りません。傷口も乾（かわ）いて居ったようでございます。おまけにそこには、馬蠅（うまばえ）が一匹、わたしの足音も聞えないように、べったり食いついて居りましたっけ。<br> 太刀（たち）か何かは見えなかったか？　いえ、何もございません。ただその側の杉の根がたに、縄（なわ）が一筋落ちて居りました。それから、――そうそう、縄のほかにも櫛（くし）が一つございました。死骸のまわりにあったものは、この二つぎりでございます。が、草や竹の落葉は、一面に踏み荒されて居りましたから、きっとあの男は殺される前に、よほど手痛い働きでも致したのに違いございません。何、馬はいなかったか？　あそこは一体馬なぞには、はいれない所でございます。何しろ馬の通（かよ）う路とは、藪一つ隔たって居りますから。

文章が入力されました。
1行目の「検非違使（けびいし）に問われたる木樵（きこ）りの物語」の周囲に２文字分の余白(margin) を作成します。文字の周囲に余白を設けるには margin プロパティを使用します。

margin: 2em;
margin プロパティの基本形

CSSでは、em という単位は「１文字分」を表します。1em で１文字分なので、2em なら２文字分です。

marginの設定を実際に適用するには、クラス を使うとよいでしょう。HTMLファイル内で、「検非違使に～」で始まる行を<div>で囲み、class属性で好きな名前のクラスを宣言します。

以下は midasi という名前の新しいクラスを使った場合の例です。

<div class="midasi">検非違使（けびいし）に問われたる木樵（きこ）りの物語</div>

.midasi { margin: 2em; }

（CSS ファイル内でクラス定義をする際は、クラス名の左にドット［.］を書くのを忘れずに）

これでmidasiクラスを指定した箇所に、２文字分の余白が作られます。

２文字分(2em)の余白が作られました。
同様に、2行目以降の本文にも、周囲に２文字分の余白を作成してください。クラス名は好きなもので構いません。ここでは honbun というクラス名にするものとします。

<div class="honbun">さようでございます。あの死骸（しがい）を見つけたのは
・・（省略）・・
路とは、藪一つ隔たって居りますから。</div>

.midasi { margin: 2em; }
.honbun { margin: 2em; }

本文の周囲にも余白が作られました。

CSSの書き方（おさらい）

CSSでは、セレクタ { プロパティ:値; プロパティ:値; ... } という構造が一つの設定単位になります。別のセレクタについての設定を行いたい場合は、この構造を列挙することになります。

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

また、プロパティ:値;のセットは、全て中括弧{ ～ }の内側に書きます。外側に書くことはありませんので、注意してください。（もし書くと、それ以降の処理が正常に行われない可能性があります）

セレクタ { プロパティ:値; プロパティ:値; ... } プロパティ:値; /* ← このように中括弧の外に設定を書くのは誤りです！*/ セレクタ { プロパティ:値; }
行間が詰まりすぎていて、見づらいです。honbunクラスに対して、さらに行間を2行分開く設定を追加します。2行分の行間は line-heightプロパティを 2em に設定すると作れます。

.midasi { margin: 2em; }
.honbun { margin: 2em; line-height:2em; }

少し行間が開いたように見えるはずです。

行間が開きました。
本文の書体（フォント）を変えます。honbunクラスに対して、font-familyを使った以下のような設定を追加すると、文字のフォントを変えられます。
```
.midasi { margin: 2em; }
.honbun {
margin: 2em;
line-height:2em;
font-family: Arial, "MS PMincho", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
}
```
横に長い設定なので改行されて見えると思いますが、実際に入力する際は改行せずに横一行で記述してください。

文字のフォントが変更されました。（Windowsの場合、明朝体になるはずです）

変更後は「検非違使（けびいし）に問われたる木樵（きこ）りの物語」の部分と、本文の文章とでフォントが異なるので、変更した効果が分かりやすいかと思います。
画面の横幅を広げると、文章はどこまでも横に伸びますが、一行が長すぎると読みづらくなります。

横に伸びたレイアウト（読みづらい）

そこで横に広がりすぎないように、つまり本文の横幅が一定以上に伸びないよう制限します。さらに、左右に偏って表示されないよう中央寄せにします。ページ全体を囲う<body>に対して、以下のような設定を行うと中央寄せができます。
```
.midasi { margin: 2em; }
.honbun {
margin: 2em;
line-height:2em;
font-family: Arial, "MS PMincho", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
}

body { width:90%; max-width:800px; margin-left:auto; margin-right:auto; }
```
ページ（body）の横幅widthを、基本ブラウザ画面の９０％としますが、最大横幅をmax-widthプロパティで制限し、800ピクセル以上には広がらないように制限しています。
さらに左右のマージン（margin-left と margin-right）にそれぞれ「auto」という値を設定すると、中央寄せとなります。

画面の横幅を広げたり狭めたりして、ページの横幅が一定以上に広がらない様子を動作確認してください。

画面の横幅を広げても、一定幅以上に広がらなくなりました。
また、全体が中央寄せで表示されます。（読みやすい）

これで完成です。

まとめ

最終的に今回作成したファイルは以下のようになるでしょう（第１問目ということで特別サービスです）。それぞれ rensyu1.html と rensyu1.css です。

うまくいったか答え合わせしてみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="rensyu1.css">
<title>練習１</title>
</head>
   
<body>
<!-- 本文ここから -->
<h1>藪の中</h1>
<h2>芥川龍之介</h2>

<div class="midasi">検非違使（けびいし）に問われたる木樵（きこ）りの物語</div>

<div class="honbun">さようでございます。あの死骸（しがい）を見つけたのは、わたしに違いございません。わたしは今朝（けさ）いつもの通り、裏山の杉を伐（き）りに参りました。すると山陰（やまかげ）の藪（やぶ）の中に、あの死骸があったのでございます。あった処でございますか？　それは山科（やましな）の駅路からは、四五町ほど隔たって居りましょう。竹の中に痩（や）せ杉の交（まじ）った、人気（ひとけ）のない所でございます。<br>
死骸は縹（はなだ）の水干（すいかん）に、都風（みやこふう）のさび烏帽子をかぶったまま、仰向（あおむ）けに倒れて居りました。何しろ一刀（ひとかたな）とは申すものの、胸もとの突き傷でございますから、死骸のまわりの竹の落葉は、蘇芳（すほう）に滲（し）みたようでございます。いえ、血はもう流れては居りません。傷口も乾（かわ）いて居ったようでございます。おまけにそこには、馬蠅（うまばえ）が一匹、わたしの足音も聞えないように、べったり食いついて居りましたっけ。<br>
太刀（たち）か何かは見えなかったか？　いえ、何もございません。ただその側の杉の根がたに、縄（なわ）が一筋落ちて居りました。それから、――そうそう、縄のほかにも櫛（くし）が 一つございました。死骸のまわりにあったものは、この二つぎりでございます。が、草や竹の落葉は、一面に踏み荒されて居りましたから、きっとあの男は殺さ れる前に、よほど手痛い働きでも致したのに違いございません。何、馬はいなかったか？　あそこは一体馬なぞには、はいれない所でございます。何しろ馬の通（かよ）う路とは、藪一つ隔たって居りますから。</div>

<!-- 本文ここまで -->
</body>
</html>

@charset "UTF-8";
/* CSS スタイルシート */

.midasi { margin: 2em; }

.honbun {
  margin: 2em;
  line-height:2em;
  font-family: Arial, "MS PMincho", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
}

body { width:90%; max-width:800px; margin-left:auto; margin-right:auto; }

改行のしかたなどは多少違っていても問題はありません。各自で読みやすいように調整してください。

次以降の問題も、このようにHTMLとCSSを別々に編集する必要があるでしょう。参考にしてください。

解説

解説コーナーでは、上で行ったCSS設定の詳しい内容を説明します。どういう意味の設定だったのかをおさらいしましょう。

余白の設定

CSSでは margin（マージン）プロパティを使って、<div> などのブロック要素の周囲に余白を設け、文章をレイアウトできます。

周囲に作られる余白(margin)

また、padding（パディング）プロパティを使って、ブロック要素の境界線の位置から中に入っている文字などの間の間隔も設定できます。

実際の画面における余白

上の図で、黄色く見えている範囲が margin で、紫色に見えている範囲が padding です。

余白は目に見えないので分かりにくいですが、多くのブラウザで、F12キーを押して、「開発者ツール」もしくは「デバッグツール」と呼ばれる機能を起動させれば、視認できるようになります。

行間の設定

CSSでは line-height プロパティで行間の調整もできます。

HTMLの標準的な行間はやや狭いので、見づらいと感じる場合は 1.5行～2行分（1.5em～2em）程度の行間をあけておくと見やすくなります。

ウェブ上の文章は行間を広めにとるのが見やすいとされています。（文章の掲載がメインとなるオンライン小説投稿サイトなどのデザインも、行間が広めに設定されていたりします。参考になりますね！）

これらを使って表示上の位置を調整したり、文章のレイアウトに使用したりできます。さらに クラス を使えば、同じ設定を使いまわすことで、簡単に統一感のあるデザインを実現できます。

書体（フォント）の設定

CSSでは font-family プロパティを使って、文字の書体（フォント）を変更できます。

font-family: に続けて、カンマ「,」区切りで設定したいフォントの名前を列挙しましょう。

フォント名にスペース文字「」や全角文字を含む場合は、シングルクォーテーション「'」またはダブルクオーテーション「"」記号でフォント名を囲います。

font-family: Arial, "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;

フォント名は複数指定できますが、先頭から順番に、指定したフォントがページ閲覧者の端末にインストールされているか調べ、見つかった場合はそのフォントで表示されます。

つまり上の例の場合、ページ閲覧者の端末に……

「Arial」フォントがインストールされていればそれで表示します。
Arialフォントが無い場合、もしくは Arialフォントが対応していない文字については、「ヒラギノ角ゴ Pro W3」フォントがインストールされていればそれを表示します。(macOSに標準インストールされているフォントです)
上記が無い場合、「メイリオ」フォントがインストールされていればそれを表示します。(Windows10などに標準インストールされているフォントです)
どれも無ければ、システムにインストールされている sans-serif＝ゴシック体のフォントのどれかを使用します。どれを使うかはブラウザが決めます。

という処理の流れになります。

このことから分かるように、ページ閲覧者の端末に指定のフォント（フォント）がインストールされていなければ、ページ作成者の指定とは異なるイメージのフォントで表示される場合があるので、注意が必要です。（確実ではないということです）

たとえば上記の設定は、WindowsやmacOSを意識した比較的無難な設定ですが、Android搭載スマートフォンなどでページにアクセスすると、指定したどのフォントも搭載されていないため、Android標準搭載のゴシック体フォント "Roboto" などで表示される、という具合です（想定とは異なる字体で表示されますが、それでもそれなりの画面表示にはなるでしょう）。

font-familyプロパティの使い方は奥が深いので、詳しくは「css font-family 使い方」等のキーワードで検索してみましょう。

どの端末でも同じ書体が表示されるように、ネット上で公開されているフォントを使用するGoogle Fontsといったサービスもあります。

参考：長さの単位

CSSで余白の大きさなど、長さを設定する際は、必ず単位をつけて記述する必要があります。 ただしゼロの場合だけは特別に単位を省略できます。

body { margin: 1cm; }   ← ○ 単位を付ける。
body { margin: 0; }     ← ○ ゼロの場合は単位を省略できる。
body { margin: 10; }    ← × 単位を付けなければならない。

単位には、次のような種類があります。

CSS長さの単位
単位	読み方	換算	備考
`px`	ピクセル	1px = 画面上の1ピクセル	最もよく使われる
`em`	エム	1em = 1文字分の長さ	n文字分という単位で指定できる
`mm`	ミリメートル	10mm = 1cm
`cm`	センチメートル	1cm = 10mm
`in`	インチ	1in = 2.54cm
`pt`	ポイント	72pt = 1in = 0.35mm	WORDなどで使われるフォントの大きさの単位とおなじ

※ ミリメートル mm や、センチメートル cm のような単位は実際の長さを表していますが、システムが表示画面の大きさを正しく認識している環境でないと正確に反映されないので、必ずしも正確とは限りません。

このようにCSSでは、周囲の余白や行間などを細かく設定し、見やすいページを実現できます。

１ 余白の設定

作成例

藪の中