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

nginxのlocationディレクティブ内のリダイレクト処理について

nginxのlocationディレクリブ内のリダイレクト処理に関して。 結構長い間携わっていますが、適当に理解していた部分が多かったので再度復習です。 特にドメインのサブディレクトリでサービスを運用し …

no image

障害調査フロー

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

no image

supervisorによるデーモン化

えー実務で任意のプログラムをデーモン化させて処理をするという実装があったのでメモ。 Contents1 デーモンとは?2 Supervisor2.1 インストール2.2 実行プログラム2.3 サービス …

no image

PHP_CodeSnifferによるコードチェック

昨日の記事でphpmdという静的解析ツールを調査したんですが、それ以外にも規約にのっとっているかどうかコーディングをチェックできるツールはあります。 PHP_CodeSniffer https://g …

no image

ログ抽出コマンド特集 その3 データの収集や抽出にかかわるコマンド群(sort ,tr,cut)

サーバーの負荷を見る場合、unixコマンドでログを抽出できたりすると何かと便利です。 いままでも下記の記事でこれらの出力を行いました。 ログ抽出コマンド特集 その1 cat+grep+sort 私が本 …

アーカイブ