サンプル
前置きの前に、作ったものを見せておきます。
こちら です。
ソース です。
はじめに
作っていて、そもそも自己紹介が苦手でなに書いていいかわからないから、適当に書くつもりなのにうまく書けないという・・・アホかと思いました。
今っぽいCSSの書き方ってどうだろうということでCSSフレームワークを探して書き方をパクろうと思ったのですが、当たり前ですがそのまま使えることに気が付いたので、使ってみました。
「CSS難しいよね」という方と「bootstrapといえばグリッドシステムだよね」という方はバージョン４以降はグリッドシステム以外も充実しているので斜めにでも読んでいただければと考えています。
プロの方や自分用のsassとjsのファイルが一そろいある人には不要な話です。
bootstrapとは
とりあえず wikipedhia: bootstrap
BootstrapはウェブサイトやWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワークである。 タイポグラフィ、フォーム、ボタン、ナビゲーション、その他構成要素やJavaScript用拡張などがHTML及びCSSベースのデザインテンプレートとして用意されている。
GitHubで二番目に人気があり[1]、アメリカ航空宇宙局やMSNBCなどに採用されている。
だそうで、bootstrapって初めて聞いたという方にはCSSを書かないでもサイトデザインできるツールだと”とりあえず”覚えてください。
(もっと細かい制御ができるのですが、sassとかscssとか使うので・・・)
bootstrapの良さ
- CSS書かなくても動く
- よく使われる機能は一通り組み込んである
- 本家サイトのコピペで結構動く
- CSSより簡単
- レスポンシブデザイン対応
といったところです。
使った技
基本的には、公式のコードをコピペして編集しました。リンクを張りながら説明します。
テンプレート
とりあえずここのコピペから始めます。
最初から最後までコピペが効くのがいいですね。
ナビゲーションバー
コピペ元
画面サイズが小さくなった時にハンバーガーメニューで表示されるようになります。
(画面幅が広い場合のナビゲーション)
（画面幅が狭い場合のナビゲーション)
カルーセル
まったく関係のないいけている写真を並べたカルーセルはさすがにもうやめた方が良いかもしれませんが、見栄えのする写真がある場合は感じ良くなると思います。
カード
カードは煩雑になりがちが箇条書きの情報をまとめるのに便利です。写真を添えて文字数を抑えると少ない文字でも膨らせることができるし、逆にリンクをはったり、モーダルウィンドウで詳細情報を表示させるとよいと思います。
flexbox
コピペ元
カードを並べる時に使いました。画面を横１２列に分割したグリッドシステムで有名なbootstrapですが、flexboxのおかげてほとんどの場合グリッドは使わなくなりました。bootstrapはcssで使うほとんどの設定をclassとして宣言済みなので、CSSなしで利用できます。
グリッドシステム
コピペ元
とは言え幅をある程度厳密に指定したいとなると便利なのがグリッドシステムです。カードの場合、画面幅に合わせて並べるカードの枚数を変えるなどしなければなりません。そういった場合には、グリッドを用いると簡単に画面サイズ毎の配置ができます。
組み込み
グーグルマップなんかの貼り付けに使います。
その他
丸いアイコン。 かどを丸める
merginとpadding。 spacing
終わりに
bootstrapを使えばポートフォリオサイトくらいであればCSSなしで作れることが分かったかと思います。
sassを使えば自分好みの細かい設定ができるのですがそれはまた別の機会にご紹介します。
細かい書き方はコードを見ていろいろ試してください。
また、私は英語が苦手なのでBootstrap4ファーストガイド―CSS設計の手間を大幅に削減! 相澤 裕介を買いました。細かい部分まで知りたい方にはお勧めです。
質問などあればうれしいです。