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

pidファイルに関して

サーバー上であるサービスを動いている(と思っている)時にstopしようとしたらpidファイルがありませんと怒られました。 pidファイルってよく聞くけどわかっていなかったのでこれを機にメモ。 Linu …

no image

ファイル抽出系のシェルスクリプト(主にfind系)

実務であるアプリのログをまとめるスクリプトを書きました。 log1.log log2.log log3.log ・・・・ みたいにローテーションして吐かれていくのですが、量が多いので1日分をまとめるこ …

no image

シェルスクリプトテキストファイルから配列&プロセス監視シェル

またまたシェルスクリプトネタなどを。 今回はtxtファイルの文字列を読み込んで配列に入れる処理ですね。 例えば aaa bbb ccc こんな文字列がテキストファイルに格納されていたとして、これを配列 …

no image

WinSCPの活用法

WinSCPの活用方法などについて WinSCPでZIPの解凍、ZIPへの圧縮を右クリックからカスタムコマンドで実行できるようにする。 特にzipでファイルを固める処理はよくやるので覚えておきましょう …

no image

nginxのSSL通信や認証、ログに関して

今回はnginxでSSL通信をする際の注意点など。といっても、それほど難しくないようでSSL通信をするには主に2つだけです。 SSLを利用することを明示 サーバー証明書と秘密鍵を指示する またngin …