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の設定&php-fpmインストール

本日、久しぶりにPHPのWebアプリを別サーバーに移行したのですが、nginxの設定でかなり手間取りましたのでちょっと記録しておきます。 Contents1 nginxの設定1.1 インストール1.2 …

no image

メール送信に関して その1 おおまかな送受信の仕組み

php-fpmを変えてから大分動きがよくなりましたね・・サーバーのレスポンスがはやい・・ 今回から数回に分けてメール送信の仕組みについて学習していこうと思います。 インフラ系の知識がやっぱり怪しいもん …

no image

SAM(AWSのサーバーレスフレームワーク)について

LambdaやAPIGatewayをちょこちょこいじってますが、goなどを使っているとローカルでの開発時にはAPIなどと直接連携したりすることはできません。 またデプロイ自体が面倒で画面からポチポチや …

no image

FastCGIに関して

nginxについて学習してきましたが、今回はphp-fpmについてです。 Contents1 そもそもの構成2 CGIのメカニズム3 FastCGI4 nginxでの設定に関して4.1 fastcgi …

no image

自力での監視

Zabbixの勉強を進めていますが、マニュアル通りに設定していて、中で何をやっているかをあまり理解していなかったりします。 それだとちょっとまずいのでZabbixでの構築とともに自力での監視スクリプト …