第一関門突破！
プログラミング初心者のオヤジです。やっと暗記カードの画面が完成！ボックスの位置調整が思いのほか難航しました。これからの作業に参考になるものはないかと、一生懸命ドットインストールをしています。
暗記カードを作ろう6日目
ボックスの位置の調整ができました。最終的にflexboxという方法でボックスを作りました。
やったことは、前回の画像の状態から何とか調整ができないかと試行錯誤をしました。
- HTMLで<ul>と<li>を使ってリストを作り
- <li>をCSSでinline-blockを使い整える
の方法でしました。形はそれなりにできたのですが、全体的に微妙な感じでした。
なんか、しっくりこなかったので、もう一度検索です。
次はflexboxを試してみました。
- HTMLでflexboxをつかいリストを作る
- CSSでdisplay: flexとすると、まずは横並びになりました。
- 次にjustify-content: center;で2つのボックスが中心に移動。
できた！やればできる！
今回の反省点は、一番最初の上手くいっていないときのコードを全部消してしまっていることです。
やり直すときに、全部消してからやり直したので、最初にどんなコードを入れていたか分かんなくなりました。今後のためにも今度からコメントにしてからやり直すようにしようと思います。
参考にしたサイトのリンクを下に貼っておきます。よかったら参考にしてください。
今日のドットインストール
- ヘッダーのスタイルを整えよう
- スマートフォン用のメニューを作ろう
の２つをCSSを使っての調整をしました。今までドットインストールでCSSをするときは、特に何も気にしていませんでした。でも、自分ですることを想定しながら見ていると今までより吸収できている気がします。
プログラミング歴75日目。やっと画面ができました。画面の構成を決めるだけなのに時間がかかりました。自分のイメージだとここまで２日くらいのイメージでしたが・・・。ここからの作業はどのくらい時間がかかるんだろう。何がわからないって、ここからどんなふうにプログラミングしていくのか、まだ決まっていないのですから。現実のことはさておき、夢と希望が広がる今日この頃です。
