初心者のプログラミングチャレンジ【６６～７０日目】

初心者のプログラミングチャレンジ【６６日目】

Webサイト模写 その１

アイコンにnavがついたので、次の課題です。

1. 課題
2. flexよりgrid？
3. HTML修正
4. CSSコメントアウト
5. h2修正
6. h3修正
7. cssを書く
8. お？
9. おぉ！
10. 惜しいけれど
11. HTMLの揃え方がわからない
12. picture、h3、articleに戻す
13. もう少し
14. 余白の修正が上達

タグの使い分けを、もう一度復習したくなりました。自分デフォルトはいろんな表現とpだったのですが、cssを指定するためならdivタグの方が有効である気がします。SEO対策などいろんな要件を考えなくてはいけないので、もう一度基本に戻って勉強します。

初心者のプログラミングチャレンジ【６７日目】

Webサイト模写 その１

nav固定が課題です。

1. nav固定が課題
2. stickyを書く
3. 何も起きない
4. fixedも変わらない
5. う～ん…
6. うう～ん…
7. Google先生に聞いてみる
8. CSSだけで位置を固定
9. う～ん…

jQueryを使う方法がたくさん紹介されていますが、今はHTMLとCSSしか使えない（という前提条件）のため、CSSで実装できる方法を探しました。見つかりませんでした。邪魔をしているのは、親要素「position: absolute;」だと思っています。思っているのですが、アイコンnavとスクロール固定を同時に成立させる方法が思いつきません。困りました。

初心者のプログラミングチャレンジ【６８日目】

Webサイト模写 その１

nav固定は保留して、tabletに移ります。nav固定はあとから考えます。

1. tabletに挑戦
2. 崩れた場所
3. 要素が不十分
4. まずはfooterから
5. cssを書く
6. 変化なし
7. footerにclass指定
8. footerのリンクだけ文字色変更
9. 無事に表示される
10. 崩れていないことの確認

初心者の勢いを利用してHTMLを書いていたため、divとp、idとclassなど、間違えやすい場所を思い切り間違えています。書きながら、少しずつ覚え直していきます。

初心者のプログラミングチャレンジ【６９日目】

Webサイト模写 その１

初心者の勢いを大切にしつつ、少しずつ修正していきます。

1. cssをまとめたい
2. やればできる
3. 要素を元に戻す
4. idを付与
5. HTMLの記述位置が違う
6. 位置を修正、divに変更
7. baseが崩れる
8. base修正、無事に表示される
9. tablet表示、微妙に違う
10. 直してみる
11. うまくいかない
12. 実験
13. 違う気がする…
14. これも何か違う……

書いては直し、書いては直し、だったのですが、結局うまく表示されませんでした。inline、block、display、visibilityでもない。まだ惜しくない状態なので、これから頑張らなくてはいけません。あと残っているのは、何だろう。

初心者のプログラミングチャレンジ【７０日目】

Webサイト模写 その１

初心者の勢いを大切にしつつ、少しずつ修正していきます。

1. 気持ちを新たに、頑張ろう
2. base修正
3. HTMLにhr挿入
4. base修正
5. 無事に表示される
6. 体裁が整わない
7. divにしてみる
8. idをつけてみる
9. 表示されない
10. これも表示されない…

簡単に修正できると考えていたのですが、うまく表示させられませんでした。細かい修正が、とても難しいです。何か動いてくれないと、解決の糸口がつかめませんよね。変化なしと崩れるのでは、いっそ崩れてくれた方が修正しやすい気がします。

満稀（みつき）

大人だからこそ効率的に勉強したい運営者

TwitterContact

社会人スタートはブラック作業員から。コツコツ勉強を続けることで、ITエンジニアになることができました。これからも地道に『独学×資格×勉強=スキルUP&収入UP』を目指していきます。