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

OSコマンドインジェクション

Contents1 OSコマンドインジェクションとは?2 被害3 対策4 参考リンク OSコマンドインジェクションとは? OSに対する命令文を不正に紛れ込ませて攻撃させる手法。 被害 サーバー内のファ …

no image

form以外でのPOST送信(というかHTTP通信全般)

前回の記事に引き続きですが、APIを叩く側はformでデータを送るのではなく、コードの中にPOSTする処理を書きます。 選択肢としては curlコマンドを使う file_get_contentsを使う …

no image

Gitのブランチについて

ちょっといろいろと触っているGitに関して。 前回は作業ディレクトリ、インデックス、コミットについて説明したのですが、今回はブランチについて行います。 Contents1 ブランチとは?2 ブランチに …

no image

php-fpmトラブル(nginxが競合?)

php-fpmが急に停止になるトラブルがあったので、ちょっとメモ。 php-fpmを再起動しようとしても下記のようなエラーが・・・

p …

no image

nginxでの設定について

何回かやったnginxの設定について。 特にサブディレクトリなどに設定したいなどの時に悩みますね・・・ Contents1 locationディレクティブ2 try_filesディレクティブ3 fas …

アーカイブ