CSS

gridで並べた要素の順番を、CSSで入れ替えたいな。 こんにちは。 フリーランスWebコーダーの、たけちです。 コーディング案件では、display: gridで並べた要素の「順番」を入れ替えたいときがあると思います。 たとえば、PC時にReadMore...

CSSを使って画像の上に文字を重ねたいんだけど、どうすれば上手くできるかわからない。 Webサイトには画像の上に文字を重ねるデザインが数多くありますが、「どうやってCSSで表現しているんだろう？」と疑問に感じる人は少なくないと思います。 実ReadMore...

CSSを勉強中だけど、「子セレクタ」と「子孫セレクタ」の違いがよくわからない。 この記事では、CSSの「子セレクタ」と「子孫セレクタ」の違いや使い方について、わかりやすく解説します。 子セレクタと子孫セレクタの違いとは？ 子セレクタと子孫セReadMore...

CSSで「flex: 1」と書かれているのを見かけるけど、よく意味がわからない・・・。使い方をわかりやすく教えてほしい。 普段からFlexboxを使っている方でも、「flex: 1」という書き方に慣れていない人も多いと思います。 中には、ちReadMore...

画像と文字を左右交互に配置するレイアウトってどうやってコーディングすればいいんだろう？ コーディング案件では、下のようにPC時は画像とテキストが左右交互に配置され、スマホ時は縦並びになるデザインがよくあると思います。 この記事では、CSSをReadMore...

フォントサイズを画面幅に応じていい感じにレスポンシブ対応したい。 この記事では、CSSを使ってフォントサイズをレスポンシブ対応する方法を解説します。 フォントサイズをCSSでレスポンシブ対応する方法 CSSを使ってフォントサイズをレスポンシReadMore...

flex-growの使い方がイマイチわからない・・・。詳しい使い方をわかりやすく教えて欲しい。 flex-growは便利なCSSプロパティですが、使い方や仕組みがイマイチ理解できていない方もいると思います。 そこで今回は、flex-growReadMore...

HTMLで作成したtableのセルの幅を均等にしたい。 HTMLで作成したtableの各セルの横幅は、デフォルトだと文字幅に依存するため、均等ではありません。 そのため、CSSでの調整が必要です。 この記事では、tableセルの横幅を均等にReadMore...

スマホ画面のときはbrタグで改行させて、PC画面ではbrタグを無効化して改行させないようにしたい。 Webサイトのデザインを受け取ったとき、「PC画面とスマホ画面で改行位置が違う｣というケースはとても多いと思います。 そんな時によく使うテクReadMore...

table（テーブル）の背景色を行や列ごとに交互に変えたい。 tableで作った表は、1行（または1列）ごとに色分けされていると、さらに見やすくなりますね。 というわけで今回は、tableの背景色を行や列ごとに交互に変える方法を解説します。ReadMore...