【プログラミング学習】CSSに触れてみよう!をやってみた【Progate】




Let's touch CSS プログラミング
スポンサーリンク

いじゅ~もり(@ijumori)です。

 

Progateにてプログラミング学習を進めております。

Progateでプログラミングを学びます。まずはHTML&CSSから
...

 

前回の続きからということで、「HTML&CSS学習コース 初級編」の内の「CSSに触れてみよう!」を学んでいきます。

 

 

わかったこと

この章でわかったことを列挙します。

  • CSSはHTMLの要素に対して色、大きさ、配置などを指定する
  • CSSはページをデザインするもの
  • CSSで「どこの」「何を」「どうする」か指定する
  • 文字の色を変えるには、「color: #ff0000;」のように16進数のカラーコードで色を指定する
  • CSSで書くときもインデントをする
  • CSSのプロパティの末尾にはコロン(:)、行末にはセミコロン(;)をつける
  • コメントが記述できる
  • 「/* */」で囲まれた部分がコメントとなり、コメントは表示されないのでメモ代わりになる
  • 文字の大きさを指定するには、font-sizeプロパティを使う
  • font-sizeは、px(ピクセル)という単位を使う
  • 「fonto-size: 10px;」のように書く
  • フォントの種類を指定するには、font-familyプロパティを使う
  • 「font-family: フォント名;」のように書く
  • フォント名にスペースがある場合は、ダブルクオテーションで囲む
  • 背景色を変えるには、background-colorプロパティを使う
  • 「background-color: #dddddd」のように書く
  • 要素の横幅、高さを変えるには、widthプロパティ、heightプロパティを使う
  • width、heightはpxで指定する
  • 「width: 500px;」「height: 80px」のように書く
  • 要素にclassを使って名前をつけることができる
  • classをつけると別々のCSSを適用できる
  • class名でCSSを指定する場合、先頭に「.(ドット)」をつける
  • 複数の要素に同じclassをつけた場合、それらすべてに同じCSSが適用される

 

詳しくは次の記事で解説しています。

【HTML&CSS】CSSにおける文字の色・大きさ・種類の変え方
...

 

演習課題でやったこと

課題でやったことを列挙します。

  • <h1>要素の文字色を変えた
  • <p>要素の文字色を変えた
  • 文字の大きさ、種類を変えた
  • <h1>要素の背景色と<img>要素の高さと横幅を変えた
  • <li>要素に「secleted」classを与えた
  • secletedの文字色を変えた

 

わからなかったこと

classで少しつまずいた。

classはよく使っていくと思うので、しっかりと復習をしたいと思います。

逆に言うと、これから頻繁に使っていけば自然と使えるようになっていけるのかななんて思ったりもしています。

 

その他・感想

早くもつまずいてしまってちょっとショック。

でも、このまま突き進むのみ。

 

最後に

ウェブサイトを構築するのに必要な知識としてHTMLとCSSを学び始めました。

ワードプレスはHTMLやCSSの知識がなくても表示してくれるとても便利なサービスなのだということに気がつきました。

知識をつければさらに自分でカスタマイズができるので、これからも学習を続けていこうと思います。

そして、学習と並行して、いま運用しているブログやウェブサイトを少しずつカスタマイズして自分色を出したものにしていこうと思います。

 

最後まで読んでくれてありがとうございました。

いじゅ~もり(@ijumori)でした。