プログラミングプログラミングの練習をする上でHTML/CSSの学習も行っていますが、今回は練習の一環として既存のサイトの模写をしてみました。次回に向けての備忘録として記事にします。厳密に「こうしなければならない」みたいなルールはないようなので、自分なりにルールを設けて取り組んでみました。原則ソースコードは見ない要素のサイズは測ってOK調べてもわからないところはとりあえず飛ばす初めてのサイト模写なのでとりあえずサイト作りの流れを掴めれば良いとして、ルールは緩めに設定。観光情報のポータルサイトを模写するサイトとして選びました。各ページへのリンクが多く全ページ模写するのは大変そうだったので、トップページのみということで。各要素の中に、さらに細かい要素を配置していく文章にするとたったの3行の作業に途方もなく時間がかかりました。「休みの日に集中してやれば1日で終わりそうかな~」なんて始める前は思っていたけれど、その自信がどこから湧いて出たのか本気で知りたい・・・。View左に模写元のサイトを表示。右に模写しているサイトを表示。最初は片方にエディタ、もう片方に模写しているサイトを表示してコードを書いていたけれど、サイト同士を左右で比較できる方が見やすかったです。テーブルのレイアウトが苦手かも・・・どうもテーブルの中身の要素が意図したサイズにならなかったり、スタイルが反映されなかったり・・・。テーブルを使った項目に関しては、時間をかけて調べたり試したりしても元サイトのとおりにならない部分があって、今回は諦めました。作業時間を記録しておけばよかった1日の作業時間を記録していなかったので、今回のサイト模写にかかった総時間がわからず。いざ仕事として扱うことになったときに、この作業に必要な時間がわからないのは何かと困ることがあると思うので、次回から作業の進捗と総時間を記録しておこうと思います。【CSS】flexboxでフッターのリストを作るCSSの勉強の過程で得た知識のアウトプット。「Git?なんか聞いたことある」程度の知識のプログラミング初学者です。...記事を読む【CSS】flexboxでフッターを画面最下部に固定する練習過程で学んだことのアウトプット。コメントをキャンセルメールアドレスが公開されることはありません。