初心者のプログラミングチャレンジ【６６～７０日目】
初心者のプログラミングチャレンジ【６６日目】
Webサイト模写 その１
アイコンにnavがついたので、次の課題です。
- 課題
- flexよりgrid？
- HTML修正
- CSSコメントアウト
- h2修正
- h3修正
- cssを書く
- お？
- おぉ！
- 惜しいけれど
- HTMLの揃え方がわからない
- picture、h3、articleに戻す
- もう少し
- 余白の修正が上達
タグの使い分けを、もう一度復習したくなりました。自分デフォルトはいろんな表現とpだったのですが、cssを指定するためならdivタグの方が有効である気がします。SEO対策などいろんな要件を考えなくてはいけないので、もう一度基本に戻って勉強します。
初心者のプログラミングチャレンジ【６７日目】
Webサイト模写 その１
nav固定が課題です。
- nav固定が課題
- stickyを書く
- 何も起きない
- fixedも変わらない
- う～ん…
- うう～ん…
- Google先生に聞いてみる
- CSSだけで位置を固定
- う～ん…
jQueryを使う方法がたくさん紹介されていますが、今はHTMLとCSSしか使えない（という前提条件）のため、CSSで実装できる方法を探しました。見つかりませんでした。邪魔をしているのは、親要素「position: absolute;」だと思っています。思っているのですが、アイコンnavとスクロール固定を同時に成立させる方法が思いつきません。困りました。
初心者のプログラミングチャレンジ【６８日目】
Webサイト模写 その１
nav固定は保留して、tabletに移ります。nav固定はあとから考えます。
- tabletに挑戦
- 崩れた場所
- 要素が不十分
- まずはfooterから
- cssを書く
- 変化なし
- footerにclass指定
- footerのリンクだけ文字色変更
- 無事に表示される
- 崩れていないことの確認
初心者の勢いを利用してHTMLを書いていたため、divとp、idとclassなど、間違えやすい場所を思い切り間違えています。書きながら、少しずつ覚え直していきます。
初心者のプログラミングチャレンジ【６９日目】
Webサイト模写 その１
初心者の勢いを大切にしつつ、少しずつ修正していきます。
- cssをまとめたい
- やればできる
- 要素を元に戻す
- idを付与
- HTMLの記述位置が違う
- 位置を修正、divに変更
- baseが崩れる
- base修正、無事に表示される
- tablet表示、微妙に違う
- 直してみる
- うまくいかない
- 実験
- 違う気がする…
- これも何か違う……
書いては直し、書いては直し、だったのですが、結局うまく表示されませんでした。inline、block、display、visibilityでもない。まだ惜しくない状態なので、これから頑張らなくてはいけません。あと残っているのは、何だろう。
初心者のプログラミングチャレンジ【７０日目】
Webサイト模写 その１
初心者の勢いを大切にしつつ、少しずつ修正していきます。
- 気持ちを新たに、頑張ろう
- base修正
- HTMLにhr挿入
- base修正
- 無事に表示される
- 体裁が整わない
- divにしてみる
- idをつけてみる
- 表示されない
- これも表示されない…
簡単に修正できると考えていたのですが、うまく表示させられませんでした。細かい修正が、とても難しいです。何か動いてくれないと、解決の糸口がつかめませんよね。変化なしと崩れるのでは、いっそ崩れてくれた方が修正しやすい気がします。