ぷらいべったーで使えるHTMLタグ　まとめ

ぷらいべったーを飾るタグをまとめた、自分用ページ。
コピペして使ってね。
対応形式が違うので、ぷらいべったーではおしゃれに見えます。

本ページのURLをお外に貼らないようお願いします。

基本

読まなくてOK。理解しなくてOK。
情報が欲しくなったら読むところ。

▼半角の開始タグ＜＞と、終了タグ＜/＞で囲います。
　囲った間の文章を飾れます。

▼aタグ：アンカータグ。リンクを扱います。他のWebページに飛んだり、ページ内の目次を作ったり。
▼spanタグ：色など色々指定できます。だいたいこれでOK。
▼divタグ：色など色々指定できます。ボックス扱い。

divとspanの違い
　あまり変わりません。
　divタグは前後が勝手に改行されます。開始タグと終了タグの間のものを箱に入れて、ページにどーんと置くイメージです。
　spanタグを「span style="display:block;なんちゃら」にすると、divタグと同じ挙動をします。
　divタグを「div style="display:inline;なんちゃら」にすると、spanタグと同じ挙動をします。
　※こちらの解説が分かりやすいです。

要素
▼padding：枠の内側の余白
▼margin：枠の外側の余白
▼border：線の指定
▼border-radius：角の丸み
▼カラーコードは大文字小文字の区別なし

要素+α
▼margin-top：枠外の余白　-上側だけ
▼margin-bottom：枠外の余白　-下側だけ
▼margin-right：枠外の余白　-右だけ
▼margin-left：枠外の余白　-左だけ
margin・padding・borderにつけられます。

線の指定
▼solid：1本線
▼double：2本線
▼dotted：ドット
▼dashed：ミシン目のような破線

padding:10px 5px 4px; のように書くと
▼値を1つ書くと：[上下左右]に適用されます。
▼値を2つ書くと：書いた順に[上下][左右]に適用されます。
▼値を3つ書くと：書いた順に[上][左右][下]に適用されます。
▼値を4つ書くと：書いた順に[上][右][下][左]に適用されます。
▼paddingとmarginにはマイナス値も書けます。やりすぎると見た目が崩れます。

影（box-shadow）
▼1つ目の値：水平方向＝X軸　右への移動距離　-で左へ
▼2つ目の値：垂直方向＝Y軸　下への移動距離　-で上へ
▼3つ目の値：ぼかし距離　影の端をどれくらいぼかすか　負の値はNG　0はくっきり
▼4つ目の値：影の大きさ　値が大きいほど影も拡大　負の値は影が小さい

色タグ
▼#cccccc（灰色）のような同じ英数字のみのタグは #ccc と3文字に略せます。
▼#cc000 と #CC000 は同じ。英字は大文字小文字の区別なし。

複合のタグたち

ページタイトル

<div style="font-size:2.1rem; padding:10px; border-bottom:solid 2px #ccc;">◆</div>
◆にページタイトルを入力

<div style="border-bottom:solid 2px #ccc;"></div>
単に線を引きたいときはこれだけでOK。

見出し

注意事項（赤い点線のアンダーライン）

グレー背景

グレー背景（内側の余白あり）
改行もできます

影つき枠

見出し　背景色つき

▼background:#222; 背景カラー
▼color:#fff; 文字カラー

下側の改行ぶんを少し詰めた

▼background:#222; 背景カラー
▼color:#fff; 文字カラー

見出し　線形グラデーション

▼background: linear-gradient(15deg, #d40000赤, #fff白)
　背景：線形グラデーション(角度はマイナス値もOK, #カラーコード, #カラーコード)

▼border-radius:4px;
　角の丸み。数字が大きいほど丸い。この部分を消すともちろん四角に。

私が実際に使ったことのある
眩しい空をイメージしたグラデーション背景。

▼色はいくつでも指定できるっぽい。
　background: linear-gradient(角度deg, 1色目位置%, 次の色位置%, 次の色位置%);
　等間隔にしたいなら位置％は略してOK。

見出し　円形グラデーション

テキスト色をグラデーションにする
太字にするとこんな感じ

▼15deg：グラデの角度
0degは水平で、値を上げると時計回りに傾いていく。-の値で逆回転する。

▼カッコ内の #★：カラーコード
1つ目が下のカラー＝0～180度までは左側のカラー。2つ目が上のカラー＝180度までは右側のカラー。

太字タイトルいい感じ
改行もできます

▽太字タイトルの折りたたみ▽ ここをクリックすると

枠線つきで詳細を表示
改行もできます
再クリックで閉じます

<details><summary><b>ここをクリック</b></summary><div style="padding:4px 8px; border:1px dotted #333333;">詳細な情報</div></details>

▽太字タイトルの折りたたみ▽ ここをクリックすると

領域展開！
詳細が表示されます
改行もできます
再クリックで閉じます

<div style="padding:9px 14px; background:#f5f5f5; border-left:solid 10px #0B3A5A;"><details><summary><span style="color:#0B3A5A;"><b>▽太字タイトルをクリックすると▽</b></span></summary>領域展開！</details></div>

【リンク】アンダーラインごと色変え太字

▼「★」URLを入れる
▼「style="color:#カラーコード;」色を変える
▼「style="text-decoration:underline;」最初からアンダーライン
▼「target="_blank"」新しいタブで開く
▼「rel="noopener noreferrer"」
　リンク先にリンク元（＝今いるこのページ）を参照させない。
　何のために入れているかは、こちらのページが詳しいです。
▼コツ：aタグと他タグを併用するなら、aタグを外側につける。spanタグなどはaタグを超えられない場合があります。
　つまり＜a～＞＜span～＞＜/span＞＜/a＞

▼アンダーラインなしだとこうなります
　ぷらいべったーなら、カーソルをかざしてからアンダーラインが表示されます。
　このBloggerなら、設定の関係でカーソルをかざしてもアンダーラインが出ません。

単体のタグたち

リンク（クリックすると別窓で開く）
<a href="★" target="_blank" rel="noopener noreferrer">◆</a>
★にURL

太字
<b>◆</b>

イタリック体【マリア　Maria】
<i>◆</i>
日本語には適用されないことが多い。

文字のサイズを変える
<span style="font-size:★px;">◆</span>
★にフォントサイズ

▼px 以外に rem で指定もできます。
　pxとremの違い：こちらの解説が分かりやすいです。

文字色を変える
<span style="color:#★;">◆</span>
▼「★」にカラーコード
▼【WEB色見本】色の名前 / カラーコード
 ▼萬色カラーネーム＆コードサンプル

アンダーラインたち

underline：文字と線が重なる。
border：文字と線が重ならない。

1本線　こんな感じ
<span style="text-decoration:underline;">◆</span>
1本線　こんな感じ
<span style="border-bottom:1px solid;">◆</span>

2本線　こんな感じ
<span style="text-decoration:underline double;">◆</span>
<span style="border-bottom:1px double;">◆</span>

点線　こんな感じ
<span style="text-decoration:underline dotted;">◆</span>
<span style="border-bottom:1px dotted;">◆</span>

ミシン目のような破線
<span style="text-decoration:underline dashed;">◆</span>
<span style="border-bottom:1px dashed;">◆</span>

波線　こんな感じ
<span style="text-decoration:underline wavy;">◆</span>
ぷらいべったーでは、border指定だけは波線が出ませんでした。

1本線　太さ3px　線だけ色変え
<span style="text-decoration:underline 3px #★;">◆</span>
<span style="border-bottom:3px solid #★;">◆</span>

1本線　字ごと色変え
<span style="color:#★; border-bottom:1px solid;">◆</span>

蛍光ペンで線を引こう
<span style="background:linear-gradient(transparent 70%, #ffc037 70%);">◆</span>

蛍光ペンで線を引こう
<span style="background:linear-gradient(transparent 60%, #ffc037 60%);">◆</span>

蛍光ペンで線を引こう
<span style="background:linear-gradient(transparent 50%, #ffc037 50%);">◆</span>

蛍光ペンで線を引こう
<span style="background:#ffc037;">◆</span>

~~打消し線~~
<del>◆</del>

センタリング

右寄せ

背景色

タイトル囲い線

囲い点線
改行もできます

細めの囲い点線
改行もできます

孤影悄然こえいしょうぜん
<ruby>漢字<rt>ルビ</rt></ruby>

行間を210%に広げる
次の行
例たとえばルビを振ふったときに使つかいます。
<span style="line-height:210%">◆</span>

ここをクリックして
 ここに飛ぶ

2は半角英数字で、対応した（＝同じ半角英数字を入力した）タグに飛ぶ。
#2なら2に飛ぶし、#a10ならa10に飛ぶ。
これでページ内目次が作れる。

折りたたみ（ここをクリックして）

詳細を表示
改行もできます。
再クリックで閉じます。

<details><summary>ここをクリック</summary>詳細な情報</details>

ぷらいべったーへのインライン表示

▼画像挿入
1、ぷらいべったーに画像投稿
2、公開ページのURLをコピペ（非公開でもOK）
3、先頭のhttpsをembedに変える
4、画像を挿入したいところに、変えたURLをコピペ

▼ツイート挿入
1、ツイートURLをコピペ
2、先頭のhttpsをembedに変える
3、挿入したいところに、変えたURLをコピペ
埋め込み表示できます。

▼YouTube動画
1、動画のURLをコピペ
2、先頭のhttpsをembedに変える
3、挿入したいところに、変えたURLをコピペ
埋め込み表示できます。

参考にさせていただいたサイト様

▼＜a＞＜/a＞簡単なタグ説明
　リンク

▼＜b＞＜i＞＜ruby＞簡単なタグ説明
　太字/斜体/ルビ

▼＜span＞フォント基本編
　大きさ/色/太字/斜体

▼＜span＞テキスト編
　文字間隔/下線/打消し線/行間

▼＜span＞中央ぞろえ・右寄せ・左寄せ
　センタリング/右寄せ

▼＜span＞ぷらいべったー装飾覚え書き
　背景色/囲い線/下線/左に太いライン/マーカー線

▼＜div＞枠をつける - HTMLのお勉強
　さまざまな囲い線

▼＜div＞＜span＞かわいい囲み枠デザイン
　さまざまな囲み枠

エスケープ方法

本ページの編集画面を見られる私にしか分からないメモです。

半角の「＜」→「<」
半角の「＞」→「>」

本来のHTMLタグの機能を持たせず、ただの記号として表示できる。
なお、ぷらいべったーでは効かない。

検索エンジンの追跡を拒否する設定により、検索してもこのページは出ません。

ぷらいべったーで使えるHTMLタグ まとめ

ぷらいべったーで使えるHTMLタグ　まとめ