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

ECSについて

AWSでwebアプリを立ち上げる場合、基本的にはEC2+RDS(小規模な場合は使わないケースもあるかも・・)+アルファの構成が多いと思うのですが、Dockerでコンテナイメージをもっていれば、コンテナ …

no image

ログ抽出コマンド特集 その2 シェルスクリプトの算術計算、配列とループ

前回の続きですが、ログを収集し、分布(80%台が~%、70%台が~%)を出したいとします。 Contents1 ロジック2 ソース3 気づいたこと4 参考リンク ロジック ロジックは以下のような流れに …

no image

Sambaインストール

オフィスでサーバーをたてていますが、普段使っているメインのPCとのファイルのやりとりをSFTPクライアントなどでするのが面倒くさいので、同期させるためにSambaをインストールしました。 環境ですが、 …

no image

ファイル一括検索 xargsを利用した置換

実務でよくあるファイル一括置換。 sedに関しては以前も触れましたが使用範囲は多いですね。

ちなみにオプションがすごく大事でxargs …