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

クリックジャッキング

Contents1 クリックジャッキングとは?2 被害3 対策 クリックジャッキングとは? 悪意のあるサイトの特定上の場所をクリックさせ、誤操作をさせ、意図しない機能を実行させられる可能性があります。 …

no image

CSRF(クロスサイト・リクエスト・フォージェリ)

Contents1 CSRF(クロスサイト・リクエスト・フォージェリ)とは?2 被害3 対策4 参考(トークンチェック) CSRF(クロスサイト・リクエスト・フォージェリ)とは? ウェブサイトの中には …

no image

PHPのheroku(ヘロク)へのデプロイ

有名なPaasのサービスであるherokuをちょっといじったのでその時のメモなどを。 Contents1 アカウント開設2 Heroku | Cloud Application Platform3 デ …

no image

SSLに関して(主にオレオレSSLの作成方法など)

Contents1 HTTPSとは1.1 概要説明1.2 SSL費用の違いについて2 オレオレSSL2.1 秘密鍵作成コマンド2.2 公開鍵作成コマンド2.3 オレオレSSL証明書の作成3 webサー …

no image

vimの設定に関して

今の開発ではほとんどeclipseを使っていますが、プログラミングをやり始めてから2年ぐらいはずっとgvim(vimのGUI版)でした。 別にこだわりがあったわけではないんですけどね。 最初にならった …