contents_010
![](../_src/11293/screencapture-localhost-3000-165-contents-010-html-2019-09-08-17_22_36_%281%29.jpg?v=1626934564937)
写真は横幅に合わせ、文字は可読性を考慮し幅を抑えめにした組合わせ
CSSの設定として数字で◯で囲い、写真と下の小見出しの間を縦線でつなぐようなアクセントを入れています。
MORE
![](../_src/11295/screencapture-localhost-3000-165-contents-010-html-2019-09-08-17_22_50_%281%29.jpg?v=1626934564937)
contents_009
![](../_src/11289/screencapture-localhost-3000-36-contents-contents-009-html-2019-09-06-11_52_39_%281%29.jpg?v=1626934564937)
タブレイアウトの「スライド形式」で画像を切替表示
デフォルトでこの設定をすると、サムネイル画像の余白が大きく画像周囲にグレーの色がついてきれいではありません。
ちょっとしたことですが、サムネイル画像の余白を調整し、周囲のグレーをなしにしています。
MORE
![](../_src/11291/img20190906115845851286.jpg?v=1626934564937)
contents_008
![](../_src/11268/img20190831171853178940.png?v=1626934564937)
「よくある質問」ページのアコーディオンシンプルパターン
質問をクリックすると回答がアコーディオンで開くレイアウトのシンプルなパターン。
回答が開くとき質問・回答が薄いグレーになり展開します。また、回答にはアイコンをつけずtext-indentの設定もありません。
MORE
![](../_src/11270/img20190831171912911984.png?v=1626934564937)
contents_007
![](../_src/11124/contents_007.jpg?v=1626934564937)
左右の画像と文字を上下にちょっとずらしたレイアウト2
ブロックを2分割して右カラムをちょっと左にずらした定番のレイアウト。
カラム1,カラム2に対してCSSで設定しているため、左右のサイズ割合(画像をもっと大きく・小さく)や、重なる部分の寸法の増減、右カラム背景の色やパターン(画像データ)を簡単に変更できます。
MORE
カラム1,カラム2に対してCSSで設定しているため、左右のサイズ割合(画像をもっと大きく・小さく)や、重なる部分の寸法の増減、右カラム背景の色やパターン(画像データ)を簡単に変更できます。
![](../_src/11130/contents_007a.jpg?v=1626934564937)
![](../_src/11132/contents_007b.jpg?v=1626934564937)
MORE
![](../_src/11126/contents_007sp.jpg?v=1626934564937)
![](../_src/11128/contents_007b_sp.jpg?v=1626934564937)
contents_006
![](../_src/10610/contents_006.jpg?v=1626934564937)
CSSでノートの罫線を表現したブロックパターン
ノートの罫線に合わせて文字を配置するレイアウトをCSSで表現したパターン。
カラムに対して設定しているので、段数の増減に対応します。
ノートの紙の色(カラムの背景色)と罫線の色はCSSの項目から簡単に変更できます。
MORE
カラムに対して設定しているので、段数の増減に対応します。
ノートの紙の色(カラムの背景色)と罫線の色はCSSの項目から簡単に変更できます。
![](../_src/10614/contents_006a.jpg?v=1626934564937)
![](../_src/10616/contents_006b.jpg?v=1626934564937)
MORE
![](../_src/10612/contents_006sp.jpg?v=1626934564937)
contents_005
![](../_src/10606/contents_005.jpg?v=1626934564937)
基本的なレイアウトながら質問と回答にアイコンをつけて、さらにtext-indetで改行された時に読みやすくなるようにしました。
CSS(もしくはDRESS)で小見出しに色を設定するなどで見やすくはなるかと思いますが、QとAのアイコンをつけて余白を調整することで見やすくしています。
MORE
![](../_src/10608/contents_005sp.jpg?v=1626934564937)
contents_004
![](../_src/10600/contents_004.jpg?v=1626934564937)
ブロックレイアウトをアコーディオンにした「よくある質問」ページ
アコーディオンの設定がよく使われるのは「よくある質問」ページではないでしょうか。いくつもの質問だけが並んで表示されていて、興味ある質問をクリックするとアコーディオンが開いて回答が表示されます。
MORE
![](../_src/10602/contents_004sp.jpg?v=1626934564937)
contents_003
![](../_src/10596/contents_003.jpg?v=1626934564937)
プラン別の料金などで比較しやすい横並びのレイアウト
提供しているサービスに幾つかのプラン(バリエーション)があるような時に、上から順に仕様を並べるよりも横に並べたほうが比較がしやすくわかりやすくなります。
MORE
![](../_src/10598/contents_003sp.jpg?v=1626934564937)
contents_002
![](../_src/10536/contents_002.jpg?v=1626934564937)
画像に回り込み設定をしたコンテンツブロック
そこでブロックのCSSで指定する方法で対応したコンテンツ用のブロックデザインです。画像に対してwidth:50% , float: leftを指定し、さらにpaddingで画像の右と下に余白がつくようにしています。
MORE
![](../_src/10538/contents_002sp.jpg?v=1626934564937)
contents_001
![](../_src/10431/contents_001.jpg?v=1626934564937)
左右の画像と文字を上下にちょっとずらしたレイアウト
ブロック背景には左半分だけ模様のある(右半分は白・透明)画像を中央揃えの上下繰り返しで指定。
そこにブロックは右が大きいブロックとすることで、中央で別れた背景とずれができてデザインっぽくなります。
MORE
![](../_src/10433/contents_001sp.jpg?v=1626934564937)