便利なジェネレーター・ツールサイトまとめ
CSSの高度なテクニックや、計算式を用いなければ作成できないコードを、WEB上でプレビューを見ながら生成してくれる便利なジェネレーター・ツールサイトをまとめてみました。 こちらのサイトを使用することで、細かな計算やコーデ […]
「CSS」のみで作る タイトル・見出しのデザイン
画像を使わない「CSS」のみで作れる、ページタイトルや記事の小見出しタイトル（h1~h6）のデザインとして使えそうなアイデアを考えてみました。 各コードサンプルも掲載していますので、よろしければご参考ください。 サンプル […]
「HTML」・「CSS」・「JavaScript（jQuery）」の書き出し
テンプレートや、フレームワークを使用することが多くなり、一から書くことは少なくなった「HTML」・「CSS」・「Javascript(jQuery)」などのコードですが、書き出し部分を毎回、調べている自分のための備忘録で […]
「CSS」のみで作れる リンクボタンのアイデア
シンプルになりがちなリンクボタンのデザインですが、いつもと違うスタイルを取り入れたい、他のボタンよりも目立たせたいときに使えそうなアイデアを考えてみました。 マウスオンでアニメーションも付けてあります。気になるデザインが […]
【コードサンプル】パネル形式・イメージ画像表示の「メガメニュー」
ドロップダウン形式のグローバルナビメニューをカスタマイズして、パネル形式＆イメージ画像を表示できるメガメニューのコードサンプルを作ってみました。 リンクごとに画像を表示するので、商品カテゴリーなど、ユーザーに訴えかけたい […]
「HTML」と「CSS」のみで作る グローバルナビメニュー
Webサイトの主要ページへのリンクをまとめたグローバルナビメニューは、ユーザービリティを考慮したわかりやすい設計が求められます。サイトのページ数が多い場合は、ナビメニューに掲載できる表示範囲も限りがあるため、工夫が必要に […]
「HTML」と「CSS」のみで実装する ポップアップ表示
WEBサイトを訪れた際に、ユーザーに興味を引いてもらう手法の一つに、「ポップアップ」表示があります。ECサイトでは、販促クーポンの配布など、キャンペーンページに誘導したり、企業サイトでも、重要なお知らせを表示する際に見る […]