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

シェル基礎2

シェルコマンド使い始めて数年たちますが、いまだに知らないことはおおいですし、早く知っとけばよかった的なこともたくさんあります。 そんな小ネタ集を alias よく使うコマンドを別名で登録することができ …

no image

Perlワンライナー他

Perlではcgiと連動してWEBアプリケーションを作るケースが多いですが、元々テキストの編集や置換が非常に便利です。 例えば、あるディレクトリにある特定のファイル名(正規表現使用可)だけを抽出する場 …

no image

インメモリデータベース redis

インメモリデータベースのredis(レディース)について。 キャッシュとして以前はmemcachedを使っていましたが、いろいろ多機能ということでredisをちょっと触ってみようかと。 Content …

no image

Vagarant+Eclipse(Perl)での作業環境構築

現在の案件でPerlの改修があるんですが、windowsだとモジュールの依存関係でうまくコンパイルできなかったりといろいろとトラブルが起こったんで、今はやりの仮想環境でやることに。 まだ完ぺきではない …

no image

SELinuxによるファイル制限+MySQLアクセスエラー

新サーバーにApacheをいれて特定のファイルにアクセスしようとしたところ、 以下のようなエラーがでてしまいました。

ただPermis …