はてなブログ の執筆は ” Markdown ” で行えばだいたい間に合うのですが、html も併用すれば出来る事もかなり増えます。ということで、ブログ執筆に役立ちそうな hrml をメモしておくことにします。とは言え、HTML5 では廃止されたタグなども使っていますし、今回の記事は全くの個人的なメモですので読みにくさなどはご容赦を。CSS も勉強しなくちゃいけないんですがねぇ･･･。
■ 文字修飾
- フォントサイズの指定
<span style="font-size: フォントサイズ;">ここに本文</span>
フォントサイズは「px（ピクセル）」「em（現在使用中の標準フォントを ” 1 ” とする単位）」「%（標準フォントのサイズに対する倍率）」などで指定可能。
【 html 実行結果（％ で指定した例）】
- 文字色変更
<span style="color: （色名またはカラーコード）;">指定した色</span>
色名は ” red ” ” blue ” ” green ” などで指定。カラーコードとは RGB値のことで、「#RRGGBB（赤赤緑緑青青）」の 16進数 6桁の形式で指定。「#ff0000」「#00ff00」のように指定する。RGB値を調べるには以下のサイトが便利。 【 html 実行結果 】
- 「em」と「strong」、「bold」タグの違い
<em>本文</em> <strong>本文</strong> <b>本文</b> <i>本文</i>
HTML5 では <em> タグが「強調」の意味を持つタグで、<strong> は「重要性」を示すタグと使い分けされているそうです。また、<b> タグには太文字としての意味は無くなり、単に見た目を変えるタグとして扱われるそうです。また、<i> タグで囲えばイタリックになりますが、こちらも見た目を変えるだけのものです。但し、どれを使っても現在は SEO に対する効果は特に無いとのこと。
【 html 実行結果 】 【 html 実行結果 】
- 打ち消し線（「s」タグ）
<s>打ち消したい文章</s>
Strike-through（線を引いて消す）という機能を持つタグで、元の文章は残しておきたいけど訂正はしたいという時に便利。
【 html 実行結果 】
■ テキストボックスの表示
<textarea>本文テキスト</textarea>
ブログ記事内に複数行のテキストボックスを表示させることが可能。
【 html 実行結果 】
<textarea cols="横幅" rows="行数" name="名前">テキスト本文</textarea>
のようにテキストボックスの大きさも変えることが可能。
横幅 80、行数 2 でテキストボックスを作る場合。
<textarea cols="80" rows="2" name="名前">テキスト本文</textarea>
【 html 実行結果 】
テキストボックス内の文章は削除したり追記したり出来る状態なので、読み取り専用にしたい場合は ” readonly ” 属性を加える。
<textarea cols="60" rows="2" name="名前" readonly>テキスト本文</textarea>
【 html 実行結果 】
- 汎用ブロック要素を使った強引なテキストボックス作成例
<div style="border: solid 3px #000; width:680px; margin: 1em; border: solid 3px #faebd7; background-color: #fffaf0;"> <p style="color:black; margin :1em;"> サンプル文章</p> </div>
サンプル文章
■ ハイパーリンク設置
<a href="（URLアドレス）">本文テキスト</a>
このブログにリンクを張るのなら
<a href="https://chateau-vulpes.com/">このブログへ</a>
とすれば
のようにテキストからのハイパーリンクが設置される。
■ コメントアウトの記述方法
<!-- （コメントアウトしたい本文） -->
「<!-- 」と「 -->」で囲ったコメントがブログ上で表示されなくなります。途中改行も自由自在。個人的な注釈やメモを書いておくのに便利ですが、html のソースコードを表示すれば容易に見ることが出来てしまいますので、重要な情報は記述しないようご注意を。
【 html 実行結果 】
この上の行にコメントを書いているのですがコメントアウトされて表示されません。
■ 折りたたみタグ
<details><summary>（文章の要約）</summary>（折り畳む文章）</details>
「details」タグは、普段は非表示ですが、ユーザーが詳細表示をしたい時だけ詳細が表示されるというタグです。通常は「summary 要素」で記述された概要部分だけが表示されますが、読者がその概要部分をクリックすると詳細が表示されます。
【 html 実行結果 】
（ここをクリック！）
（折り畳まれた文章）
上記の「（ここをクリック！）」というところをクリックすると折り畳まれた文章が表示されます。
■ 「ボタン」の設置方法
<button>ボタン</button>
「button」タグでページ内にボタンを設置することが可能です。
【 html 実行結果 】
ボタンを押すと別タブでリンク先のページに移動させるには･･･
<button onclick="window.open('URL')">ボタン</button>
URL にうちのブログのトップページを指定してみる
⬅ 押すと当ブログのトップページが別ウインドウで開く同じタグ内でページ移動させるには･･･
<button onclick="location.href='('URL')'">ボタン</button>
（非推奨）
･･･ですが、ブラウザの方でブロックされるかも知れないので別ページで開くようにした方が無難。横幅 20文字分、縦幅 5文字分、背景色と文字色を変えた別ウインドウで開くボタンを設置してみると･･･（今回色の変更はカラーコードで）
<button style="background-color: #7fbfff; color: #ffffff; width: 20em; height: 5em;" onclick="window.open('URL') "><b>ボタン</b></button>
■ 画像と動画の貼り付け
はてなブログ へ html で画像や動画を貼り付ける方法については以下の記事にて整理し直していますので、そちらを参照下さい。
■ Apple の App Store と Google Play のアプリバッジを貼る方法
以下の記事にて。
他にも何か便利な方法が見つかれば適宜追加予定。
