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

nginxまとめ

10~11月はデータベースをちょっと勉強しておりましたが、12,1ぐらいはサーバーインフラ系の強化月間としようかと思います。 しばらくはnginxについてです。 Contents1 nginxの概要2 …

no image

linuxでのherokuのインストール&パスの通し方

linuxでのherokuのインストールやパスの通し方について 原則としてruby入ってないとダメっぽいです。(しかもruby1.8系だと2016年6月現在エラーが出ますので最新バージョンをインストー …

no image

vagrantでの静的ファイルのキャッシュがクリアされない

タイトルのまんまですが、vagrantでapacheを使ってまして、静的ファイルのキャッシュがクリアされないと言う問題が発生しました。 vagrantは結構長い間使ってましたが、今まで素のhtmlを書 …

no image

IPアドレスの構成に関して(主にネットワーク、ホスト、サブネットマスクなど)

インフラ周りの知識がスカスカなので復習もかねて学習中です。 ネットワークはほとんどインフラの方にやっていただいたので、知識がまとまっていない・・ Contents1 IPアドレスに関して2 ネットワー …

no image

heroku scheduler(cron的なもの)

herokuでアプリをデプロイしたあと定期的に走らせたいバッチなどがあるとき、cronを使うことを考えると思いますが、herokuではheroku Schedulerというアプリを使います。 hero …

アーカイブ