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