デザイン：タイトル塗り×背景なし×枠線（シンプル）

配色は、補色/トライアド/スプリット/コンプリメンタリ/類似色/チント/シェードを意識しつつ、読みやすさに配慮。さじ加減が悩ましい..。

<! ----- HTML ----- >
<div class="decorative-box-77">
<p class="box-title-77">
<i class="fa-solid fa-clipboard"></i>タイトル</p>
<div class="decorative-box-content-77">
<p>文章とか入力</p></div>
</div>

/* -----CSS----- */

.decorative-box-77 {
    max-width: 600px;
    margin: 2em auto;
    background-color: #fff;
    border-radius: 12px;
    border: solid 3.5px #b1e0fd;
}
.box-title-77 {
    margin: 0;
    padding: 0.3em 1em;
    text-align: center;
    background-color: #b1e0fd;
    border-bottom: solid 3.5px #b1e0fd;
}
.decorative-box-content-77 {
    padding: 0 1em;
}

バリエーション

これは横スクロールレイアウト。マウスドラッグ+スクロールスナップも合わせて導入。
スライダーでも同じような動きは再現できるが、こちらがスマート。

デザイン：タイトル塗り×背景塗り（リッチ）

背景ベタ塗りバージョン。ボックス下端はアクセントライン。

バリエーション

ここは選択切り替え型のレイアウト。めっちゃ省スペース。タブ機能をCSSでカスタムのうえ実装。アニメーションの追加も可。切り替え時、ふわっとさせたり、バイーン、シュッ、ポヨンとか..。

選択切り替え型のレイアウト。めっちゃ省スペース。タブ機能をCSSでカスタムのうえ実装。

アニメーションの追加も可。切り替え時、ふわっとさせたり、バイーン、シュッ、ポヨンとか..。

デザイン：タイトル塗り×背景塗り×アイコンアニメ（スーパーリッチ）

ボックスのデザインはHTMLの構文に１行書き足し、カラーチェンジ/アニメーション/アイコン/背景画像も追加できる着せ替え方式。つまり普通。

バリエーション

個性豊かすぎ？練習ですから..。

デザイン：吹き出し風（解説レイアウト）

画面の幅に合わせ、レイアウト自動シフト（1カラム/2カラム）レスポンシブデザインの真骨頂♪

メルヘンブルー

メルヘングリーン

メルヘンオレンジ

メルヘンレッド

メルヘンブラック

デザイン性担保を目的として、文章が一定量超えると「インラインスクロール」する仕様。

文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章入力。

披露シマシタ。

短文入力はこんな処理(上端合わせ)

短文入力はこんな処理（PC2カラムで、上端合わせ）

短文入力はこんな処理(中央合わせ)
キャプション部分も含むので、少しだけズレて見えるかも。

短文入力はこんな処理（PC2カラムで、キャプション含めて中央合わせ）

短文入力はこんな処理(キャプション含めず中央合わせ) 気になったので調整しました。

短文入力はこんな処理（PC2カラムで、キャプション含めず中央合わせ）

短文入力はこんな処理(下端合わせ)

短文入力はこんな処理（PC2カラムで、下端合わせ）

デザイン：ナンバリングアイコン＋サブリスト×ボックス

項目に順序が発生する場合、ナンバリングを使用。ビフォーはマークアップに「ol・li」タグを使わない
“なんちゃって”リスト

Webにおける箇条書きリストのルール
「文頭記号の後ろで文章を折り返す」自動整形のこと。

些細ささいなことですが大事。
えっ？分からない？

デザイン：アイコン+ボックス

制作しといてナンです。2種類もあれば十分かと思うが、バリエーションを拡充。装飾ボックスと組み合わせると使いやすい。

バリエーション7種

使うのか？短文対応のショートボックスも用意。

使うかな？短文対応のショートボックスも用意。

デザイン：あらゆるニーズに対応できるニュートラルな解説レイアウト（アニメーション付き）

デザインタイプはいくつか分かれるが、画面左に時系列を示すレイアウトが、直感的に把握しやすい。
Webっぽくない？

【how to】とある美容室の予約からお店までの行きかた

※実在したフィクション

STEP1

美容師の予約

LINEで担当美容師と直接コンタクトを図り、要望を伝える。

情報に誤り無きこと

1. コースを伝える。

   例）カット or カラー or パーマ

2. 希望日時を伝える。

   例）〇月〇日の〇時～〇時に仕上がる時間帯で

3. 美容師からの返答確認後、予約確定の正式依頼をする。

   例）〇月〇日の〇時に伺います。

4. 回答を確認する。

予約はこれでOK。 あとは当日に備えるヾ(•ω•`)o

STEP2

自宅から最寄り駅へ

高尾駅（京王線）まで歩きましょ。 ～所要20分

STEP3

Scroll

電車で三軒茶屋へ

推奨ルート。

電車経路

1. 高尾駅

   新宿行きに乗車 ★5番ホーム

2. 北野駅

   新宿行き「特急」に乗り換え ★3/4番ホーム

3. 明大前駅

   京王井の頭線、渋谷行きに乗り換え ★4番ホーム

4. 渋谷駅

   田園都市線、長津田行きに乗り換え

5. 三軒茶屋

   降車駅

高尾から三軒茶屋まで、 ～所要60分チョイ。

特記事項

• 北野駅以外、行き先を確認のうえ、入線する電車ならばどれでも乗車OK（特急・準急とか指定なし）
• 明大前駅の渋谷方面は常時激込み..。乗れないときもあるので注意（速やかに列に並ぶ）
• 渋谷駅での乗り換えは、一度構外（地上階）へ出て、地下道から田園都市線に向かいます。

時間とお財布に余裕を持ちましょう。

STEP4

三軒茶屋駅から美容室へGO

GOOLはすぐソコ。 南口から徒歩7分。

もはやGマップなしでお出かけできません。便利の極み。

GOAL

乙デス

唯一の弱点HTMLの構文が難読難解。
とはいえ、アメージングなユーザー体験を目指してヤルしかない

<! ----- HTML ----- >
<p class="lead-lines-on-both-sides trigger">【how to】とある美容室の予約からお店までの行きかた</p>
<p class="tr sf-3 fw">※実在したフィクション</p>
<div class="stepbar"><!-- ステップバー　START　-->

<div class="stepbarwrap trigger"><!-- 1段目ステップエリア -->
<div class="steplabel">
<span class="stepcircle"></span>
<span class="line-start"></span>
<p class="stepnumber">STEP1</p></div><!-- ステップ名 -->
<div class="stepinside"><!-- ↓ 内包コンテンツ-->  

<p class="title">美容師の予約</p><!-- ステップタイトル-->
        
<p><i class="fi-brands-line cs-5"></i>LINEで担当美容師と直接コンタクトを図り、要望を伝える。</p>

<div class="box border-style color-select">
<div class="title">
<i class="fi-rr-memo-circle-check"></i>情報に誤り無きこと</div>
<div class="content">
<div class="overflow-sign"></div><!-- bakafon対策 -->

<ol class="list-numbering">
<li>コースを伝える。
<p class="sub-list">例）カット or カラー or パーマ</p>
</li>
<li>
希望日時を伝える。
<p class="sub-list">例）〇月〇日の〇時～〇時に仕上がる時間帯で</p>
</li>
<li>
美容師からの返答確認後、予約確定の正式依頼をする。
<p class="sub-list">例）〇月〇日の〇時に伺います。</p>
</li>
<li>
回答を確認する。
</li>
</ol>

</div>
</div>

<p><i class="fi-tr-calendar-clock cs-4"></i>予約はこれでOK。 あとは当日に備えるヾ(•ω•`)o</p>

</div><!-- ↑ステップ内包コンテンツ-->  
<span class="stepline"></span><!-- ↑1段目ステップライン-->  
<span class="partition-line"></span><!-- 見切り装飾-->  
</div><!-- ↑１段目ステップEND -->                                    

<div class="stepbarwrap trigger"><!-- 2段目ステップエリア -->
<div class="steplabel">
<span class="stepcircle"></span>
<p class="stepnumber fade-down">STEP2</p></div><!-- ステップ名 -->
<div class="stepinside"><!-- ↓ 内包コンテンツ--> 
<p class="title">自宅から最寄り駅へ</p><!-- ステップタイトル-->  

<figure class="img-m">
<img width="270" height="167" src="https://self-traveling-thailand.jp/wp-content/uploads/train-station.svg" alt="駅のホーム" >
<figcaption>KEIO 高尾駅 ★5番ホーム</figcaption>
</figure>

<p><i class="fi-tr-walking"></i>高尾駅（京王線）まで歩きましょ。 ～所要20分</p>

</div><!-- ↑ステップ内包コンテンツ-->  
<span class="stepline"></span><!-- ↑２段目ステップライン-->  
<span class="partition-line"></span><!-- 見切り装飾-->  
</div><!-- ↑２段目ステップEND -->  

<div class="stepbarwrap trigger"><!-- 3段目ステップエリア -->
<div class="steplabel">
<span class="stepcircle"></span>
<p class="stepnumber fade-down">STEP3</p></div>

<!-- スクロールヒント -->
<div class="scroll-sign">    
<span class="text">Scroll</span>  
<span class="horizontal-bar"></span>
<span class="sphere"></span>
<span class="arrow"></span>
</div>

<div class="stepinside"><!-- ↓ 内包コンテンツ--> 
<p class="title">電車で三軒茶屋へ</p><!-- ステップタイトル-->

<div class="parallel-layout-scroll both-type" style="align-items: end"><!-- 並列レイアウト -->

<div class="flex-group">     
<p><i class="fi-tr-subway cs-5"></i>推奨ルート。</p>

<div class="box border-style color-select">
<div class="title"><i class="fi-rr-memo-circle-check"></i>電車経路</div>
<div class="content" style="background-image: url(https://self-traveling-thailand.jp/wp-content/uploads/train.svg);background-size: cover">
<div class="overflow-sign add-color"></div><!-- bakafon対策 -->

<ol class="list-numbering fw">
<li>
高尾駅
<p class="sub-list">新宿行きに乗車 ★5番ホーム </p>
</li>
<li>
北野駅
<p class="sub-list">新宿行き「特急」に乗り換え ★3/4番ホーム</p>
</li>
<li>
明大前駅
<p class="sub-list">京王井の頭線、渋谷行きに乗り換え ★4番ホーム</p>
</li>
<li>
渋谷駅
<p class="sub-list">田園都市線、長津田行きに乗り換え</p>
</li>
<li>
三軒茶屋
<p class="sub-list">降車駅</p>
</li>
</ol>
</div>

</div><!-- flex-group END-->    
</div><!-- 並列レイアウトEND--> 

<div class="flex-group">  

<p><i class="fi-tr-time-fast cs-5"></i>高尾から三軒茶屋まで、 ～所要60分チョイ。</p>

<div class="box border-style color-select">
<div class="title"><i class="fi-rr-memo-circle-check"></i>特記事項</div>
<div class="content">

<ul class="list-check">
<li>
北野駅以外、行き先を確認のうえ、入線する電車ならばどれでも乗車OK（特急・準急とか指定なし）
</li>
<li>
明大前駅の渋谷方面は常時激込み..。乗れないときもあるので注意（速やかに列に並ぶ）
</li>
<li>
渋谷駅での乗り換えは、一度構外（地上階）へ出て、地下道から田園都市線に向かいます。
</li>
</ul>
</div>
</div>

</div><!-- flex-group END-->
</div><!-- 並列レイアウトEND--> 

<!-- スクロール スルー対策 -->   
<div class="mobile-scrollbar adj-3"></div>
</div>

<p>※時間とお財布に余裕を持ちましょう。</p>

</div><!-- ↑ステップ内包コンテンツ-->   
<span class="stepline"></span><!-- ↑３段目ステップライン-->                                          
<span class="partition-line"></span><!-- 見切り装飾 -->
</div><!-- ↑３段目ステップEND -->  

<div class="stepbarwrap trigger"><!-- 4段目ステップエリア -->
<div class="steplabel">
<span class="stepcircle"></span>
<p class="stepnumber fade-down">STEP4</p></div>
<div class="stepinside"><!-- ↓ 内包コンテンツ--> 
<p class="title">三軒茶屋駅から美容室へGO</p><!-- ステップタイトル-->

<p><i class="fi-tr-walking"></i>GOOLはすぐソコ。 南口から徒歩7分！</p>

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d810.6028459644631!2d139.67367886365335!3d35.6422348170915!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6018f4a2549d8627%3A0xdef55c1f06a5aea8!2z44OZ44Or44OZ44G444Ki44O8!5e0!3m2!1sja!2sjp!4v1701937475272!5m2!1sja!2sjp" width="600" height="450" style="border:0; border-radius: 15px" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" title="google-map"></iframe>

<p><i class="fi-tr-face-monocle cs-4"></i>もはやGマップなしでお出かけできません。便利の極み。</p>

</div> <!-- ↑ステップ内包コンテンツ-->                                                  
<span class="stepline"></span><!-- ↑4段目ステップライン-->       
<span class="partition-line"></span><!-- 見切り装飾--> 
</div><!-- ↑4段目ステップEND -->                                                      
                                        
<div class="stepbarwrap trigger"><!-- 終段ステップエリア -->
<div class="steplabel">
<span class="stepcircle"></span>
<span class="line-end"></span>
<p class="stepnumber fade-up-jump">GOAL</p></div><!-- ステップ名 -->
<div class="stepinside"><!-- ↓ 内包コンテンツ--> 

<p class="title">乙デス</p>

<p>
唯一の弱点<i class="fi-tr-right fa-fw"></i>HTMLの構文が難読難解。<br class="pc tb">とはいえ、アメージングなユーザー体験を目指してヤルしかない<i class="fi-tr-face-vomit cs-3"></i>
</p>
      
</div> <!-- ↑ステップ内包コンテンツEND-->              
<span class="partition-line"></span><!-- 見切り装飾-->                                                  
</div><!-- ↑終段ステップEND --> 

</div><!-- ステップバーEND　-->

/* -----CSS----- */

リンク先参照されたし。

デザイン：背景がポップな配色の解説レイアウト（アニメーション付き）

カラフルだな..。

ハッピーフレーバー

※マネしないで下さい

STEP1

美容師の予約

LINEで担当美容師と直接コンタクトを図り、要望を伝える。

STEP2

自宅から最寄り駅へ

高尾駅（京王線）まで歩きましょ。
～所要20分

下段にも文章を挿入してあげると、デザインが整います。

STEP3

電車で三軒茶屋へ

高尾駅から三軒茶屋まで、
～所要60分チョイです。

STEP4

三軒茶屋駅から美容室へGO！

GOOLはすぐソコ。 徒歩4分！

ステップのコンテンツボリュームが多い場合、横にスクロールさせることもデキマス（省スペース化による、ユーザー体験向上）

STEP5

三軒茶屋駅から美容室へGOGO！

GOOLはすぐソコかも。 徒歩4分！

GOAL

三軒茶屋駅から美容室へGOGOGO！

GOOLはすぐソコかもしれない。 徒歩4分！

スベッたかもしれない。

デザイン：ナニがナンでも整然と整える解説レイアウト（アニメーション付き）

ごちゃついたら負け。

「how to」向け装飾手法

※時系列と関係ありません

レベル1

2カラム 短文（スマホは1カラム）

ナイスレイアウト！

この画像、54KBで超軽量。適切な「拡張子/サイズ/圧縮率」の選択で、オリジナルと遜色ナッシ。

レベル2

2カラム 長文（スマホは1カラム）

当サイトにおける実話

アップルのスマホ。初期状態で「スクロールバー」を表示しません。

ゴミです。

これではユーザーがスクロールコンテンツを見逃します。

おまけに日中はグレー。夜間は白。スクロールバーの色が、なぜか変化。

背景は白が基本です。

つまり、夜間スクロールバーは表示されません（見えない）

バカなんですかね？OS修正してください。

あっ！失礼！アップルさんに無理言ってスミマセン。

そもそもCSSを理解しないOS（不良品）でしたよね。

これまでiPhoneの表示崩れや動作不全、ずっと対処してきました。

ま、今回も自分で対策しますけど。

アップルショップで不具合みせれば、iPhoneくれるのかな(´・ω・｀)

..と、長文だとこんな感じ。

スクロールレイアウト＆インラインスクロール。省スペースで合理的手法ですが、普及しません。

Web業界のお荷物め！ガンバレアッポー！

こんな手のかかるOSですが、正常に動作する姿を見ると、嬉しいっす。

インテルCPUの見えない劣化問題は大丈夫なのだろうか..。おかげで、鬼スぺPCにも愛着がわきません。ワルテル。

レベル3

Scroll

2カラム（スマホは1カラム） 横スクロール ・ サブタイトル

➀サブタイトルとか補足

右へスクロール → → →

➁サブタイトルとか補足

右へスクロール シマシタ。

「how to系」でこの機能は欲しいところだが見かけない。合理的レイアウトですのに

➂サブタイトルとか補足

ナニもナイナイ。

配色変更もイージー。

レベル4

Scroll

2カラム（スマホは1カラム） 横スクロール ・ サブタイトル ・ キャプション

➀サブタイトルとか補足

右へスクロール → → →

➁サブタイトルとか補足

マタ 右へスクロールしました。

➂サブタイトルとか補足

アリガト。

CPUはこれくらいでカンベンしておく。

GOAL

総括

省スペース化に貢献。合理的レイアウト最高っす！

デザイン：メインコンテンツのAC（details/summary/js）

当サイトはh2見出し以下のコンテンツをマルッと格納。見たいコンテンツだけ見れる仕組み

理想は思わず操作したくなるデザインと機能。ここでいう機能はアニメーションのこと。
操作したことが視覚的に直感で伝わるようにしておきたい。

HTML・CSSのみでつくるアコーディオンメニュー8選

デザイン：質疑応答のAC（details/summary/js）

ACといったらコレ。開けたら閉じましょ。

detailsとsummaryタグで作るアコーディオンUI – アニメーションのより良い実装方法

デザイン：サブコンテンツのAC（details/summary）

状況により使い分け。アニメーションはカラクリ仕掛けっぽい動きを意識

ここぞって時に

使いやすさのたぶん理想

多目的なフルワイド

内包コンテナ連結+アニメーション

code（HTML/CSS/JS）コピーペッ

/* -----HTML----- */
/* -----CSS----- */
/* -----JS----- */

デザイン：横スクロール/クールテイスト

Excelで表作成は簡単。Webは複雑で難解 とはいえ、想像を形にするも一興。

命名、ハッピー4。RWD Table（コードペン） コードペンについて注意喚起オッ、いいネタあるじゃん！意気揚々コピペすると悲しい現実に直面します。

デザイン：1列目固定/横スクロール/クールテイスト

実用的なのはコチラ。1列目固定仕様。とはいえ、スマホの表示エリアは狭く「レスポンシブデザイン」には、創意工夫が必要。

下の表、PC表示領域でのスクロールは必要ナッシ。タイトル負けしたくなかったので、つい..。

モダン ブラウザ

デザイン：見やすい表の最適解！かもしれない（コーポレート風）

うっ、ひょーーっ。3日悩んだ結果こうなった。

PCにせよ、スマホにせよ、限られた画面サイズの中でいかに見やすく表示させるか腕の見せどころ！もはや腕というより思い入れの問題かもしれない。

とはいえ、ここをおろそかにする人は、コンテンツもおろそかにナルダロウ(ノ◕ω◕)ノ

驚きを詰め込みました。え、表示崩れ？

Scroll

やりたいこと最短距離

ゾウサンズ 三男
mini

次男と大の仲良し♪ちょっと不思議な男の子で、恥ずかしがりや。いつもどこかに隠れてることが多い。

さらに詳しく

出身地

タイ北部ナーン県

性別

オス

年齢

6歳園児
年長

好物

バナナ黄色いやつ。甘くてウマイ！
踏むと滑りMAX

画質とか

4K60fps HDR
120fpsスローモーション

驚異的なパワーを

ゾウサンズ 次男
SE

陽気な性格♪とっても弟思いの男の子で、元気いっぱい。お遊戯を三男としていることが多い。

さらに詳しく

出身地

タイ北部パヤオ県

性別

オス

年齢

9歳児童
小学3年生

好物

リンゴ赤いやつ。甘酸っぱい！
人に向かって投げてはイケナイ

環境とか

3Kきつい、きもい
くちゃ～い

その手に大きな可能性を

ゾウサンズ 長男
Pro

メルヘンハッピーな性格♪おっちょこちょいだけど、がんばり屋さん。チョウチョが、いつも周りを飛んでいる。

さらに詳しく

出身地

タイ北部ランパーン県

性別

オス

年齢

14歳青年
中学2年生

好物

パパイヤ黄色いやつ
ねっとり甘いがクセがある！

間取りとか

2K部屋2つ
キッチン1つ

未来対応のスピード

ゾウサンズ 三女
Rabbit

IQがとても高い♪好奇心旺盛な女の子で、目立ちたがりや。ペットの「ブサペガサス」を使役する。

さらに詳しく

出身地

タイ北部チェンラーイ県

性別

メス

年齢

7歳児童
小学1年生

好物

マンゴスチン実は宝石
加藤さんの大好物！

間取りとか

1LDK部屋1つ
キッチン1つ、リビング1つ

うっとりする美しさ

ゾウサンズ 次女
White Loli

ちょっとおませな女の子♪クールな性格で、お出かけが苦手。下僕の「ポンちゃん」を使役する。

さらに詳しく

出身地

タイ北部プレー県

性別

メス

年齢

12歳少女
小学6年生

好物

モモピンクのやつ
みずみずしく甘い！

間取りとか

2LDK部屋２つ
キッチン1つ、リビング１つ

すみずみまであなたらしく

ゾウサンズ 長女
Pro

面倒見の良い優しい性格♪しっかり者で、とっても賢い優等生。実は妹達の下僕とペットがうらやましい。

さらに詳しく

出身地

タイ北部ランプーン県

性別

メス

年齢

15歳大人
中学3年生

好物

メロン緑のやつ
濃厚な甘さ！

間取りとか

3LDK部屋3つ
キッチン1つ、リビング１つ

おしい！パーフェクトまで今一歩..。理想のイメージはできているが、スキルが追い付かなかった。
※リニューアル予定

デザイン：使いやすいタブ/シンプルモダン

序盤からチョイチョイ登場。ナニカの比較において便利な装飾手法。

アニメーションはイージングカーブがポイント。

いくつ気づきました？アニメーションは全部で6箇所！メンタル弱人間、最後まで見ないほうが良いかも..。

電動マトリョーシカって知ってます？そろそろ怒られそうだな。

ウ～フォ～。ウ～エフ、オォーーッ！もしかして、中の人バカなんですかね？

故障してないよね？頼むぞ!

画像下に薄っすら怪しい線がチラ見え..。ブラウザのレンダリングが苦しい模様。この手の不具合、will-changeプロパティで解消するパターンが多かったが、今回は敗北。 ※タブ外設置は問題ナッシ。ナント！AC（details/summary）へ移行後、直りました..。今夜は祝杯

デザイン：個性強めのタブ/スライダー追従/シンプルモダン

タブメニュー切り替え時、スライダーが追従。 え？だからナンだって？見ていて楽しいと思いますが。

タイのコンビニでも買える、メジャーなビール5選

シンハー

レオ

チャーン

タイガー

ハイネケン

SINGHA BEER(シンハービール)

総合評価：8.6

キレ（後味が残らない）

8.0

のどごし

8.0

ポップ感（苦味・香り・甘味）

10.0

値段（安い）

7.0

入手性

10.0

グラフがあるだけでそれっぽく！こういう「意味のある」演出を大切にしたい。
HTML・CSSで作るレーダーチャートのテンプレート4選

試し飲む？

LEO BEER(レオビール)

総合評価：9

キレ（後味が残らない）

9.0

のどごし

10.0

ポップ感（苦味・香り・甘味）

7.0

値段（安い）

9.0

入手性

10.0

ウッ、ヒョーーー。私が1番よく飲むビール。薄い味わいだが、水のようにサラリ飲みやすい。コンビニ5分飲みがオススメ。

コンチワーーース

CHANG BEER(チャーンビール)

総合評価：9.2

キレ（後味が残らない）

10

のどごし

8.0

ポップ感（苦味・香り・甘味）

8.0

値段（安い）

10

入手性

10.0

チャーーーン。フルーティーで酸っぱい。初めて飲んだとき、マズッと感じたが、慣れるとウマイ！ワインが守備範囲の人、きっと気に入るかと。値段も魅力♪

ヒーーハー

TIGER BEER(タイガービール)

総合評価：不明（失念）

キレ（後味が残らない）

5.0

のどごし

5.0

ポップ感（苦味・香り・甘味）

5.0

値段（安い）

5.0

入手性

5.0

TORATORATORA♪分かる人いるかな..。LEOは豹ひょうだが、こちらはTORA。実は購入したことアリマセン。次回の渡航でチェック！

ウェーーーイ

HEINEKEN BEER(ハイネケンビール)

総合評価：不明（失念）

キレ（後味が残らない）

5.0

のどごし

5.0

ポップ感（苦味・香り・甘味）

5.0

値段（安い）

5.0

入手性

10.0

ナニカを期待したあなた、すみません。こちらは飲んだことありますが、記憶にナッシ。値段高いな～..。くらいの印象。

ピャーーーッ

現状、この程度のスペースで閲覧できるが、タブ無しでは相当量下へスクロールさせられていたことだろう..。省スペースは正義！

デザイン：メリット×デメリット比較表（バージョンTab）

通称：デリメリ（え？）ここぞの訴求ポイントで活用したい。

タイ文字の学習

デザイン：使いやすいテキストリンク風モーダル

通称モーダル。闇が深くWebエンジニア泣かせ。

モーダル展開しました。成功です。こんな感じで表示。
しかし、コードは複雑..。

モーダルの必須要件「背景固定」しかし、実装難易度は飛躍的に上昇。

私の場合、Webエンジニアに業務を依頼したが、けっこうな人数が挑戦。
課題を残し散ってイッタ..。取引終盤は悪態つくし残念。

クラウドソーシングは完全ガチャ。理不尽で頭のおかしい対応が大半。
気にせず次の人を探すが吉。

ぬるい業界だな～と感じる（世間全般に言える）

私の場合、理想のエンジニアさんともつながり、ヤル気も再燃！
これでダメ人間ともサラバ！

ブログ運営に向けラストスパート(ง •ૅ౪•᷄)ว

CLOSE

モーダル展開しました。成功です。

ところで..。鳥って歩くとき「首を前後」に動かしますが、ギブスで固定したらどうなるのでしょうか？

試されたことあるかた、問い合わせフォームよりご連絡下さい。

CLOSE

モーダル展開しました。成功です。初めましてミニです。

CLOSE

モーダル展開しました。成功。バイーーーン。いらんか..？

無意味なアニメーションは避けたいですね..。

CLOSE

モーダル展開しました。成功です。このイラスト外国製だが、めっちゃウマイ！さらりと描ける人が羨うらやしい！

CLOSE

たぶん正解のデザインかと！

カミングスーン。

ワードプレスの高速化。CDNで大幅スコアーUPを狙ってみるも、駄目でした..。最新テーマの高速表示に感服。

翻訳アプリを使って、旅行先の現地でコミュニケーションを図る人を見かけます。プライドはないんか！

スマホ20歳になってから。義務化の必要ある気がします。

【好きな言葉】
CSS書き放題。表示崩れナシ。カクンとしない。チラッとしない。均等。明瞭。運営者ファースト。

PageSpeed Insightsのユーザー補助監査項目で、コントラストが弱いお叱りをよく受けます。

そんなに弱いか？と..。つぶやきながら試行錯誤。

実はコレ、色弱な人に配慮した、パキット明瞭を好むアルゴリズムでした。

どーりでね！了解っす。

..と、こんな感じで、画像ギャラリーの解説もできるレイアウトでした！

CLOSE

デザイン：さじ加減がちょうど良い、スライド

スライダーはSwiperを導入。概ね良好に動作。ポイントは、操作感+進捗見える化+演出の3点。

デザイン：さじ加減がちょうど良い、フェードイン

ちなみに自動スライドもできます。しないけど..。記事読んでるときイラッとしません？
※TOPページは除く

デザイン：さじ加減がちょうど良い、フェードインサムネイル付き

オウンドメディアでよく見るやつ。ショボイの多数。あっ、失礼！..。

サムネは画像が多いとき、ユーザーさんに親切。上のスライダーは不親切な見本よぉ

デザイン：スライドのサムネイル付き

ところで「スライダー」と混同される「カルーセル」区別はイージー。ちなみに、この辺はスライダー。当サイトのフッターにあるのがカルーセル。私にはメリーゴーランドにしか見えへん..。

デザイン：さじ加減がちょうど良い、スライド解説レイアウト

最後はコレ。解説系。本番記事は「品質第一」必然的にボリュームも増える..。省スペースなレイアウトで対策。妥協などアリエンε-(◔д◔;A)

現名称「X」 旧名称「twitter」旧時代の鳥ちゃんの方が私は好きだが..。Xといわれると、ｘファイルが脳裏に浮かびます。宇宙人に洗脳されたのかもしれないっす..。

クリエイティブです。

お化けだね。これもクリエイティブ。

初めまして。ボク オウム。ジュミョウ ナガイト 60 ネン。私の余命より長くぴえん。

油断してると、写真がくるーーー！

おや？本番で使えるイラストでは？

【タイのタクシーの乗り方】メーター制/定額制（予約）/普通車～ジャンボ/VIP/ぼったくりタクシーの見分け方/おすすめは、配車アプリで便利なGrab♪

地味にクオリティーが高く感心ですわ～。
えっ？こんなに画像をブチ込んでダイジョブなのかって？

A.画像：1ファイル/10KB前後。ほぼ無いに等しく、心配ご無用ですわ～！

サイトマスコット「ゾウサンズ」の三男。ナニカ間違った捉え方をした模様。

デザイン：メルヘンハッピー（ホバー効果：上昇/三男くん）

内部リンクはブログカード一択。第三者へのリンクは●＞＞テキストリンクを使います

Web

2025.08.29

WordPressで使える装飾手法、省スペースで合理的レイアウトを意識！ブログのあるべき姿を追求してみた♪

観光

2025.08.29

【チェンライ観光スポット23選】タイ最北県のすすめ！バンコクから日帰りも？行き方まで詳しく紹介♪

Web

2025.08.29

WordPressで使えるデザイン手法、省スペースで合理的レイアウトを意識！ブログのあるべき姿を追求してみた♪

Web

2025.08.29

「失敗しない選び方」WPテーマ注目度ランキングTOP10・徹底比較！

Web

2025.08.29

三男くんが好きすぎてたまらない、そんな素敵なYOUへ捧げるブログカード！

デザイン：サイズ感が絶妙なスタンダード

当サイトのマスコット、ゾウサンズ。ブランディングも含むが、吹き出しで活躍させたかったのが開発秘話。アニメーションとも相性ヨッシー。

バナナかってこい。

オカネ ナイ。

借りてこい。

ナイナイ。

長男がいるですわ～。

僕もない～。

加藤さんがいるですわ～。

そりゃあるけど..。 と、こんな感じの会話もできます。

コメントが流れるアニメーション

これくらいが妥当か？

アニメーションするですわ～。

わ～い。ゆかい～。

ヌルット現れるアニメーション

これなら？

キミ ダレ。

ボクハ エモン。

バイーンと飛び出すアニメーション

これもアリか？

左からコンチワーーース。

ヒマなの～。

微妙な位置からスライドインするアニメーション

動きは単純でも、一工夫で新鮮さをプラス。

ヤルこといっぱいで瀕死。

超人ならデキルですわ～。

怪しいジャンプを高速で15回繰り出すアニメーション

もしかして、変なオジサン？

そうでした！

デザイン：企業ロゴ系

今のところ3種。どんだけ増えるかな..。

マイクロコピーを添えると、クリック率UPアップするかもしれない。

デザイン：おもちゃ系

ど～もこんなんが、私の好み

デザイン：かっこいい系

闇夜に光るネオン！

権利制限規定、4つの条件を満たせば「無許可」で引用してOK

説明されても用語の意味と具体例を知らないと、チンプンカンプン。下のスライドをご覧いただくと、理解が早まります。

画像：Wクリックの個所/拡大

画像：Wタップの個所/拡大

引用：【文化庁】著作権制度の概要（著作権担当者向け教育資料）

---

分かったこと

著作物は著作者の許可がなければ利用（引用）できないルールだが、無許可で利用できる特別ルールもあるらしい。それが権利制限規定。

---

分かったこと

権利制限規定、引用ルールの詳細。

➀公表された著作物であること

➁公正な慣行に合致すること

➂引用の目的上「正当な範囲内」であること

➃「出所の明示」が必要

上記4つを満たせば「無許可」で引用してOKと言うこと！
とはいえ、イマイチピンとこないハズ。特に➁➂の項目。 ※詳細は後述

---

分かったこと

フローチャーﾄでも、➃権利制限規定に「該当」していれば「無許可」で引用してOKとのこと。これで間違いありませんヾ(•ω•`)o

権利制限規定➀～➃の詳細（文化庁著作権教育資料ー28頁）

グーグル検索:AIモードの回答も踏まえ、深掘りします。

➀公表された著作物であること

著作物が発行され、または著作権者の許諾を得て上演、演奏、上映等の方法で公衆に提示された場合。

無論、Webサイトも含みます。そもそも一般に公開されてなければ、知る由よしもありませんよね。

➁公正な慣行に合致すること

著作物の種類や目的、各分野の慣習など、さまざまな事情を考慮して、社会通念上妥当と判断される利用方法。

引用部分の明瞭な区別: 引用した部分が、自作の部分と明確に区別されていること。

改変の禁止: 引用する文章や画像を勝手に改変することは、公正な慣行に反します。

社会通念上妥当と判断 ＝ 必然性のこと。なんとも曖昧あいまい。著作権法で明記したくても、想定が多岐にわたり困難。 ※弁護士の見解は以下

引用：田中靖子さま（弁護士）必然性の見解と具体例

必然性とは、「文章の流れ上、他人の著作物を使う必要がある」ということです。ここでのポイントは、「自然な流れで引用部分が紹介されているか」です。自然な流れで文章が引用されていれば、「必然性がある」と認められます。例えば、下記の文章を考えてみましょう。

昨日小説を読んだ。冒頭からぐいぐいと惹きつけられた。その冒頭は“彼は急に5階から飛び降りた“という文だった。5階から飛び降りて大丈夫だったのだろうか。続きが気になって仕方がなかった。

この場合は、「自分が惹きつけられた文章を紹介したい」という正当な理由があります。よって、必然性があると認められます。

解釈も人さまざま..。過去の裁判例も勘案し、総合的に判断していくしかないんでしょうね～。

明確に区別については「blockquote」タグの引用装飾で対応できます。 無論、改変は他人の著作物につき禁止。とはいえ、明らかな「誤字、脱字、不備」の修正くらいは許されると思います（法令以前の問題）

明確に区別については「blockquote」タグの引用装飾で対応できます。 無論、改変は他人の著作物につき禁止。

とはいえ、明らかな「誤字、脱字、不備」の修正くらいは許されると思います（法令以前の問題）

➂引用の目的上「正当な範囲内」であること

引用する目的や必然性に応じて、引用する部分が必要最小限の範囲に留まっていること。

主従関係：引用部分が全体の分量や内容に比べてごく一部であり、自分の著作物が主たるコンテンツである必要。

量的な範囲：引用する部分の量が、引用の目的と比べ、必要以上に多くないことが重要です。自分の主張を補強するために最小限の範囲で利用することが求められます。

必要最小限の範囲 ＝ 妥当な主従関係（正当な範囲内）のこと。こちらも曖昧。量的な範囲にしても同じ。 ※弁護士の見解は以下

引用：田中靖子さま（弁護士）主従関係の見解

主従関係とは、「自分の文章がメイン、引用部分はサブ」ということです。 つまり、「他人の文章を長々と載せて、自分のコメントを最後に一言だけ載せる」というのは、正当な引用とは認められません。 しかし、「全体の何パーセント以内であれば許される」という具体的な基準があるわけではないため、正確な判断は難しいところです。 少なくとも、引用部分が半分以上を占めている場合は「自分の文章がメインである」とは認められません。

---

以下、割愛。

必要最小限が、分かりやすく適切な言葉かと思いました！

➃「出所の明示」が必要

他人の著作物を「引用」する際に、「出所の明示」が義務付けられています。

出所を明示すること: 著作物の出所を、慣行に従い、引用の態様に応じた合理的と認められる方法と程度で明示しなければなりません。

出所の明示 = 慣行（ならわし）に従って明記（出典/引用）すること。こちらも「blockquote」タグの引用装飾で対応できます。引用元へ活きたリンクを貼ってあげればOK。リンクテキストの名称は「リンク先が何なのか」読者さんに分かるよう配慮したい。

出所の明示 = 慣行（ならわし）に従って明記（出典/引用）すること。こちらも「blockquote」タグの引用装飾で対応できます。引用元へ活きたリンクを貼ってあげればOK。

リンクテキストの名称は「リンク先が何なのか」読者さんに分かるよう配慮したい。

引用部分の区別を最大限明確にした、装飾見本

いつもの装飾見本へ戻ってきました。引用元はGoogleさんの経営理念。検索エンジンの設計思想と言っても過言ではありません。

インヨウ ハ ホドホドニ

もしかすると、公正な慣行に合致しない（必然性なし）と言われるかもしれない。とはいえ「引用の装飾見本」を制作するうえで、どうしても他人の著作物が必要だったんです！許してくだせぇーーー。

これが正当な理由。最低限、引用できる根拠を「説明できない」ときの利用は避けるべき。

もしかすると、公正な慣行に合致しない（必然性なし）と言われるかもしれない。

とはいえ「引用の装飾見本」を制作するうえで、どうしても他人の著作物が必要だったんです！許してくだせぇーーー。

これが正当な理由。

最低限、引用できる根拠を「説明できない」ときの利用は避けるべき。

引用：Googleが​掲げる​10の​事実

Google が​掲げる​ 10 の​事実

Google が​この​「10 の​事実」を​策定したのは、​会社設立から​数年後の​ことでした。​Google は​随時この​リストを​見直し、​事実に​変わりがないか​どうかを​確認しています。​Google は、​これらが​事実である​ことを​願い、​常に​このとおりである​よう努めています。

1. ユーザーに​焦点を​絞れば、​他の​ものは​みな​後から​ついてくる。

Google は、​当初から​ユーザーの​利便性を​第一に​考えてきました。​新しい​ウェブブラウザを​開発する​ときも、​ホームページの​外観に​手を​加える​ときも、​Google 内部の​目標や​収益ではなく、​ユーザーを​最も​重視してきました。

---

以下、割愛。

​：ユーザーの​利便性を​第一

これです！これこれ♪優れたユーザー体験！当サイトも最大限意識。コツコツと品質を作り込んできました。 【CSSコピペOK】おしゃれな引用blockquoteデザイン10選

引用部分の区別を最低限明確にした、装飾見本

他者サイトのスクショ画像を自サイトで使いたいケース。できることなら、引用装飾使わず好き勝手に載せたいもの。ご安心ください！大抵の場合、著作権侵害でアウト。

では、どうする？
引用ルールを守るだけ！
最低限。

当サイトの開発元

違和感ナッシ。

自サイトの画像を無断転載されたときの対抗措置

ライセンス料（無断使用料）を請求しよう！

ある写真家さんの「画像パクリ被害発覚～事件解決まで」時系列に整理された記事が、リアルで分かりやすい。 写真画像を無断使用されたので、使用料金をご請求申しあげた件【著作権裁判まとめ】

↑こういう記事を著作権侵害 画像 実例 上位表示して欲しい！

上位表示されるサイトは、タイトル付けがうまいな～と、感心することが多い印象。
デザインは「パキット明瞭」を意識。文脈が不明瞭だと読みづらいですからね

デザイン：h1見出しの装飾サンプル

最初の大きな見出し。ここは装飾不要！おスベリ確定..。1記事1つがお約束。

デザイン：h2見出しの装飾サンプル

2番目に大きな見出し。出番多数。

デザイン：h3見出しの装飾サンプル

3番目に大きな見出し。ここまで使いこなしたい。

デザイン：h4見出しの装飾サンプル

4番目に大きな見出し。あまり見かけない。

デザイン：初代h5見出しの装飾サンプル

上の見出しと、階層構造的に区別しづらく採用を断念。デザイン的にはイケてる！パクルがよい♪

/* -----HTML----- */

<h5 class="wp-block-heading iketeru">デザイン：これは初代h5見出しサンプル</h5>

/* -----CSS----- */

.single h5.iketeru {
    position: relative;
    display: flex;
    align-items: center;
    margin: 1.5em 0 1em;
    padding: 0 0 0 0.95em;
    font-size: clamp(19.5px, 3.5vw, 21.6px);
    line-height: 1.3;
}
.single h5.iketeru::before {
    content: "";
    position: absolute;
    left: 0;
    width: 0.7em;
    height: 0.3em;
    border-radius: 1.5px;
    background: linear-gradient(to right, #103750 70%, #67c5fe 0);
}

デザイン：現行のh5見出しの装飾サンプル

これを目撃するあなたはラッキー人間（出番極小）