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

supervisorによるデーモン化

えー実務で任意のプログラムをデーモン化させて処理をするという実装があったのでメモ。 Contents1 デーモンとは?2 Supervisor2.1 インストール2.2 実行プログラム2.3 サービス …

no image

SSHのfinger printに関して

今まで何気なくやっていることをあまり実は理解していない・・なんてことが多いもんで、最近は復習の必要性を感じています。 今回のお題はSSHのfinger printです。 初めてSSH先に接続するときに …

no image

Code4兄弟に関して(CodeCommit,CodeDeploy,CodeBuild,CodePipeline)

前回の記事で書いたCodeDeploy以外にもCI/CD絡みで色々と使用するサービスがあるので自分用にメモ。 Code兄弟なっていうようで・・・・ Contents1 各サービス1.1 CodeCom …

no image

ファイルアップロード・ダウンロードに関するシェルスクリプト

ファイルのアップロードやダウンロードに関するシェルスクリプトなんぞを。 地味ですが、以外に登場頻度は高いかと。 Contents1 FTP1.1 ダウンロード1.2 アップロード2 SCP2.1 アッ …

アーカイブ