Progate HTML&CSS初級講座2日目[Lv.6]

プログラミング

こんにちは、わっぺんです。

昨日よりプログラミングのオンライン学習サイト”Progate”で学んでいるのですが・・・面白いですね!
初級のHTML&CSSコースというものから始めていますが、特に、ブログを始めたての今だからこそ知りたかった情報が満載です!WordPressはテーマを設定すればある程度自動で整えてはくれますが、”どのような仕組みで動いているのか”を知ることによって、自分の意図したように、使いやすいように変更できるのが良いですし、何より、”どうしてそうなっているのか?”という理論の部分を学べるのが楽しいです!

※初日の学習の様子はこちらです。

Progate HTML&CSS初級講座初日[Lv.1]
こんにちは。わっぺんです。”Progate”早速やってみましたよ!※Progateについてはこちらで書いています。Progateでの学習コース選びProgateの学習は、オンラインでスライドを見ながら行うので、・PC・ネ...
Progate HTML&CSS初級講座初日[Lv.2]
こんにちは、わっぺんです。Progate学習初日の続きです!※ちなみに、前回の記事はこちらです。わっぺん、”見出しと段落”を学ぶ前回は”タイトルタグ”を学んだわけですが、”見出しと段落”について学んでいくようです。これは・...

昨日、[<h2>タグ]というものを覚えたので、早速記事に入れてみました。どうやら、WordPressのテーマで初期設定されている見出し用の値があるようで、[<h2>タグ]を入れただけで少しだけ、見出しっぽくなりました!ただ、自分なりに表現したい見出し表示にするためには”スタイルシート”(多分、WordPressのテーマの)をいじる必要がありそうです。よって、本日の目標は、学習を終えた後に”思い描いている見出しの表示を設定する”こととします。

では、早速本日も学んできます。

Progate学習2日目

本日は実際にトップページをつくる、という学習内容です。

  • ヘッダー
  • メイン
  • フッター

のそれぞれの項目について、サンプルとなる画像のように表示するために設定していきます。具体的には、下記のようなことを変更していきます。

  • 余白の調整
  • 枠線の引き方
  • 背景やフォントの設定

(わっぺん学習中です。しばらくお待ちください)

・・・なんとか、修了しました!

個人的には、class属性の考え方が難しかったです・・・。「これは要素?属性??」みたいな感じで混乱してしまって。昨日のことをもう忘れているという鳥頭・・・。ある程度まとめて時間をとってやった方がいいかもしれないなーと感じました。何はともあれ、まずは第一段階クリアできてよかったです!

さて、ということで、せっかく学んだので、早速本サイトに反映してみます!

見出しの見せ方変更

さて、”見やすい、かわいい見出し”を目指して修正していくのですが、ここで今までの本サイトの見出し変遷を載せておきます。

①Progate学習前の見出し

ただの強調文字です。

②Progate学習初日の見出し

[<h2>タグ]を入力しただけのものです。WordPressのテーマのおかげで見出しっぽくしてくれていますね。

さて、そんなわけで、いよいよ本日学習後のものです。”スタイルシートを修正する”という技を本日会得しましたので、そちらを使用して修正します。

修正しようと思ったら、スタイルシートがどこにあるか、で戸惑う始末・・・。無事に、「外観」→「テーマの編集」からたどり着けました。さて、いよいよ子テーマのスタイルシートを編集していきます。

【追加したコード】
h2{
background-color:#87CEEB;
pedding:10px;
}

どんっ!


あれ?見出しの左側に黒い線が・・・。
そうかそうか、これも指定しなきゃなのかな・・?

【修正したコード】
h2{
border:none;
background-color:#87CEEB;
pedding:10px;
}

では改めて・・・、どんっ!


あれ?消えないですね・・・。もしかして、[<h2>]の前にclassの指定が必要なのかな・・・
わからないので、少しGoogle先生に相談します。

・・・

ふむふむ。どうやら、[.article]の指定が必要なようです。逆にどうして背景色などは変更できたんだろう?わからないですが、気を取り直して。

【修正したコード】
.article h2{
border:none;
background-color:#87CEEB;
pedding:10px;
}

ぽちっ

消えた!

シンプルなデザインですが、まずは修正に成功しました!よかったー。
ということで、本日はひとまずここまで。今から過去記事にタグ付けてこなければ・・・!

ありがとうございました。

Progate学習2日目まとめ

【本日学んだこと】
・レイアウトの作成

【時間】
2時間30分

【本日のレベル】
レベル6 → レベル11

わっぺん

※学習3日目の様子はこちらからどうぞ!

Progate HTML&CSS中級講座1日目?[Lv.11]
こんにちは、わっぺんです。本日はいつものようにProgateでプログラミングを学ぶ時間が取れなかったのですが、一日少しの時間でも触れておかないと忘れてしまいそうなので、少しだけ学習しようと思います。※昨日の学習の様子ですPro...

コメント

タイトルとURLをコピーしました