こんにちは、わっぺんです。
昨日よりプログラミングのオンライン学習サイト”Progate”で学んでいるのですが・・・面白いですね！
初級のHTML＆CSSコースというものから始めていますが、特に、ブログを始めたての今だからこそ知りたかった情報が満載です！WordPressはテーマを設定すればある程度自動で整えてはくれますが、”どのような仕組みで動いているのか”を知ることによって、自分の意図したように、使いやすいように変更できるのが良いですし、何より、”どうしてそうなっているのか？”という理論の部分を学べるのが楽しいです！
※初日の学習の様子はこちらです。
昨日、[<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分
【本日のレベル】
レベル６ → レベル１１
わっぺん
※学習３日目の様子はこちらからどうぞ！
コメント