ナビゲーション＆メニュー 2-04 CSSだけで作成するドロップダウンメニュー マウスオーバーすると子メニューが出るメニューの作成方法を紹介する。アニメーション効果なども入っていないシンプルなソースなのでデザインのカスタマイズも簡単だ。 制作・文／佐藤とも子・サチコ( 螺旋デザイン) BROWSER IE…8over　Firefox…3.6over　Safari…3.1over　Chrome…10over 01 マウスオーバーで画像が変化する、いわゆるロールオーバーはJavaScript を用いて作成する方が一般的である。だが、CSSだけの方がコードもシンプルになり、表示速度も速くなる。ブラウザ対応の問題があるが、条件がそろった時は積極的に試してもらいたいテクニックだ。 では順番に記述方法を解説する。 まずはHTMLに外部CSSをリンクさせる【1-1】【1-2】。 メニューの一部には透過色

ドロップダウンメニューはJavaScript等のプログラムを使用せずに、CSSだけで簡単に作ることができます。CSS3も使用してませんのでIE7からも対応しています。 コード Demo デモページへ HTML <div id="gnav"> <ul id="menu"> <li class="menu01"> <a href="">メニュー01</a> <ul class="submenu"> <li><a href="">サブメニュー01</a></li> <li><a href="">サブメニュー02</a></li> <li><a href="">サブメニュー03</a></li> <li><a href="">サブメニュー04</a></li> <li><a href="">サブメニュー05</a></li> </ul> </li> <li class="menu02"> <a h

以前書いた「CSSだけで作る動きのあるドロップダウンメニュー｜Webpark」という記事が検索エンジン経由でそこそこアクセスがあり、よく質問をいただきます。そのなかで多階層にできないのかという質問があったので作ってみました。 IE7の場合擬似要素が使えませんので、次の階層があることを示す矢印が表示されません。ドロップダウンの機能はIE7でも問題ありませんので、IE7に対応させる場合は矢印を画像にするなどすればよいと思います。 それではHTMLからいきます。 HTML かなり長くなるのでメニュー1の部分だけ載せています。 <ul id="dropmenu"> <li><a href="#">メニュー1</a> <ul> <li><a href="#">子メニュー</a> <ul> <li><a href="#">孫メニュー</a></li> <li><a href="#">孫メニュー</a>

制作依頼時のヒアリングシート ヒアリングシートの内容には、業種によって様々なものがあると思いますが、WEB制作に関して言えば、制作依頼のお話が来た時点や、検討されている段階で、お客様の考えをアウトプットすることに大きな目的があり、その内容をもとにサイトの方向性や目標等を定めていきます。 アウトプットする内容としては、大きく分けて以下のような項目になると思います。 ■ WEBサイト構築の背景・目的 ■ WEBサイトのタイプ（企業サイト、製品紹介サイト・ECサイト、etc...） ■ ターゲットとするエンドユーザーの層 ■ WEBサイトから期待する効果 ■ 同業種・競合他社の有無とその動向 ■ 予算と制作スケジュール ■ 保守・管理に関して WEBサイトを"意味のある・効果のある"ものへと作り上げていく上で、上記項目は欠かすことのできない情報となります。 これらを踏まえた上で、その他様々なヒア

ウェブデザインの世界においてどのようなフォントが好まれて使われているのかを調査した結果、21種類のフォントが選び出されたそうです。どれもこれも使い勝手の良さそうな、見やすくわかりやすい、それでいてインパクトのある英文フォントばかりなので、覚えておいて損はありません。 プロフェッショナルのデザイナーによく使われている21種類のフォント一覧は以下から。 21 Most Used Fonts By Professional Designers | instantShift Helvetica Frutiger Myriad Pro Avenir Std Trajan Optima Std ITC Franklin Gothic Std Futura Bickham Script Univers Eurostile Interstate Trade Gothic Gill Sans Warnock

リファレンスについて HTML リファレンス HTML Living Standardに対応したリファレンスです。 HTMLタグ リファレンス HTML4の時代に作成したリファレンスです。古いWebページを更新する際などに参考にしてください。 CSS リファレンス CSS2の時代に作成したリファレンスです。

close close close

イケてるWebサイト制作会社をお探しの方へ イケサイに掲載されているようなウェブサイトを作りたい、スマートフォンサイトを作りたいという方は下記の見積もり依頼フォームからお問い合わせ下さい。 オススメのサイト ミツカル保険相談mitsukaru-hoken.com 全国の保険相談窓口・保険ショップを検索 保育園・幼稚園DBhoiku-db.info 全国の幼稚園と保育園のクチコミ情報サイト ブリーダー直販www.cats.to 優良ブリーダーやキャッテリーが育てた猫ちゃん

WEBデザイナーのためのWEBサイトのデータベース・リンク集、「WEBサイトを作成する際のデザインの配色・見本・参考」「お客様・クライアントにイメージを伝えるためのサンプル」「制作会社へのサイトイメージを伝えるためのご提案」などサンプル・配色・見本・参考・ご提案にご利用ください!!

WEBサイトを制作される方々にとって「果たしてどんなWEBデザインがベストなのか？」はいつもつきまとう疑問かと思います。WEBdeDBでは多くの既存WEBデザインを体系化し、ユーザーからの評価によって「いいWEBデザイン」を導き出そうという試みのサイトです。 現在実験的にWEBデザインの評価システムを実装しています。WEBデザインの評価を直感で10段階評価してみてください。よろしくお願いいたします。(※現在評価機能はご利用いただけません)