CSSで要素を非表示にする方法を紹介します。
要素を非表示にするには以下のように、要素に対してdisplay: none;のスタイルを指定します。
<div style="display: none;">
表示されない
</div>
<div style="display: none;">
表示されない
</div>
<div>
表示される
</div>display: none;で非表示にすると、非表示になった要素の表示領域はなくなり、上記プレビューのように、他の要素が上に詰められる形になります。
表示スペースを確保した状態で、要素を非表示にするにはdisplay: none;の代わりに、visibility: hidden;を使用します。
<div style="visibility: hidden;">
表示されない
</div>
<div style="visibility: hidden;">
表示されない
</div>
<div>
表示される
</div>要素の背景色を透明・半透明にする方法を紹介します。例えば、以下のように緑背景にボタンを置いた場合を考えます。ボタンの背景色を透明にして、文字だけにしたい場合は以下のようにします。transparent...
transitionを使って、スタイルの変化をアニメーションで表現する方法を紹介します。例えば以下のように、マウスオーバーすると擬似クラスが適用されて横幅が伸びる要素があるとします。このときの横幅の変...
テーブルのセル内の文字列の折り返しの制御を行う方法を紹介します。以下は、セルの幅を200pxに指定しているのですが、半角英数字の長い文字列があると、セルの幅を無視してセルが伸びてしまいます。テーブルの...
CSSでテーブルのセルで入りきらない文字列をカットして表示する方法を紹介します。以下のようなtableのとき、tdの要素に対して以下のようにスタイルを設定します。white-space: nowrap...
テーブルのセルの中身を文字寄せする方法を紹介します。文字寄せするスタイルはtext-alignやvertical-alignを使用しますが、テーブルのセルの場合でも同じように指定します。以下のようなテ...
要素が入り切らずにはみ出してしまうときにスクロールバーを表示する方法を紹介します。以下のように、サイズを指定した親要素の中に、入り切らないテキストなどがあると、親要素をはみ出してしまいます。overf...
要素が入り切らずにはみ出してしまうときにスクロールバーを表示する方法をCSS 要素が入り切らない場合にスクロールバーを表示する方法で紹介しました。overflowのスタイルは縦と横の両方のスクロールバ...
CSSのスタイルのみでローディングアニメーションを作成する方法を紹介します。以下のようなローディングアニメーションを作成します。適用しているスタイルを１つづつ解説します。まずはローディングアニメーショ...
リンクボタンの下線を消す方法を紹介します。以下は何もスタイルを指定していない状態のリンクボタンです。ブラウザによって多少は異なりますが、青色で下線の付いたテキストになります。文字に下線を付けるスタイル...
CSSでテキストボックスの幅を100%にしたときに親要素からはみ出る問題を解決する方法を紹介します。以下のように、親要素に対して100%のサイズのテキストボックスを配置すると、親要素をはみ出してしまい...