10/22

10【技術】基本構造系のタグ

白猿

「今回は『基本構造系のタグ』を紹介する。活動報告の『新しい記事を作る』画面の下にあるタグ一覧で、一番最初にくるやつだな」

・゜゜・*:.。..。.:*・゜゜・*:.。

白猿

「で、基本構造系のタグはこれだ」

・゜゜・*:.。..。.:*・゜゜・*:.。

<div></div> , <span></span> , <h1></h1> , <h2></h2> , <h3></h3> ,

・゜゜・*:.。..。.:*・゜゜・*:.。

黒猫

「『基本』っていう言葉がついてるね。タグを勉強するための基礎知識なのかな」

白猿

「どうだろう？　divタグとspanタグは色々なことができて、ある意味で基本的なタグかもな。それぞれの役割を軽く紹介しよう」

・゜゜・*:.。..。.:*・゜゜・*:.。

・divタグ

　division[分割]の略。

　このタグで囲まれた範囲で、文字の色や大きさ、囲んだ範囲の背景色や枠を設定する。

　タグ自体は意味をもたないため、いろいろな状況でも使える。

・spanタグ

　span[物や時間の長さ]という言葉。　

　行の中でタグで挟まれた箇所の文字の色や大きさを設定する。

　タグ自体は意味をもたないため、いろいろな状況でも使える。

・h1～6タグ

　heading[見出し]の略

　ある情報の見出しの部分に設定する。

　数字1が字が一番大きく、6が一番小さい。

　「見出し」の意味で1から順に使用する。

・address

　address[宛先・住所]の意味。

　「連絡先」の意味で使用し、メールアドレスなどを設定する。

・゜゜・*:.。..。.:*・゜゜・*:.。

黒猫

「最後の『address』って何に使うのかな」

白猿

「まぁ、使わない方がいい機能だな。このタグでメールアドレスを挟んでおくと、その作者の連絡先であることを宣言できるんだ」

黒猫

「そもそも、活動報告にメールアドレスは書かないよね」

白猿

「addressは活動報告では使わないと思う。ではdivタグとspanタグの説明の前に、hタグの説明をしよう。前にも書いた活動報告の例文をもっかい流用する」

・゜゜・*:.。..。.:*・゜゜・*:.。

■執筆状況

時代小説『白洲ロジック』の第六話を投稿しました。

ぐうたら奉行のインチキ推理が炸裂します。

-------------------------------

■最近読んだ小説

アホリアＳＳさんの短編『桜並木の青い猫』を読みました。

猫が動いててビックリしました。

-------------------------------

■近況

朝起きたら、家の前に雪が積もっててビックリ。

近所の家の前に小さな雪だるまができてました。

いつ作ったんだろう……

・゜゜・*:.。..。.:*・゜゜・*:.。

黒猫

「この例文では『■執筆状況』などが『見出し』だよね」

白猿

「そうそう。ここに『<h1>■執筆状況</h1>』のようにして、ここが『見出し』だと宣言するんだ。見出しの配下の情報に『小見出し』をつける場合はh2など、数字を順番に大きくしていくんだ」

・゜゜・*:.。..。.:*・゜゜・*:.。

時代小説『白洲ロジック』の第六話を投稿しました。

ぐうたら奉行のインチキ推理が炸裂します。

ホラー小説『いいねボタンの裏技』を投稿しました。

ちょっと恐いお話です。

・゜゜・*:.。..。.:*・゜゜・*:.。

黒猫

「ふむ。活動報告で普通に記事を書く場合は、小項目の中に小項目ってあまりなさそうだね。基本はh1だけで、内容によってはh2やh3だたまに使われるかな」

白猿

「ただし、活動報告でhタグが『使いやすいか』も疑問なんだ。hタグはこんな感じになる」

・゜゜・*:.。..。.:*・゜゜・*:.。

白猿

「活動報告の通常の文字のサイズが最初の『HTMLタグの練習＊基本構造系』の文字だ。h1タグだと倍くらいの大きさになる。これだと大きすぎるんだな。スマホなどでは改行されてしまう」

黒猫

「h2とh3がちょうどよさそうだね。無理にh1は使わなくていいように思う」

白猿

「h1を使わずに、いきなりh2を入れるのはHTMLの文法上ではおかしいんだ。h1を使わずに見出しを飾るなら別のタグを使ったほうがいい」

黒猫

「hタグは使いどころが難しそうだね。ところで、さっきのdivタグやspanタグの説明で『タグが意味を持たない』っていうのはどういうことかね」

白猿

「タグってのはHTMLという文法で書かれている。h1タグは『見出し』と決まっているけど、divタグやspanタグは何に使ってもいいんだ。hタグを見出し以外に使っても誰も困らないけど、文法上はおかしいってことになる」

黒猫

「divタグもspanタグは文字の大きさを設定できるんだよね。それらのタグで『見出し』を作ればいいんだね」

白猿

「そういうこと。以前に説明したbタグでもいいんだ。見出しを『<b>■執筆状況</b>』ってやれば、ここが太字になる。ただしbタグも『見出し』という意味はないんだ」

黒猫

「意味に合わせたタグを使った方がいい、っていう考え方もあるんだっけ」

白猿

「そうそう。divタグやspanタグやbタグなどは他の手段がない場合に使うもので、本来は『見出し』の意味のhタグを使うべきという意見もある。Webデザイナーを目指すとかHTMLの資格取得を考えている場合は、そのへんも気にした方がいいかもな」

黒猫

「活動報告で書くだけなら、細かい文法やタグの意味まで知る必要はなさそうだね」

白猿

「じゃあ、次はspanタグの説明をしよう。spanは長さの意味の単語だな。日常でも作業期間などをスパンって呼ぶこともあるかもな。以下は使用例だ」

・゜゜・*:.。..。.:*・゜゜・*:.。

[記事の入力内容]

囲んだ文字を<span style="color:green;">緑色</span>にする

・゜゜・*:.。..。.:*・゜゜・*:.。

[記事の表示例]

・゜゜・*:.。..。.:*・゜゜・*:.。

白猿

「こんな風に<span></span>で挟んだ箇所の文字に効果をつけられる。上の例ではstyle属性で色を指定している」

黒猫

「さっきの説明では文字の大きさも指定できるんだよね」

白猿

「うん。でも、ここでは細かい説明は省略する。次にdivタグを説明しよう。divisionという分割という単語の略だ。ある範囲をまとめて、効果をつける感じだな。以下は使用例だ」

・゜゜・*:.。..。.:*・゜゜・*:.。

[記事の入力内容]

<h1>■最近読んだ小説<h1>

<i>アホリアＳＳ</i>さんの短編『<B>桜並木の青い猫</B>』を読みました。

猫が動いててビックリしました。

</div>

・゜゜・*:.。..。.:*・゜゜・*:.。

[記事の表示例]

・゜゜・*:.。..。.:*・゜゜・*:.。

黒猫

「さっきのspanタグでは文字の一部だけ変化させたけど、divタグは複数行に効果があるのかな」

白猿

「そうとも言えるけど、『そのページの中のある範囲』に効果をつけるものだ。今回は色を変えただけだけど、divタグでは文字に枠をつけたり、枠内の色を変えることもできるんだ」

黒猫

「なんだか便利なタグに見えるけど、覚えるのが大変そうだね」

白猿

「では今回の知識をふまえて、『割烹エディター』で記事を飾るものを紹介しよう。黒猫さんも割烹エディターを開いてくれ。ここのあとがきの下でもリンク張ってるから、そっちからでもいいぜ」

・゜゜・*:.。..。.:*・゜゜・*:.。

『割烹エディターのURL』

https://k-editor.com/

・゜゜・*:.。..。.:*・゜゜・*:.。

[割烹エディターのサイト：トップ画面]

・゜゜・*:.。..。.:*・゜゜・*:.。

黒猫

「ふむ。吾輩も開いたよ」

白猿

「黒猫さん。画面の『おしながき』『単品』の下の『カラー文字』をクリックしてみよう」

・゜゜・*:.。..。.:*・゜゜・*:.。

[割烹エディターのサイト：『カラー文字』ツール]

・゜゜・*:.。..。.:*・゜゜・*:.。

[割烹エディターのサイト：『カラー文字作成くん』]

・゜゜・*:.。..。.:*・゜゜・*:.。

黒猫

「吾輩もこれは見たことあるよ。文字の色を変えるものだね」

白猿

「では、実際の使い方を紹介する。『サンプル文字』を別の文字に書き直してみよう。例えば『ギャグもまた真なり』と書いてみるぜ」

・゜゜・*:.。..。.:*・゜゜・*:.。

黒猫

「書いた内容は、サンプルの下に青字ででたね」

白猿

「初期設定では文字色が青になっている。別の色にも変更できるぜ。ではサンプルの下の『押すとなろう用に変換される』をクリックしてみよう」

・゜゜・*:.。..。.:*・゜゜・*:.。

※見やすくするために、枠を小さく見せています。

・゜゜・*:.。..。.:*・゜゜・*:.。

[変換された文章]

<span style="font-size:14px;color:#1b8ef3;line-height:1.7;">ギャグもまた真なり</span>

・゜゜・*:.。..。.:*・゜゜・*:.。

黒猫

「spanタグに変換されたんだね。見た感じ、文字の大きさと色、行の高さが設定されているみたいだね」

白猿

「こいつをコピーして、活動報告の記事に貼り付ければ青い字で書けるんだ。<span></span>の中身だけ後で書き替えることもできるぜ」

黒猫

「文字を青以外のにする場合は『文字色』で変えられそうだね。行の高さも変えられるのかい？」

白猿

「line-heightで行の高さを変えられる。というより行の高さを設定することで『行間』、つまり他の行との間隔を変えてるな。文字色の下の『詳細設定』で設定できるぜ。『割烹エディター』のサイトでは、こんな感じで部分的にタグを作ってくれるツールがそろっているんだ。今紹介した『カラー文字作成くん』以外をもう１つ紹介しよう。黒猫さん。割烹エディターの入口に戻って、『おしながき』『単品』の下の『見出しデザイン』をクリックしてみよう」

・゜゜・*:.。..。.:*・゜゜・*:.。

[割烹エディターのサイト：『見出しデザイン作成くん』]

※見やすくするために、余白や枠を小さく見せています。

・゜゜・*:.。..。.:*・゜゜・*:.。

黒猫

「『見出しデザイン作成くん』に入ったよ。これは記事の見出しを装飾するものだね」

白猿

「その通り。では画面の『見出し文』の『見出し』の字を『■執筆状況』に書き替えて、メニューをいじってみよう。ある程度、変えたらサンプルの下の『押すとなろう用に変換される』ボタンをクリックだ」

・゜゜・*:.。..。.:*・゜゜・*:.。

※見やすくするために、余白や枠を小さく見せています。

・゜゜・*:.。..。.:*・゜゜・*:.。

[変換された文章]

・゜゜・*:.。..。.:*・゜゜・*:.。

黒猫

「こんどはdivタグに変換されたんだね」

白猿

「divタグでは、文字だけでなく枠の設定ができるんだな。『割烹エディター』を使うとこんな感じで、おしゃれな見出しを簡単に作れるわけだ」

黒猫

「『見出しデザイン作成くん』って、見出し以外に使えそうだね」

白猿

「うん。字を枠で囲むツールとして使うこともできる。『詳細設定』を押すとリンクの設定もできるから、他の小説に飛ばすボタンにもできるんだ。今回紹介した『カラー文字作成くん』『見出しデザイン作成くん』の２つだけで、活動報告がだいぶ変わるぜ」

黒猫

「タグを覚えなくても『割烹エディター』があれば何でもできちゃうかもね」

白猿

「そうかもね。ただタグの意味がある程度わかっていると、便利なこともあるぜ。今回説明したspanタグやdivタグで、一回使えばタグで挟まれた文字を書き替えるだけで、別のところで流用できる。style属性の中の数字を変えれば、文字の大きさや枠の余白なども変えられるぜ」

黒猫

「この割烹巻物は、何を目指すのかな。HTMLのタグをマスターすることではなさそうだけど」

白猿

「どっちかというと超初心者向けかな。タグってこういうものだよ。というイメージだけ覚えてもらって、実際は割烹エディターを使ってもらおうと思うぜ」