「Pythonでwebサービスを作る」学習メモ2巻①
こんにちは。きゃにすたーです。
この記事は「Pythonでwebサービスを作る」の2巻の学習メモその①です。
前回の記事はこちら。
ソースはこちらに。
Bootstrapを扱う
webデザインの見た目を手軽に整えるためのフレームワークです。ついでにスマホやタブレットなんかで見てもデザインが崩れないレスポンシブデザインも実現出来るすげーやつです。
実装にはhead
の部分でcssを定義し、body
の下でjs
→popper
→Bootstrap
の順番で読み込む必要があります。
読み込むにはダウンロードしてきたファイルをプロジェクトフォルダ内に置いて読み込む方法と、CDN(content delivery network)といってネットワーク上のパスを指定して読み込む方法があります。本書では様々な理由からCDNを推奨しています。
写経しようと思うとクソ長ったらしいパスを打ち込む必要があるので以下のリンクからサクッととコピーしましょう。(kindleのアプリからコピーしようと思うと謎の空白が挿入されました。)
ヘッダの作成
htmlでナビゲーションを表すnav
タグにnavbar
をクラス指定します。
背景色は本書の中でbg-primary
で指定していますが、他にもbg-warning
にすれば黄色、bg-success
にすれば緑色という感じで、出したい情報に応じて使い分けることができるようです。
コンテナ
div
タグのクラスにcontainer
を指定することでdiv
で括られた箇所が一つの枠の中に収まるように調節してくれます。
ジャンボトロン
見出しを設定するためのレイアウトです。見出しとして目立たせたい部分をjumbotron
クラスを指定したdiv
タグで囲います。
ナビゲーションバー
webサイトで画面の上の方に「メニュー」とか「about us」みたいなのが書いてるバーです。nav
タグで実装でき、これも表示する画面によって表示を折りたたんだりすることができます。
モバイル端末で折りたたみたい要素にはcollapse navbar-collapse
を指定し、折りたたんだナビゲーションにはnavbar-toggler
というクラスを指定します。ここで、data-toggle
にcollapse
を、data-target
に#navbarText
を指定します。
これによってnavbarText
を指定しているタグに対して、ボタンを押すたびにdata-toggle
で指定したクラスがon-offされます。
ボタンの見た目を整える
a
タグのclass
にbtn
を指定し、色を指定しましょう。
<a href="/login" class="btn btn-primary">
これでそれっぽい見た目のボタンができます。
グリッドレイアウト
Bootstrapの重要な仕組みで、画面を行と列に分けたグリッド状の形で管理することで、レスポンシブレイアウトを実現しています。基本的には要素に対してclass
を割り当てることでオブジェクトの挙動を制限しています。
…というとなんだかピンとこないですが、以下のサイトが分かりやすかったです。
要するにcontainer
の中にrow
があり、その中にcol
がある、という区切り方でデザインしているということです。なおかつその画面幅は12個のグリッドで分けられている、という感じですね。
なお、Bootstrap4からクラス名が変わっており、Bootstrap3との互換性が無いようです。
col
はcol-{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
タグのクラスが、container
→row
→col
となっているのが分かると思います。作った見た目はこんな感じになります。
Font Awesome
webサービスを作っていると文字だけではなく色々なアイコンが欲しくなる時がありますよね。現代のインターネッツではニーズがあればサービスが提供されています。今回の場合で言えばFont Awesomeというサービスです。
なんと完全フリーで使え、課金すればさらに使えるアイコンの種類が増えます。これを使う時は、Bootstrapと同じようにCDNで提供されているので、body
タグの後ろにアドレスを貼り付けましょう。
実際にアイコンを挿入させるには、置きたい場所にi
タグを置きます。そのクラス名にFont Awesomeのアイコンを使用することを示すfa
を書き、その後ろにどのアイコンを示すかクラス指定します。本書では返信を示すfa-reply
を使用しました。まとめるとこんな感じのコードです。
<i class="fa fa-reply "></i>
半分ぐらいまで行った時の見た目
この後、本書ではゴリゴリとグリッドレイアウトを使ってページを作っていきます。細かいのでメモしきれませんでしたが、最終的には半分ぐらいまで行くとこんな感じになります。
いい感じですね。
次のエントリはデータベース編です。ありがとうございました。