WHY ?

CSSって意外に難しい

今、Webサイトの模写を進めているのですが、CSSって案外難しい。

ボタンのテキストを上下中央揃いにしたい

このボタンのテキストを左右中央、上下中央にしたいだけなのに、軽く1時間以上悩んでしまった。

勉強が足りないとだけと言われればそのとおりなのですが。

text-align: center で左右中央になるのに、vertical-align: middle で上下中央にならない。

しかし、display: table-cell とすると、 vertical-align: middle が効くようになる。

うーん。

参考

テキストボックスがフォーカスされたときの枠線を出ないようにする

次のようにテキストボックスに何か入力しようとして、テキストボックスをクリックするときに枠線が出てしまうのを避けたいときがあります。

テキストボックスのフォーカス時の枠線
テキストボックスのフォーカス時の枠線

この問題はGoogle検索したら、すぐに解決方法がわかりました。

input[type="text"]:focus {
outline-style: none;
}

このoutline-styleには他にどんなものがあるか、こちらで調べてみました。

色々な装飾ができるのですね。

CSSで通知のバッジを付ける方法

CSSで次のような緑色のバッジを付ける方法について考えてみました。

通知のバッジ
「メッセージ」についたバッジ

結果

HTML

<div class="top-menu">
<ul>
/* (略) */
<li><a class="notification-badge" href="#">メッセージ</a></li>
<li><a href="#">ヘルプ</a></li>
/* (略) */
</ul>
</div>

CSS

 .top-menu .notification-badge::after {
content: "●";
font-family: 'Courier New', Courier, monospace;
color: #008489;
position: relative;
top: -10px;
right: -0px;
font-size: 4px;
text-shadow: 0px 0px 2px #008489;
}

他に試した事


https://www.cssportal.com/blog/create-css-notification-badge/  より

このような数字付きの通知バッジのやり方は上記URLに記載されていました。

しかし、数字なしの場合に、content: noneや、content: “”では緑色の丸が表示されず、かといって、content: “abc”などとやると、楕円になってしまいました。