サンプル

前置きの前に、作ったものを見せておきます。
こちらです。
ソースです。

はじめに

作っていて、そもそも自己紹介が苦手でなに書いていいかわからないから、適当に書くつもりなのにうまく書けないという・・・アホかと思いました。

今っぽい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設計の手間を大幅に削減! 相澤裕介] (https://www.amazon.co.jp/dp/487783432X/)を買いました。細かい部分まで知りたい方にはお勧めです。

質問などあればうれしいです。