Blog

ホームページ制作の流れ(その3)

昨日ラフデザインを公開しましたが、

あれから試行錯誤の結果、多少デザインが変わりました。

おおまかなレイアウトは1カラムですが、メニュー以下は2カラムにしています。

こうすることで表示エリアを広く使え、より多くの情報を掲載できます。

また、基本1カラムのレイアウトを意図的に変える事で

デザインに遊びを持たせています。

(つまり、1カラムのレイアウトだと、面白味がないかなという事です)

 

今回のデザインチェンジの目的として、

乱雑になっていたメニューを整理しよう!という事がありました。

もちろん新メニューもいくつか追加するので

必然的に整理しなければならなくなってます。

 

そこで、採用したのが表示領域を有効に使えるプルダウンメニュー。

マウスオーバーでメニューが「さらさらっ」と表示されるので

なんとなく遊び心もあって、気持ちの良いインターフェースです。

最初、こちらはスタイルシートのみで実装していました。

はじめにメニューすべてを「リスト」にし

hover疑似クラスが使われたタイミングで、入れ子になった「リスト」が

表示されるという仕組みです。

<ul id=”menu”>
<li>ホームページ作成
<ul>
<li><a href=”#”>ホームページ作成1</a></li>
<li><a href=”#”>ホームページ作成2</a></li>
</ul>
</li>
</ul>

こんな感じのHTMLを描き、

あとは、スタイルシートで設定すれば・・・

 

が、ふと気づきました。

PCで閲覧する場合は問題ないけれど、タブレット端末だったら

hoverなんてできない・・・

 

つまり、タブレット端末にはマウスをボタンの上に乗せるという概念がない・・・

 

そこで、jQueryを使ったメニューに切り替えました。

HTMLは同じものを使えるので、あとはjQueryでスクリプトを作ればよし。

 

さて、トップページがおおまかに出来上がったので

次回はサブページを作ります!

 

 

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

  • 2か月 ago by jusmin0922 沼津御用邸記念公園にて。今日は曇り空です
  • 4か月 ago by jusmin0922 所用で訪れた京都で立ち寄った仁和寺。御室
  • 4か月 ago by jusmin0922 美術館「えき」KYOTOで開催されている
  • 5か月 ago by jusmin0922 夕暮れの富士川サービスエリアにて。こちら
  • 5か月 ago by jusmin0922 大好きな熱海のバー、ネグローニさんでアー
  • 6か月 ago by jusmin0922 所用で三島に来ています。今日は天気がとて
  • 7か月 ago by jusmin0922 happy new year 今日の日本
  • 8か月 ago by jusmin0922 焼津のバーXYZで頂いたグリーンアラスカ
  • 9か月 ago by jusmin0922 今日は富士宮へ。あさぎりフードパーク&田
  • 9か月 ago by jusmin0922 久しぶりに富士山周辺に来ています。今日は
  • 1年 ago by jusmin0922 小淵沢にある中村キース・ヘリング美術館。
  • 1年 ago by jusmin0922 長泉町にあるクレマチスの丘に行って来まし
  • 1年 ago by jusmin0922 大好きなバー、エスタノーチェにて。おまか
  • 1年 ago by jusmin0922 静岡市の麻機(あさはた)遊水地の桜まつり
  • 2年 ago by jusmin0922 熱海のバー、Negroniさんで頂いたア
  • 2年 ago by jusmin0922 ブラッド&サンド 静岡市のバー、エスタノ
  • 2年 ago by jusmin0922 所用で三島へ来たので、三島大社に寄ってま
  • 2年 ago by jusmin0922 JR東海の駅にこの場所のポスターが貼って
  • 2年 ago by jusmin0922 サマソニ2日目。本日はプラチナチケットな
  • 2年 ago by jusmin0922 サマソニ!!すごい人だけど今日は曇ってる

最近の記事

ウェブ解析士ロゴ
ページ上部へ戻る