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

監視検知処理に関して

実務で監視のスクリプトを書くことがあったんでメモしときます。 監視検知とは例えばあるディレクリに変化(ファイルの作成・更新・削除など)があった時に、それをトリガーにして何らかの処理を行うと言う仕組みに …

no image

Linuxコマンドの総復習

ちょっとスポット的にLinuxコマンドの復習などを。 Contents1 コマンドの実行2 リダイレクト処理の一覧2.1 コマンド> ファイル2.2 コマンド<ファイル2.3 コマンド&g …

no image

AWSのCLIに関して

実務でAWSを使ってたんですがテスト時にはコマンドを使っている方がはるかに早いためコマンドライン環境を作っておいたほうが良いです。 ちなみに使用する前にはAWSのコンソールからIAMユーザーを作成する …

no image

ロードアベレージ監視シェルスクリプト

ロードアベレージの監視シェルスクリプトについて Contents1 使用コマンド1.1 uptime1.2 /proc/cpuinfo1.3 bc2 ソース3 他参考リンク 使用コマンド uptime …

no image

nginx基本

データベースについて勉強していましたが、実務でnginxを触る機会があったので、これを機に勉強。 Contents1 参考文献2 nginx基礎3 コアモジュール4 httpモジュール5 設定ファイル …