思考のジャンプ幅が狭いなら,飛ぶ回数で補えばいいじゃない!!

非情報系30歳が競技プログラミングやWeb開発を始めるとどうなるか?

#100DaysOfCode day17 HTML5&CSS3を使ったビューの作成

目次

結論

  • 手持ち&調べたHTML5とCSS3の知識で,クローンアプリのUIを作成中.

進捗状況

f:id:hiro_kato:20190530230120j:plain f:id:hiro_kato:20190530230134j:plain

何を達成したい(作りたい)か?

  • オリジナルアプリを公開して,10人に使ってもらう.

何ができないか?

  • HTML&CSSの基礎をProgateで学んだが,実践には至っていない.

実践したこと

  • 今ある知識と調べて得た知識で,クローンアプリのホーム画面を作成中.

何を作っている?

  • Q&Aサイトのクローンアプリ.

なぜ必要?

  • 質問と回答の場を集約すると,情報を探す手間が軽減され,問題を解く/解説することに集中できるようになると思ったため.

何ができるようになったか?

  • HTML5

    • ヘッダーの作成

    • 一覧のテーブル(一部)と詳細ページに飛ぶためのボタンを作成

    • 一覧の問題名にリンクを貼った

    • フッターの作成

  • CSS3

    • ヘッダー・フッターの色・サイズおよび位置の調整の初歩的な部分
  • GitおよびGitHubを使って,チーム開発を前提とした開発を模擬.以前,拝見した方法を踏襲.

    • 15~30分程度と見積もったタスクごとにIssueを立てる.

    • ローカル環境で,Issue番号の付いたブランチを切る.

    • タスクを実践.

    • ステージング & コミット.コミットメッセージにIssue番号を入れる.

    • GitHub上でPull Requestを送り,コンフリクトが起きていないことを確認してmasterブランチにmerge.

    • ローカル環境で,masterブランチに移動し,git pullで最新の状態を反映させる.

    • 上記を繰り返す.

ハマった点と対処方法

  • ハマった点1:ヘッダーのナビマップの配置が左側のまま.

  • 理由1:CSSの設定が誤っていた.li要素のfloatの指定をrightにしていたため.

  • 対処方法1:

    • ナビマップを横並びに配置するため,ul要素でdisplayプロパティにflexを指定する.ここで,marginも設定しておく.

    • ヘッダーのpositionプロパティを相対配置(relative)に指定.

    • ナビマップのpositionプロパティを絶対配置(absolute)にして,右側(right)を指定する.

/* 関連部分を一部抜粋 */

header {
    background-color: black;
    color: white;
    height: 60px;
    position: relative;
}

/* ナビマップ */
.header-list {
    line-height: 30px;
    position: absolute;
    right: 0;
}

.header-list ul {
    display: flex;
    margin: 16px;
}

.header-list li {
    /* 誤って float: right; を指定いたため削除 */
    padding: 0px 15px;
}

開発中の該当コード

疑問点・課題

  • テーブルの問題一覧だけを左端にしたい.

  • 詳細ページの作成.

次に何をやるべきか?

  • テーブルの文字の配置を指定を修正する.

  • 詳細ページの作成.

  • リンクを動的に生成する.

    • 現状:参照元のサイトのURLを直接貼っている点,コードの重複がある点がよくない.

    • 理由:更新作業のミスを減らすため.

  • Railsチュートリアルの挫折の原因の一つである,データベースの基礎を学ぶ.

  • タスクの粒度がだいたい同じぐらいになるように揃える.

感想

  • 自分の作ってみたいものが,少しでも形になると単純にうれしいです.

  • GitHub上で進み具合が見える化されるため,モチベーションが爆上がりしました.

参考

prog-8.com

山崎響:HTML5&CSS3しっかり入門教室 ゼロからよくわかる、使える力が身につく。,翔泳社,pp.146-150,2018.7.