CSS練習問題 #001 ～見出しを作ろう～

4月からサンシーアに入社するメンバー用にCSSの練習問題を作成しました！

CSSでどんな事が出来るかが分かれば検索のコツも身につき、いっきに初心者から中級者に近づけます。

「画像を使わなくてもいろいろな表現ができる」ということが体感できると、視野が広がってCSSが楽しくなってくるかもしれません

各問題の右上にあるこのロゴをクリックすると、自分で手を動かして実際に仕上がりを確認しながら問題に取り組めます。

※ルールーは以下の通りです

• CSSを編集して見出しの外観をデザイン画に近づける
• HTMLの変更は禁止
• 画像の使用は禁止
• before疑似要素、after疑似要素のcontentは""にすること(文字や記号を入れない)
• 検索はどんどんしてください

#Q1.丸い矢印が付いたデザインにしてください

See the Pen CSS練習問題 1 ～見出し～ Q1 by sun19017 (@sun19017) on CodePen.

**回答例** (クリックすると表示されます)

See the Pen CodePen Home CSS練習問題 1 ～見出し～ A1 by sun19017 (@sun19017) on CodePen.

**解説** (クリックすると表示されます)

before疑似要素で緑の円、after疑似要素で白の矢印を表現します。 positionで位置を調整したり、要素を回転することができることも覚えておくと良いと思います。

#Q2.吹き出しのようなデザインにしてください

See the Pen CSS練習問題 1 ～見出し～ Q2 by sun19017 (@sun19017) on CodePen.

**回答例** (クリックすると表示されます)

See the Pen CSS練習問題 1 ～見出し～ A2 by sun19017 (@sun19017) on CodePen.

**解説** (クリックすると表示されます)

位置を調整する時にマイナス値を設定することもできます。

#Q3.吹き出しのようなデザインにしてください(別パターン)

See the Pen CSS練習問題 1 ～見出し～ Q3 by sun19017 (@sun19017) on CodePen.

**回答例** (クリックすると表示されます)

See the Pen CSS練習問題 1 ～見出し～ A3 by sun19017 (@sun19017) on CodePen.

**解説** (クリックすると表示されます)

やることはQ2と大体同じですが、bottomの位置が1pxでもずれると綺麗にできません。

#Q4.タグのようなデザインにしてください

See the Pen CSS練習問題 1 ～見出し～ Q4 by sun19017 (@sun19017) on CodePen.

**回答例** (クリックすると表示されます)

See the Pen CodePen Home CSS練習問題 1 ～見出し～ A4 by sun19017 (@sun19017) on CodePen.

**解説** (クリックすると表示されます)

border-radiusを50%に指定すると、全体が楕円形になってしまいます。 両端だけを丸くするにはどうすればよいかを考えるのがポイントです。

#Q5.頭文字だけ文字の色とサイズを変えてください

See the Pen CSS練習問題 1 ～見出し～ Q5 by sun19017 (@sun19017) on CodePen.

**回答例** (クリックすると表示されます)

See the Pen CSS練習問題 1 ～見出し～ A5 by sun19017 (@sun19017) on CodePen.

**解説** (クリックすると表示されます)

first-letterという疑似要素を使います。 疑似要素は沢山あるので他にどんな疑似要素があるかを調べてみると引き出しが増えると思います。

#Q6.背景をグラデーションにしてください

See the Pen CSS練習問題 1 ～見出し～ Q6 by sun19017 (@sun19017) on CodePen.

**回答例** (クリックすると表示されます)

See the Pen CSS練習問題 1 ～見出し～ A6 by sun19017 (@sun19017) on CodePen.

**解説** (クリックすると表示されます)

liner-gradientは向きを斜めにしたり3色以上の色を指定するなど、パラメータによっていろいろな表現ができます。

#Q7.背景をツートーンにしてください

See the Pen CSS練習問題 1 ～見出し～ Q7 by sun19017 (@sun19017) on CodePen.

**回答例** (クリックすると表示されます)

See the Pen CSS練習問題 1 ～見出し～A7 by sun19017 (@sun19017) on CodePen.

**解説** (クリックすると表示されます)

外観的にはグラデーションではありませんが、liner-gradientを応用するとこんな表現もできます。

#Q8.リボンが付いたデザインにしてください

See the Pen CSS練習問題 1 ～見出し～ Q8 by sun19017 (@sun19017) on CodePen.

**回答例** (クリックすると表示されます)

See the Pen CSS練習問題 1 ～見出し～ A8 by sun19017 (@sun19017) on CodePen.

**解説** (クリックすると表示されます)

borderの仕組みを理解しましょう。