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

ansible host指定,変数の外だし,ユーザー追加

Ansibleにてhostユーザーやユーザーの追加などす。 Contents1 ホストの指定2 ユーザーの追加2.1 変数を別ファイルに2.2 パスワードのハッシュ化2.3 パスワードなしでsudo2 …

no image

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

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

no image

Apacheでのリバースプロキシ

jenkinsの復習をしていたんですが、持ってたVPSサーバーにjenkins環境を構築、jenkinsのURLをサブドメインにし、アクセスした時に別ポートに飛ばす仕様にしました。 前提条件として下記 …

no image

メモリー不足でのスワップ割り当て

先日、あるサーバーでcomposerをinstallしようとしたところ、 The following exception is caused by a lack of memory or swap, …

no image

ansible複数アイテム登録&ファイル分割&ログ

引き続きansibleに関して。 Contents1 設定ファイルの書き換え1.1 ini_file1.2 lineinfile2 複数の値の置換3 ファイル分割3.1 ログ修正 設定ファイルの書き換 …