タグの使用
タグというものを使って、プロフィール帳をさらに読みやすくしていきます。
その前に、そもそもタグとはなんなのか、気になりますよね。
Notionや、その他Markdown記法を採用しているアプリを使ったことのある人ならわかると思いますが、タグは公式が用意してくれてる文字種です。
例えば、pなら段落、h1なら見出し、h2なら中見出し、h3はさらに小さい見出しと行った感じです。
##や#の方が見慣れているという人もいるかもしれませんね。
使い方ですが、付けたい効果のタグで効果を付けたい文字を挟んであげればいいです。
日本語で書くとややこしいので、コードで書くと次のようになります。
記事一覧
ツイート
訂正
裏話
<h1>Introduction Card</h1>
Introduction Cardを<h1></h1>で挟んだだけですが、これだけで次みたいになります。
やはり見出しだけあって、結構大きくなりますね。
次に名前を中見出し<h2></h2>で挟んでみましょう。
<!DOCTYPE html>
<html>
すると、こんな感じになります。
割とちょうどいいサイズの見出しになりました。
そしたら、ユーザー名とニックネームを段落<p></p>で挟みます。
<!DOCTYPE html>
<html>
<body>
<h1>Introduction Card</h1>
<h2>名前</h2>
<p>ユーザー名:笹錆
ニックネーム:錆</p>
誕生
誕生日:3/1
星座:うお座
血液型:A型
質問
Q.最近の趣味はなに？
- A.ホゲータの真似。
Q.好きなポケモンはなに？
- A.ヒマナッツかホゲータ。
</body>
</html>
変わった……？
そうです、変わってないです。
何もタグをつけないと、必ずpタグで表示されるようですね。
ですが、このままでは改行が行われないためまだ読みにくいですね。
そのための方法ですが、HTMLの改行には2種類存在し「タグを新たに使用する」か「brタグをつける」かです。
一つ目の改行は、「Introduction Card」と「名前」の間や、「名前」と「ユーザーネーム」の間で生じているこれです。
この部分のプログラムを見ると、タグが新たに宣言されていることが分かりますね。
<h1>Introduction Card</h1>
<h2>名前</h2>
<p>ユーザー名:笹錆
ニックネーム:錆</p>
今回は別のタグを新たに宣言しましたが、この改行は同じタグでも起きます。
では、試しにpタグも2回新たに宣言することにしましょう。
プログラムを次のように書き直します。
<!DOCTYPE html>
<html>
<body>
<h1>Introduction Card</h1>
<h2>名前</h2>
<p>ユーザー名:笹錆</p>
<p>ニックネーム:錆</p>
誕生
誕生日:3/1
星座:うお座
血液型:A型
質問
Q.最近の趣味はなに？
- A.ホゲータの真似。
Q.好きなポケモンはなに？
- A.ヒマナッツかホゲータ。
</body>
</html>
出来ましたね。
これでできるならこの改行でも良さそうですが、なぜかもう一つ方法もあります。
その二つ目の改行方法は、pタグ内に<br>と書けばできます。
このサイトでも、pタグを新たに宣言するのではなく、必ず文章と文章の間にbrタグを入れて改行しています。
-S君「読みにくさの正体はそれか。」
-笹錆「昔の携帯小説みたいでいいよね。」
<!DOCTYPE html>
<html>
<body>
<h1>Introduction Card</h1>
<h2>名前</h2>
<p>ユーザー名:笹錆<br>
ニックネーム:錆</p>
誕生
誕生日:3/1
星座:うお座
血液型:A型
質問
Q.最近の趣味はなに？
- A.ホゲータの真似。
Q.好きなポケモンはなに？
- A.ヒマナッツかホゲータ。
</body>
</html>
こんな感じに書けば、いい具合に改行が行われます。
この改行の違いについてはまた後で述べるとして、誕生、質問カテゴリも同様に中見出し、段落で記述していきます。
コードの表示<!DOCTYPE html>
<html>
<body>
<h1>Introduction Card</h1>
<h2>名前</h2>
<p>ユーザー名:笹錆<br>
ニックネーム:錆</p>
<h2>誕生</h2>
<p>誕生日:3/1<br>
星座:うお座<br>
血液型:A型</p>
<h2>質問</h2>
<p>Q.最近の趣味はなに？<br>
- A.ホゲータの真似。</p>
<p>Q.好きなポケモンはなに？<br>
- A.ヒマナッツかホゲータ。</p>
</body>
</html>
これでプロフィール帳が完成しました。
あの頃は無理でしたが、ようやく交換できるときが来ましたね。
そういえば
そういえば、なんでpタグをつけなくても文章は表示できるのに、pタグをつける必要があるのでしょうか。
理由は結構シンプルです。
そもそも、pタグを使ってまとめた文章は段落扱いにあります。
なので、pタグを使うことで段落一行目のインデントや行間、段落同士の体裁をまとめて整えられるのです。
「文章を表示する」だけならタグをつける必要はありませんが、「段落として文章を表示する」のであれば必要となってくるというわけですね。
それ以外にも、検索エンジンはタグの種類を見て文章構成を把握するため、自分が意図したとおりの文章を伝えるためにもこの意識は必要です。
そういえば2
そういえば、なぜ改行の方法が2つも存在するのでしょうか。
上でも話しましたが、検索エンジンはタグの種類を見て文章構成を把握します。
そのため、段落やただの一文なんかを区別する必要があったんでした。
というわけで、それが段落内での改行なのか、段落が違うために起きる改行なのかという違いがあります。
画像をよく見てもらうと、改行の大きさがちょっと違うのが分かると思います。
それと、PC以外の端末でサイトを見るとbrの間隔がずれたりするらしいです。
自分は見たことがないので詳しく知らないのですが、そんなことがあるらしいですね。
この記事を書くまで知らずにこのサイト作ってました。
多分ですが、デザインのために改行するのをbrタグでやらず、文章の体裁として改行したいときに使ってねって感じです。
H君
そういえば、今回は2部構成なんだ。
笹錆
書いてて思いつくことが多かったので……
プロフィール帳を作ったとはいえ、このままだと文章と文字が並んでいるだけ。
とても人と交換できるものとは言えません。
というわけで、CSSを用いてプロフィール帳の体裁を整えていきます。
-H君「サイトを作っていたはずでは？」
背景色、文字サイズの設定
まずはstyle.cssを作成し、<body>の上の行に次の内容を書き込んでください。
<link rel="stylesheet" media="all" href="../style.css">
これは、作成したCSSファイルをHTMLと紐づけるのに必要です。
hrefのところには、CSSファイルとの相対パスを書き込んでいます。
次にstyle.cssに次の内容を書き込みます。
body {
background-color: rgb(255,235,205);
}
CSSは、タグやクラスで指定したものをデザインするためのであり、今回はbodyタグの背景色を肌色に変更しています。
では次に、文字色やフォントサイズも変更していきます。
とりあえずh1を30px、h2を20px、pを14pxに設定しましょう。
h1{
font-size: 30px;
}
h2{
font-size: 20px;
}
p{
font-size: 14px;
}
ここら辺のポイントに関してはなんとなくで決めています。
フォントによって文字間隔や適切なサイズは変わってきますので、いい感じの値をぜひ探してみてください。
見出しの設定
次に見出しのデザインをやっていきます。
h1はタイトルなので中央揃えに、h2はいい感じの枠で囲みたいですよね。
そこで次はh1、h2タグに次の内容を書き加えます。
h1{
font-size: 30px;
text-align: center;
}
h2{
font-size: 20px;
padding: 0.15em 0.5em;
border: 5px solid #444444;
background-color: #ffffff;
display: inline;
}
text-alignは文字の詰め方を変更するためのものです。
startで左詰め、centerで中央揃え、endで右詰め、justifyでいい感じに改行を挟んでくれます。
確かに、Introduction Cardが中央ぞろえになっていますね。
それに対してh2の方は書いている内容が多いです。
この中でも、paddingに関しては後で解説するので一旦置いておき、display、borderについてだけ説明します。
displayはその要素をblock要素かinline要素のどちらとして扱うかを指定します。
正直説明するのは面倒なので、これを書かないとどうなるか画像を載せておきます。
いい感じの長さにするんだな、ぐらいに思ってください。
次に、borderは図形に枠線をつけるためのものです。
これ1つで太さ、線の種類、色を指定することができ、初めの4pxが太さ、solidが直線、#444444が色を表しています。
シンプルな直線です。
他のクセが強すぎてこいつの使用率が1位。
まだシンプルな点線です。
クセは少なく、笹錆ログのメモとかに使ってた気がする。
一番使いにくい枠です。
見てもらえたらわかるけど、丸の羅列を使いたいときに使ってあげてください。
どこで使うの難しい二重線です。
使いどころに毎回悩んでいます。
使いにくいけど、ちょっと枠をかっこよくしてくれるやつです。
もう一色の方は自動で決まります。
影をよりシンプルに付けてくれるものです。
これも影の色は自動で決まります。
因みに、borderはborder-width、border-style、border-colorという書き方もでき、太さだけ、線種だけ、色だけを個別に指定できます。
このサイトでは、border-radiusを使って可愛く丸みを帯びさせたりもしていますね。
CSSにはよくある表記ですが、border-leftとかborder-right-styleみたいな感じでやれば、上下左右いずれかの枠のみも指定できます。
これを使うことで、キメラ枠をいっぱい作ることができますね。
S君
どこで使うんだよ、こいつら。
あ、それとこれを使って作ったプロフィール帳の見出しを今後は付箋見出しと呼びます。
padding、marginの構成
お待たせしました。
先程登場したpaddingの解説をやっていきます。
笹錆ログを作るうえでのスライムみたいなやつらで、ことあるごとに問題として出てきます。
とはいえ、慣れてくると難しいことはないと思いますので、ゆっくりと解説していきます。
まず初めに、HTMLのタグによって設置された要素は全て長方形だと思ってください。
お絵描きアプリの図形ツール(長方形)で絵を描いているようなものです。
なので、h2といった文字に関してもこんな感じの長方形というわけです。
そしてこの長方形の性質として、他の長方形と基本的に干渉することはありません。
ということは、今まで作っていたプロフィール帳もこんな感じの長方形で構成されています。
改行が起きるときとして紹介していた「タグを新しく使う」についてもこれで説明できているはずです。
長方形同士が干渉し合わないようになっているなら、下の図のように当然改行が起こりますよね。
さらにこの長方形をさらに細かく見ていくと、margin、padding、borderという3つからできています。
つまり、先ほど出てきたpaddingというのは「borderから文字までの間隔」を表し、その幅を設定していたというわけですね。
marginも同じように設定できますが、こちらは「borderから外側までの間隔」を弄っています。
この違いは覚えておくといいと思います。
例として、このサイトでよく使われている枠について確認してみましょう。
「このサイトは？」といった中の要素の外側に紫色(padding)があり、その外側にすぐに黄色(margin)が来ていますね。
その境界と、背景と枠の境界は一致していると思います。
よく見ると、下の方にだけうっすらと赤色(border)があり、枠の下についていた影のようなものがborderでできていたことが分かると思います。
さて、それではmargin、paddingの書き方ですが、2つとも基本的に次の3種類の書き方ができます。
padding: 4px; /*上下左右全て指定*/
padding: 4px 2px; /*上下、左右ごとに指定*/
padding: 4px 2px 3px 2px; /*上、左、下、右の順で指定*/
1つ目は「上下左右の長さが一律」の場合、2つ目は「上下と左右の長さがそれぞれ一律」の場合、3つ目は「上下左右の全ての長さをそれぞれ設定する」場合です。
それぞれ実際に使ってみると、こんな感じになります。
この中でも、僕は特に3つ目をよく使っています。
1つ目、2つ目の書き方も使わないわけではないですが、なんだかんだ3つ目の書き方ができれば全部できますしね。
長さについて
padding、marginに包含したかったのですが、意外と長くなってしまったので分けました。
ここでは長さの表し方について書くわけですが、これは主に6種類あります。
僕はそのうち3種類ぐらいしか使えないですが、今回は一応全て紹介します。
画素数の単位であるpixelによって指定します。
画面サイズにとらわれない大きさの指定が可能ですが、現代では媒体がスマホ、PC、タブレットと多岐にわたるので外観が崩れる原因だったりもします。
親要素の大きさを100%とした割合で指定します。
100%を選ぶと親要素と全く同じ大きさになりますが、逆に親要素のサイズ(width、height)を指定しないとうまく動きません。
画面サイズを100%とした割合で指定します。
100%で画面と一致し、画面サイズが変わっても比率を維持したい場合に使われます。
主にスマホ向けサイトの構築なんかに使用されます。
親要素のフォントサイズを基準に指定できます。
ブラウザの機能などでフォントサイズが変わっていた場合でも同じ比率で表示されるので、文字の装飾などに使われます。
フォントサイズで指定するという意味では同じですが、こちらはHTMLのフォントサイズに依存します。
親要素のフォントサイズに関係なく同じ比率で表示したいときに使われます。
marginやpadding、子要素などを考慮して自動で長さを決めてくれます。
子要素に合わせて長さが決まるので、子要素のサイズが%で指定されているとどちらもautoになります。
子要素、親要素といった単語が出てきましたが、フォルダとかと同じノリです。
<p><br></p>みたいにタグの中に別の何かが入っているやつが子要素です。
実際の使用例
ここからは笹錆ログでの実際の使用例を踏まえて見ていきましょう。
たとえば記事を表示きている白枠(通称:ウィンドウ)ですが、こいつは高さを指定しているわけではなく、文量に合わせて自動で縦のサイズが決まっています。
なのでheightがautoになっているわけですね。
また、ウィンドウの横幅はタブレット、スマホの場合に画面全体の98%に指定しています。
親要素ではなく、画面サイズの98%なので、widthが98vwになっているはずです。
記事の付箋見出しについては、文字サイズが変化したときに外枠と文字との距離も変化して欲しいのでpaddingがremやemで指定されています。
記事の画像なんかは読む媒体に合わせたサイズにする必要がありますが、媒体によってウィンドウの横幅は変化させている(PCだと60vw、スマホだと98vwになる)ので親要素に合わせた長さにする必要があります。
そのためwidthは%で指定しています。
-H君「お前さては、px、%、autoだけでこのサイト作っただろ。」
その通りです。
確かにremとかvwにするべき部分なのにやってないですが、それでもサイトは作れるってことですね。
-H君「美談にしてるけど、そんなやつがサイトの作り方なんて教えるな。」
それは本当にそう。
こんなやつがサイト作る記事なんか書いててごめんなさい。