CSSでボタン内の文字を中央寄せにする方法
「ボタンを作ったけど文字が左上にぴったりくっついていてバランスが悪い。文字をボタン内で中央寄せしたいけどどうやるの？」 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について詳しくはこちら↓
【html/CSS】幅(width)を子要素に合わせる方法
親要素がdivなどのブロック要素の場合、何もしないと横幅がいっぱいになります。 下記は青背景が親要素、オレンジ背景が子要素です。後述する方法の比較のため兄弟要素にspanタグをいれています。 divの兄弟要素のspan <style> .example{ background: #77abd8; } .example>*{ background: #d3a142; } </style> <div class="example"> <a href="#">子要素(aタグ)</a> </div> <span>divの兄弟要素のspan</span> この親要素を子要素の幅に合わせましょう。
【CSS】tableの奇数行,偶数行・奇数列,偶数列の指定方法
「表の奇数行と偶数行の色を変えたい！」 tableの奇数行・偶数行、奇数列・偶数列を指定する方法を紹介します。 結論 【偶数行】tr:nth-of-type(2n) td【奇数行】tr:nth-of-type(2n-1) td【偶数列】td:nth-of-type(2n)【奇数列】td:nth-of-type(2n-1) 下記より詳しく解説します。
inputのname属性をcssセレクタとして指定する方法
inputではname属性での指定がつきものです。そしてそのname属性は多くの場合個別の値が指定されます。 ならわざわざclassをつけなくてもこのnameをセレクタとして指定できないだろうか。 ということでinputのname属性をcssセレクタとして指定する方法を紹介します。 例 <style> input[name="example"]{ border: 1px solid #999; padding: 10px; background: #f2f2f2; display: block; margin-bottom: 10px; } </style> <input name="example" type="text" value="指定"> <input type="text" value="未指定"> []を使うセレクタを属性セレクタと言います。この[]内にはhtmlタグの属性や
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
