【スマホサイズでも見やすい】tableを横スライドで見せる方法
料金表やサービス比較表など横方向にボリュームが大きい表をtable要素で設置することがあるかと思いますが、スマホサイズで表示する場合、そのままでは、非常に見にくくなってしまいます。 今回は、table要素を横スライドで見 […]
「HTML」と「CSS」のみで実装するタブ切替表示
お知らせ一覧など、カテゴリごとに多くの情報を1ページで表示したいときに使うことが多いタブ切替表示。その設置方法はJavaScriptで構築する少し難しいイメージがありますが、今回は、HTMLとCSSで簡単に構築する方法を […]
「HTML」と「CSS」のみで実装するアコーディオン表示
よくある質問や、メニューリストなどコンテンツをシンプルな表示にしたいときに用いられる、アコーディオン表示の構築は一見難しく見えますが、「HTML」と「CSS」のみで比較的簡単に実装することが可能です。 この記事では、HT […]
【HTML・CSS】中央寄せにする方法
HTMLでデザイン上、要素を中央に表示したいケースは非常に多いと思われますが、上手くいかないことはありませんか？ この記事では、CSSで行う基本的な中央表示の方法を確認していきます。また中央寄せは、水平方向（左右）だけで […]
「CSS」のみで作る タイトル・見出しのデザイン
画像を使わない「CSS」のみで作れる、ページタイトルや記事の小見出しタイトル（h1~h6）のデザインとして使えそうなアイデアを考えてみました。 各コードサンプルも掲載していますので、よろしければご参考ください。 サンプル […]
「CSS」のみで作れる リンクボタンのアイデア
シンプルになりがちなリンクボタンのデザインですが、いつもと違うスタイルを取り入れたい、他のボタンよりも目立たせたいときに使えそうなアイデアを考えてみました。 マウスオンでアニメーションも付けてあります。気になるデザインが […]
【コードサンプル】パネル形式・イメージ画像表示の「メガメニュー」
ドロップダウン形式のグローバルナビメニューをカスタマイズして、パネル形式＆イメージ画像を表示できるメガメニューのコードサンプルを作ってみました。 リンクごとに画像を表示するので、商品カテゴリーなど、ユーザーに訴えかけたい […]
「HTML」と「CSS」のみで作る グローバルナビメニュー
Webサイトの主要ページへのリンクをまとめたグローバルナビメニューは、ユーザービリティを考慮したわかりやすい設計が求められます。サイトのページ数が多い場合は、ナビメニューに掲載できる表示範囲も限りがあるため、工夫が必要に […]
「HTML」と「CSS」のみで実装する ポップアップ表示
WEBサイトを訪れた際に、ユーザーに興味を引いてもらう手法の一つに、「ポップアップ」表示があります。ECサイトでは、販促クーポンの配布など、キャンペーンページに誘導したり、企業サイトでも、重要なお知らせを表示する際に見る […]
「HTML」と「CSS」のみで実装する ハンバーガーメニュー【オフキャンバス編】
「Javascript」を使用しないハンバーガーメニューの実装方法について、以前の記事でご紹介しましたが、表示するドロワーメニューのアニメーションはバリエーションが豊富に存在します。 今回は、オフキャンバスと呼ばれる、画 […]