ストライプの背景を作る方法【コーディング編】 | ーーーーーー

 

ストライプの背景をCSSで実装するには?

 

【本日実装したいこと】

サックス×白の斜めストライプの背景の上に、画像やテキストを重ねたデザインを作る

 

 

 

その実装方法は次の通り

 

①無料のCSSストライプ作成ジェネレーターに数値を入力する

 

 

 
 
 
下のように入力すると、色合いが表示される。
 
 
 
 
②CSSが表示されるので、コードをコピーする。
 
 
③HTMLで、<div>を作り、<div>に②でコピーしたコードを貼り付ける
 
④その中に<div>タグで囲んだ画像とテキストを入力する。
 
⑤<div>タグをdisplay: flex;にして横並びにし、画像の大きさを調整する。
 
 
 
以上で実装完了です。
 
今日もお疲れ様でした。