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

zabbixについて 

現在、携わっているプロジェクトでサーバー監視をする必要性がでてきたので、監視ツールについていろいろ調べとります。 Contents1 サーバー監視とは2 サーバー監視ツールとは3 おおまかなイメージ4 …

no image

SQLインジェクション

セキュリティ関係の知識がぬるいのでちょっとお勉強。 知っていることもあるが復習もかねて勉強を。 Contents1 SQLインジェクションとは?2 被害3 対策4 参考サイト・書籍5 ソース SQLイ …

no image

serverspecによるサーバー自動テスト

最近は管理しているサーバーが多いのと、構成管理ツール(Ansible)なんかをちょくちょく使ってますが、ちゃんと入っているかどうかを確認するのはそれなりに大変だったりします。 が、構成管理ツール自体も …

no image

ansible rolesなど

ansibleはある程度ファイルが肥大化してくると、管理するのが大変になります。 一般的にはプログラムのようにある程度のまとまりにわけてそれを読み込むということになります。 ある程度のまとまりのことを …

no image

SMTP-AUTHのメール送信

メールに関して以前にもこんなこと書きましたが、今更ながらトラブルが起きたのでしっかり理解しておかないと・・・ 基礎が弱いと困るのう・・・ ロリポップなどのサーバーでmb_send_mailを打てばよく …