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

herokuでのhttpd.conf設定

前回の記事でLet’s EncryptでSSL設定する場合、 http://ドメイン/.well-known/ というURLにアクセスする必要があります。 ただherok …

no image

zabbixについて 

現在、携わっているプロジェクトでサーバー監視をする必要性がでてきたので、監視ツールについていろいろ調べとります。 Contents1 サーバー監視とは2 サーバー監視ツールとは3 おおまかなイメージ4 …

no image

障害調査フロー

実務でサーバーの障害が発生した時のフローなどをメモしおこうかと。 行ってしまうと「ログに始まり、ログにおわる」といった感じでしょうか。 サーバーエンジニアの方の作業をみてたんですが、基本的にはプログラ …

no image

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

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

no image

正規表現その2

10/28に書いた正規表現に関しての追記です。 Contents1 覚えておきたいメタ文字2 留意点 覚えておきたいメタ文字 よく出るメタ文字の復習です。 メタ文字 メタ文字の説明 [] いずれかの1 …

アーカイブ