3/13

ＨＴＭＬについて説明してみる

こんにちは！とある割烹芸人のテンプレートを連載し始めて色々なテンプレートを作るのが楽しくて色々やっているうちにすぐ時間がっていることに気付いたりPC作業が多くなってしまった疲れからか、不幸にも黒塗りの高級車に追突してしまう。後輩をかばいすべての責任を負った三浦に対し、車の主、暴力団員谷岡が言い渡した示談の条件とは…。

ということで、こんにちは夕月です。とある割烹芸人のテンプレート三回目です。

……ん？　上のあれって何って？

あぁ黒塗りテンプレートですね。

疲れたら不幸なことに黒塗りの高級車に追突されて異世界へ転生してしまうというお話です。

お気になさらず。

そんなわけで、今回はHTMLの基本について説明しますよ！

この作品では、

1.　活動報告でのHTMLの基本的な使い方について

2.　使用できるHTMLタグの検証

3.　面白テンプレートを作成していく

という流れで進めようと思っています。

まぁ週1くらいのペースでちまちまと進めていきますので、待てない！

という方は自分でお調べしていただけると助かります。

というのも最近は色々とやりたいことがあってなかなか手が回らないのですよ。

ごめんね。

ということで今回は活動報告でのHTMLの基本から学んでいきます。

まず最初に言っておきますが、HTMLの詳細については突っ込みません。

あくまでも活(・)動(・)報(・)告(・)で(・)使(・)う(・)た(・)め(・)の(・)説(・)明(・)しかしません。

正直なところ私もそんな詳しいわけでもないし、時間もないので、使うための説明のみで進めていきます。

詳細が知りたい方はググるなどしていただけたらと思います。

ということで、予防線も張ったので、説明しますよ！

まず、HTMLを使う大原則は、<>で挟むことです。

<XXXXX>や</XXXX>がたくさん使われます。

これらは『タグ』と呼ばれます。

<>内は自分が装飾したいことに対応した言葉を入れていきます。

そうするとどうなるかというとこんな風になります。

※画像はイメージです。

※かっこよくするというタグはありません。

どうです？

あれ、私また何かやっちゃいました？

冗談です。

こんな風にタグを使って装飾していくわけです。

いろんなタグが出てきますが、よく使うタグは限られるのでそれだけ覚えればいいですね。

基本的には＜＞＜/＞だけなのですが、中には属性を指定できるタグもあります。

例えばリンクタグ。

これは<a></a>が基本ですが、その中に”href”を指定できます。これはリンク先のURLを指定するものです。

他にも”taget”とか色々と属性を指定できます。

また一つで完結するタグもあります。

画像を表示するタグは<img src="" />で、終了タグがありません。

開始タグに/が含まれていますね。

こういったタグもありますのでお気を付けください。

ということで、今回の説明は以上です。

＜＞＜/＞で挟むということでしたね。

よく使うタグを下に置いておくので、コ(・)ピ(・)ペ(・)し(・)て(・)自(・)分(・)の(・)活(・)動(・)報(・)告(・)に(・)貼(・)り(・)付(・)け(・)て(・)みてください。

どんなふうに見えるかわかりますよ。

なおサンプルは、下のリンクに置いておきます。

割烹サンプル1です。

なお、ＰＣ版、スマホ版で有効になるタグが違います。

それも後々説明します。

■リンクタグ

<a href="https://syosetu.com/blog/list/">割烹芸人を発掘する</a>

※""にリンクしたいＵＲＬを書く

■文字色を変更する

<span style="color:#58ACFA;">青くなっちゃった！</span>

■文字を大きくする

<span style="font-size:1.5em">でっかくなっちゃった！</span>

■文字を太くする

<b>太っちゃった……</b>

■画像を表示する　

※自分の画像を表示させる場合はみてみんアカウント必須です。他人の画像も表示できます。

※画像の詳細は次回説明します。

■背景を変える

<span style="background-color:#CEF6CE;">背景が変わった……</span>

<div style="background-color:#CEF6CE;">背景が変わった……</div>

■アンダーバーを引く

■取り消し線を引く

<s>訂正するんだから何を書いてもいいよね！　えっと私は……うわ、なにをす</s>

■下付き文字

HNO<sub>3</sub> ＋ 3HCl ⇒ NOCl ＋ Cl<sub>2</sub> ＋ 2H<sub>2</sub>O

■上付き文字

3 以上の自然数 n について、x<sup>n</sup> + y<sup>n</sup> = z<sup>n</sup> となる自然数の組 (x, y, z) は存在しない

■見出しタグ

■段落

<p>段落作るぞい</p>

■リスト

<li>なんまいだー</li>

</ul>

※PC版のみ見えるみたいです。

■水平線

<hr />

※fontタグはHTML5.0では非推奨なのでできたら使わないようにお願いします。

HTML参考エッセイ
1.	小説の背景を華やかにしませんか？ついでにコピペで使えるHTMLタグテンプレ作ってみた！
2.	「小説家になろう」におけるＨＴＭＬタグの使い方について
3.	【割烹を彩る】需要があるみたいなので作ってみました
4.	検索機能と活動報告の活用　～新作発見の効率化を目指して～活動報告で使えるHTMLタグについて　１回目活動報告で使えるHTMLタグについて　２回目活動報告で使えるHTMLタグについて　３回目活動報告で使えるHTMLタグについて　４回目活動報告で使えるHTMLタグについて　５回目活動報告で使えるHTMLタグについて　６回目活動報告のテキスト配置について　１回目活動報告のテキスト配置について　２回目
5.	挿絵のつけかた
6.	【活動報告から小説へアクセスできるようにしたい】
7.	ランキングタグとかHTMLとか何だか全然分かんないって作者ちょっと来てみ。一番簡単なことだけ教えるから
8.	活動報告で試してみよう
9.	小説を書くルール、活動報告リンクタグ、画像挿入について　～必要最小限のメモ～
10.	リンクタグの作成・作者のリンク・みてみんの画像関係
11.	カラーコードを知らない作者へ（作者退会）

割烹参考
1.	割烹芸人になろう
2.	割烹サンプル1
3.	みてみん割烹サンプル2
4.	割烹サンプル3
5.	割烹サンプル4
6.	割烹サンプル5
7.	ブログ風テンプレート置き場
8.	チャット風テンプレート置き場
9.	バトン参考置き場