2歩戻ったら2.5歩進みたい

関東で働くweb developerのブログ

「Pythonでwebサービスを作る」学習メモ2巻①

こんにちは。きゃにすたーです。

この記事は「Pythonwebサービスを作る」の2巻の学習メモその①です。

前回の記事はこちら。

canisterism.hatenablog.com

ソースはこちらに。

github.com

Bootstrapを扱う

webデザインの見た目を手軽に整えるためのフレームワークです。ついでにスマホタブレットなんかで見てもデザインが崩れないレスポンシブデザインも実現出来るすげーやつです。

実装にはheadの部分でcssを定義し、bodyの下でjspopperBootstrapの順番で読み込む必要があります。

読み込むにはダウンロードしてきたファイルをプロジェクトフォルダ内に置いて読み込む方法と、CDN(content delivery network)といってネットワーク上のパスを指定して読み込む方法があります。本書では様々な理由からCDNを推奨しています。

写経しようと思うとクソ長ったらしいパスを打ち込む必要があるので以下のリンクからサクッととコピーしましょう。(kindleのアプリからコピーしようと思うと謎の空白が挿入されました。)

cccabinet.jpn.org

ヘッダの作成

htmlでナビゲーションを表すnavタグにnavbarをクラス指定します。

背景色は本書の中でbg-primaryで指定していますが、他にもbg-warningにすれば黄色、bg-successにすれば緑色という感じで、出したい情報に応じて使い分けることができるようです。

コンテナ

divタグのクラスにcontainerを指定することでdivで括られた箇所が一つの枠の中に収まるように調節してくれます。

ジャンボトロン

見出しを設定するためのレイアウトです。見出しとして目立たせたい部分をjumbotronクラスを指定したdivタグで囲います。

ナビゲーションバー

webサイトで画面の上の方に「メニュー」とか「about us」みたいなのが書いてるバーです。navタグで実装でき、これも表示する画面によって表示を折りたたんだりすることができます。

モバイル端末で折りたたみたい要素にはcollapse navbar-collapseを指定し、折りたたんだナビゲーションにはnavbar-togglerというクラスを指定します。ここで、data-togglecollapseを、data-target#navbarTextを指定します。

これによってnavbarTextを指定しているタグに対して、ボタンを押すたびにdata-toggleで指定したクラスがon-offされます。

ボタンの見た目を整える

aタグのclassbtnを指定し、色を指定しましょう。

<a href="/login" class="btn btn-primary">

これでそれっぽい見た目のボタンができます。

グリッドレイアウト

Bootstrapの重要な仕組みで、画面を行と列に分けたグリッド状の形で管理することで、レスポンシブレイアウトを実現しています。基本的には要素に対してclassを割り当てることでオブジェクトの挙動を制限しています。

…というとなんだかピンとこないですが、以下のサイトが分かりやすかったです。

websae.net

要するにcontainerの中にrowがあり、その中にcolがある、という区切り方でデザインしているということです。なおかつその画面幅は12個のグリッドで分けられている、という感じですね。

なお、Bootstrap4からクラス名が変わっており、Bootstrap3との互換性が無いようです。

colcol-{prefix}-{columns}という形で書きます。

簡単に言い換えると

col-{この画面サイズの時}-{割り当てるグリッド幅}という感じ。

col-lg-8ならば画面サイズがlg(large)の時は8カラム分割り当てる、という感じです。

ざっくりコードはこんな感じになります。

<div class="container">
    <div class="row">
        <div class="col-2 col-sm-1 col-md-1 col-lg-1">
            <img class="img-thumnail" style="min-width:width36px;max-width:50px;" src="/static/b.jpg">        
        </div>
        <div class="col-10 col-sm-11 col-md-11 col-lg-11">
            <div class="card text-center">
                <div class="card-body">
                    <p class="card-text">質問や回答を入れるための箱です。</p>
                    <a href="/reply/1" class="btn btn-primary">返信する</a>
                </div>
            </div>
        </div>
    </div>
</div>

divタグのクラスが、containerrowcolとなっているのが分かると思います。作った見た目はこんな感じになります。

f:id:canisterism:20180429223034p:plain

Font Awesome

webサービスを作っていると文字だけではなく色々なアイコンが欲しくなる時がありますよね。現代のインターネッツではニーズがあればサービスが提供されています。今回の場合で言えばFont Awesomeというサービスです。

fontawesome.com

なんと完全フリーで使え、課金すればさらに使えるアイコンの種類が増えます。これを使う時は、Bootstrapと同じようにCDNで提供されているので、bodyタグの後ろにアドレスを貼り付けましょう。

実際にアイコンを挿入させるには、置きたい場所にiタグを置きます。そのクラス名にFont Awesomeのアイコンを使用することを示すfaを書き、その後ろにどのアイコンを示すかクラス指定します。本書では返信を示すfa-replyを使用しました。まとめるとこんな感じのコードです。

<i class="fa fa-reply "></i>

半分ぐらいまで行った時の見た目

この後、本書ではゴリゴリとグリッドレイアウトを使ってページを作っていきます。細かいのでメモしきれませんでしたが、最終的には半分ぐらいまで行くとこんな感じになります。 f:id:canisterism:20180429223039p:plain

いい感じですね。

次のエントリはデータベース編です。ありがとうございました。