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