はてなブックマーク

タイトル1-1 タイトル1-2 タイトル1-3 タイトル1-4 タイトル1-5 タイトル1-6 タイトル1-7 タイトル1-8 タイトル1-9 タイトル1-10 タイトル1-11 タイトル1-12 タイトル1-13 タイトル1-14 タイトル1-15 タイトル1-16 タイトル2

「ボタンを作ったけど文字が左上にぴったりくっついていてバランスが悪い。文字をボタン内で中央寄せしたいけどどうやるの？」 CSSでボタン内の文字を左右中央、上下中央寄せにする方法を解説します。 左右中央寄せ 【widthなし】padding <style> .example{ /*コレ*/padding: 10px 30px; background: #e3f2fd; border: 1px solid #333; } </style> <input class="example" type="button" value="ボタン"> paddingは内側の余白を調整するCSSです。 paddingで上下、左右それぞれの数値を同じにすると実質縦も横も中央寄せにできます。 paddingについて詳しくはこちら↓

対応1：相手よりセレクタの優先度を高くしつつimportantを指定 importantは解除できませんが、上書きして実質効かせなくすることは可能です。 上書きする際は相手よりセレクタの優先度を高くしつつ、こちらもimportantをつけます。 例 .example{ margin: 0 !important; } ↑このCSSを上書きしてみましょう。 body .example{ margin: 100px !important; } ↑このように相手よりセレクタの優先度を高くしつつ、こちらもimportantをつけます。 カンタンなのは、相手と同じセレクタをコピーして、その上にbodyやhtmlなどのセレクタを追加することです。これで相手より1点分優先順位が上がるため上書きできます。 なお、上書きするCSSより後述できるのなら同じセレクタでも上書きできます。 セレクタの優先度については

CSSセレクタにおいて、クラスAにもクラスBにも指定したいとき、クラスAとクラスB両方指定されている場合のみ指定したいときがあるかと思います。 CSSセレクタでor条件(AまたはB)、and条件(AかつB)で複数指定する方法を説明します。 セレクタの基礎はこちら↓

overflowを使うと要素を隠したりスクロールさせることができます。 しかし、ある条件によりoverflowが効かない、うまくいかないことがあります。 CSSのoverflow:hiddenやscrollが効かない原因と対応方法について解説します。 tableをスクロールさせる方法はこちら↓

カンタンにバツを実装する方法 テキストの「×」を利用しましょう。 太字にしたり、文字を大きくするだけでそれっぽくなります。