CSSグリッドでコンテナを並べ替えするやり方

CSSグリッドレイアウトを使ってコンテナの表示の順番を並べ替える方法です。 サンプルのHTML & CSS まずは土台となるHTMLとCSSはこちら。 CSSグリッドで並べ替える これをCSSグリッドを用いて並べ … “CSSグリッドでコンテナを並べ替えするやり方”の続きを読む

CSSでテキストに影をつけるとき(text-shadow)のやり方

CSSで文字に影(ドロップシャドウ)を付けたいときはtext-shadowプロパティを使うことで影をつくることができます。 text-shadowの使い方 1番目の値で横の位置、2番目の値で縦の位置を指定し、3番目の値で … “CSSでテキストに影をつけるとき(text-shadow)のやり方”の続きを読む

フレキシブルボックスでカード型レイアウトをするとき、ネガティブマージンを使うと便利

フレキシブルボックス(flexbox)でカード型レイアウトをするとき、ネガティブマージンを使うと便利でした。 ネガティブマージンを使わなかったとき 例えば、カード型レイアウトのカード部分にmarginで空白を広げたときに … “フレキシブルボックスでカード型レイアウトをするとき、ネガティブマージンを使うと便利”の続きを読む

CSSで文章の最初の一文字目を大きくするやり方

雑誌などでよく見かけたりする、最初の一文字を大きくして表示してある装飾の文章。 そのような表現を、CSSでやってみるときのやり方の説明です。 :first-letter擬似要素を利用すると、最初の文字を対象に装飾を指定す … “CSSで文章の最初の一文字目を大きくするやり方”の続きを読む

カテゴリー CSS

CSSでテーブルの列・行の背景色を偶数(奇数)ごとに指定するやり方

テーブルの列(たて)や、行(よこ)の背景色を交互に変更したいというときのCSSの記述のやり方です。 1列ごと(または1行ごと)に背景色を変えるときは、偶数・奇数のどちらかに指定してあげればよいということなので、擬似クラス … “CSSでテーブルの列・行の背景色を偶数(奇数)ごとに指定するやり方”の続きを読む

CSSで文字の字下げを行うやり方

CSSで段落の先頭を字下げしたいときや、2行目以降を字下げしたいときはtext-indentプロパティを使うことで字下げをすることができます。 最初の行を1文字分、字下げする 単位にemを使うことで、1字分をあらわしてい … “CSSで文字の字下げを行うやり方”の続きを読む