skillup

技術ブログ

サーバー・ネットワーク

メニュー系のCSS

投稿日:

よく迷うのでこれを機にまとめておこうかと。

通常時のメニュー

html

css

携帯(いわゆる縦のメニュー)

メモ

  • box-sizing:border-boxは幅まで含めた幅を均等に出せる
  • last-childのborder-noneを忘れないように
  • a要素はinline-blockだったりtable-cellのこともあるが、幅を指定することが大切。

ホバー時の画像選択

html

css

  • ホバーをcssでなく画像で処理する場合、大きい画像の位置をずらして1つに見せる

小ネタ 選択されているときのメニュー

※activeではなく、クリックされ選択されているケース

html

css

その他、新しいブラウザであればflexboxなどが強力。

-サーバー・ネットワーク
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

docker メモ

まだ数時間しか触ってませんが、なんとなくのイメージなど Vagrantと違いOSではなく主にミドルウェア(httpd,mysqlなど)を手軽に構築する仮想環境ツール Linuxの中でしか動かない 起動 …

no image

webサーバーのログの見方

サーバー監視の基礎となるWebサーバーのログ(主にApache)の見方について少し書いてみようと思います。Apacheで解説しますが、nginxでもほぼおなじです。 Contents0.1 モジュール …

no image

サーバー設定ファイルについて fastcgi周り

前回nginxの設定を書きましたが、今回はFastCGIについてメモ。 Contents1 そもそもCGIとは?2 CGIのデメリット3 FastCGIとは?4 ソース5 参考リンク そもそもCGIと …

no image

webサーバーがどのように動いているか(GETとPOST)

webがリクエストを受け取って画面に表示するまでの流れをおさらい。基本です。 Contents1 全体の流れ2 参考文献 全体の流れ 1 ユーザーがブラウザのURL欄にhttp://www.examp …

no image

メール送信に関して その2 メールメッセージのデータ形式

前回に引き続き、メールのメッセージ構造について書きたいと思います。 Contents1 大まかな構造2 ヘッダ部2.1 メールアドレス2.2 From/Sender/Reply-To2.3 To/Cc …