【CSS】レスポンシブな「dl dt dd」を作る - Web担当屋 ブログ
PCで表示する時は横並びで、スマホで表示する時は上下に変わる、レスポンシブな「dl dt dd」定義リストです。 新着情報を例にしたデモページです。 ブラウザの横幅を狭めてみてください。 デモページを見る ◆html <div class="topics"> <dl> <dt>20180101</dt> <dd>新着情報の内容が入ります。</dd> </dl> <dl> <dt>20180101</dt> <dd>新着情報の内容が入ります。</dd> </dl> <dl> <dt>20180101</dt> <dd>新着情報の内容が入ります。</dd> </dl> </div> ◆css .topics dl { padding: 15px 0; border-bottom: 1px solid #ccc; } .topics dt { padding-bottom: 5px; } @me
吹き出しみたいな三角のついた見出しデザインをCSSで実装してみた
こんなの作ってみました。 ページのちょっとしたアクセントに・・・。 サンプルページ HTML 今回はdlタグ使ってみました。 <dl class="fukidashi"> <dt>ここに何か</dt> <dd>そしてその後にここに何かが入るのです！</dd> </dl> .fukidashi { margin:20px 0; } .fukidashi dt { position: relative; color: #fff; font-weight:bold; float:left; clear:both; padding:10px 15px; background-color: #DE3737; } .fukidashi dd { padding:10px 30px; display:inline-block; background-color:#F8F8F8; margin:0; }
【ネットショップの離脱防止】「FAQページ」がコピペで作れるHTMLテンプレート3デザイン
銭湯で水風呂後に、アッツアツ風呂ざっぷん浸かったときの体温が戸惑ってるじんじん感がたまらないオガリア中村です。出たあとはフルーツ牛乳150円。 今日はこちら、ネットショップの「よくある質問」「FAQ」が簡単につくれるHTMLテンプレートをご用意しました。楽天市場/Yahoo!ストアどちらも対応しています。 イメージ シンプルな3パターンをご用意！どれも画像のご用意必要ナシ。HTMLをコピペして、書き変えるだけ。 デザイン1：超シンプル (※ogaRia×System「フルバージョンプラン」ご利用店舗様限定のテンプレートです。) メリット お客様トラブルを減らす、問合せ(顧客対応時間)を減らす、ショップの信頼度が増すことで購買率が向上する、などの効果が見込めます。 楽天市場もYahoo!ストアもそうですが、自動生成される「会社概要」ページは正直見づらくて・・・。お客様が知りたい情報を得るのは
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
