css13本ノック!progate一周したあとの簡単復習【プログラミング】

HTML/CSS

こんにちは、なっちる先生(@nacchi_jagariko)です。

先日、以下のようなツイートをしました。

【現実】
これだけしか正確に覚えていないcss。
color fontcolor fontsize float textalign position display backgroundcolor background width height border margin padding
HTMLのタグとの兼ね合いは作りながら学びます😌
これだけでHPは作れる。
あとはやんわりと記憶にあって、ググる感じ。

※fontcolorは存在しません。間違いです。

逆に言えば、これだけおさえれば、全然Webサイトは作れます!

ということで、今回は、cssの総復習として、上の13個のcssを簡単に復習していきます〜。

なお、この記事は、ある程度学習サイト(progateやドットインストール)でHTML・CSSを学んだ人向けになります。

どのくらい理解できてたかな!?!?

では、参りましょう〜。

スポンサーリンク

 css一覧

早速、cssの総復習をしましょう〜。

以下では、cssの「プロパティ:値」の「プロパティ」を先に紹介し、よく使う「値」をコードを示しながら、紹介していきます〜。

color

文字色を指定するプロパティです。

値は、「#〇〇〇〇〇〇」や「rgb(○,△,×)」で表します。

単純な色だと、カラー名(whiteやblack)で表すこともできます。

See the Pen ROLWPz by なっちる先生@もっちるの先生 (@nacchi_jagariko) on CodePen.

font-size

文字の大きさを指定するプロパティです。

値としては、「px・%・em・rem」で表します。(↓参考にしてください)

cssサイズ指定方法(px・%・em・rem)の違いを知ろう!
こんにちは、なっちる先生(@nacchi_jagariko)です。 現在、フリーランスとして活動しています。 突然ですが、cssでサイズ指定をするとき、サイズの単位について注意しながらコードを書いていますか? ...

See the Pen eoGpzy by なっちる先生@もっちるの先生 (@nacchi_jagariko) on CodePen.

float

要素を浮かばせることができるプロパティです。

要素を横並びにするときによく使います。

値としては、「right・left」があります。

※flexboxの登場により、floatが活躍する出番は減っています。

See the Pen OGxypM by なっちる先生@もっちるの先生 (@nacchi_jagariko) on CodePen.

text-align

文字などを揃える方向を指定できるプロパティです。

値としては、「left・center・right」があります。

See the Pen BEwoZz by なっちる先生@もっちるの先生 (@nacchi_jagariko) on CodePen.

画像を真ん中にしたいというときにも、imgタグを囲んだタグにtext-alignのスタイルをあてれば簡単に解決できます。

地味によく使います。

See the Pen EJwVvd by なっちる先生@もっちるの先生 (@nacchi_jagariko) on CodePen.

position

要素の位置を決めるプロパティです。

値としては、「absolute・relative・fixed」がありますが、fixedはあまり使いません。

positionと必ず一緒に使うのが「top・right・left・bottom」ですね。

See the Pen MREaQV by なっちる先生@もっちるの先生 (@nacchi_jagariko) on CodePen.

display

要素の表示形式を指定するプロパティです。

よく値としては、「block・none・flex・inline・inline-block」です。

See the Pen KYXdrQ by なっちる先生@もっちるの先生 (@nacchi_jagariko) on CodePen.

background

背景を一気にまとめて指定するプロパティです。

backgroundには主に、

background
-color(色)
-image(画像)
-repeat(リピート)
-position(位置)
-size(大きさ)

を使います。

See the Pen ZZXQzm by なっちる先生@もっちるの先生 (@nacchi_jagariko) on CodePen.

width/height

要素の長さと高さをそれぞれ指定するプロパティです。

border

枠線を指定するプロパティです。

値としては、「長さ スタイル 色」と記述します。

スタイルとしては、「solid・dashed」を使います。

See the Pen ZZXQRg by なっちる先生@もっちるの先生 (@nacchi_jagariko) on CodePen.

margin

要素の周りの空白を指定するプロパティです。

See the Pen rbGxQa by なっちる先生@もっちるの先生 (@nacchi_jagariko) on CodePen.

padding

要素の中の空白を指定するプロパティです。

See the Pen KYXVGY by なっちる先生@もっちるの先生 (@nacchi_jagariko) on CodePen.

marginとpaddingの違いはきちんと理解できていたかな?

 まとめ

以上、これだけおさえれば大丈夫なcssを、ざっと簡単に復習しました〜。

いかがだったでしょうか?

いい復習になったことを祈っています。

完璧主義にならず、感覚的に理解してみてください!

そのあとは、ただモノを作るのみです。

遊んでいきましょう〜!

以上で、なっちる先生の授業を終わります。

素敵なプログラミングライフを!

参考

Webサイトとりあえず作ってみよう!【ポートフォリオ】
こんにちは、なっちる先生(@nacchi_jagariko)です。 大学中退後、プログラミング完全未経験から就職し、絶賛リモートワーク中のものです。 先日こんなツイートをしました。 【プログラミング初心者勉強方法】 「ど...
プログラミング勉強方法【完全未経験でエンジニアになった私が語る!】
こんにちは、なっちる先生(@nacchi_jagariko)です。 大学中退後、プログラミング完全未経験から就職し、絶賛リモートワーク中のものです。 先日このようなツイートをしました。 【プログラミング初心者勉強方...
タイトルとURLをコピーしました