背景に格子・ストライプを表現する2022年9月15日こんにちは。今回は最近の案件で学びになったCSSでの表現方法を紹介したいと思います。この画像を見てください。ポイントは背景に敷かれている格子状の線です。デザインが上がってきたときに「おー、、この背景どうコーディングしようかな?」ってなりました。repeating-linear-gradient();」でした。これを使うと格子デザインを再現することができます。実際の実装はこちらです。#000;}</style>実装結果が下記となります。終了カラー)しかし今回は格子状なので縦方向と横方向で二つの線の設定が必要なため、連続して記述しています。下記のような状態です。→右方向へリピート第2引数以降は横線の設定と同じ見たところ複雑なのですが、「見るより慣れろ」です。repeating-linear-gradientを使っているので本来はグラデーションを表現するためにあるものです。第3引数、第4引数の色や数値を変えるとどの様な流れで横線が繰り返されているかすぐわります。ストライプも実装可能ですこの使い方の理解ができればストライプもCSSだけで実現できます。#000;}</style>実装結果は下記。第2引数、第3引数でスタートの0pxから5pxまでを白色線の太さ、第4引数、第5引数で5pxから10pxまでを黄色線の太さと決めています。この0から10pxまでの白黄の2本を1セットとして繰り返しています。これもそれぞれの値を変えて見るとどのような仕組みでストライプができているのかがよくわかります。これの方法を知らずに安易に背景画像の素材をbackground-imageで設定してしまうと、画像サイズによっては読み込みに時間がかかったりとユーザビリティにも影響が出る可能性があります。UXの観点でもこの方法をマスターして活用してもたえたらと思います。スキルアップnewとインスタンスの関係newとインスタンスについて自分なりに理解した流れを書きます。スキルアップ【HTML】アップルのコード見たら優しさが溢れていた。アップルのサイトのソースコードを見てみると、いろんな学びがあったので記事にまとめました。子要素を親要素の上下左右中央に持ってくる方法を書きました。様々な方法があるのですが、個人的には今回紹介する方法がベストではないかと思います。参考になれば幸いです。けフロントエンドを本気で目指したい、スキルアップをしたい方々におすすめ講座をお教えします。スキルアップ【CSS】:first-childと:first-of-typeの違いは?last-childとlast-of-typeも同じ考え方first-childとfirst-of-typeの違いです。この二つは似ているのでときどき混乱しますので詳しく解説します。last-childとlast-of-type、nth-childとnth-of-typeの違いもこの考え方と同じです。【CSS】:first-childと:first-of-typeの違いは?last-childとlast-of-typeも同じ考え方プログラミング独学からの6年間の成長記録【現役フロントエンドエンジニアの振り返り】フロントエンドエンジニアYamato(やまと)7年目のフロントエンドです。サンフランシスコ留学の際にITの素晴らしさに触れエンジニアになると決心。独学で未経験からアルバイトで採用され入社。経験し2022年8月に独立しました。HTML/CSS・JS・WordPress・Shopifyを触っています。YAMATOdevlog。