今日やったこと
- Udemyの「Web開発入門完全攻略コース - プログラミングをはじめて学び創れる人へ！未経験から現場で使える開発スキルを習得！」のセクション8の79~88
昨日の続きでbootstrapについて学習しました。
以下、パートごとにとったメモです。
79.グリッドシステム１
80.グリッドシステム２
81.グリッドシステム３
82.グリッドシステム4
グリッドシステムを使うと画面サイズの違うデバイスに対しても、いい感じにレイアウトできます。
グリッドシステムでは1つの行を12分割してレイアウトすることできます。
1つ分だったらcol-1(カラム１)
2つ分だったらcol-2
というように表記します。
colはcolumn(列)の略語です。
1行のcolの合計が12を超えると、次の行にかかります。
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3 bg-info">
ぽん
</div>
<div class="col-xs-12 col-sm-6 col-md-3 bg-success">
ぽん
</div>
<div class="col-xs-12 col-sm-6 col-md-3 bg-warning">
ぽん
</div>
<div class="col-xs-12 col-sm-6 col-md-3 bg-danger">
ぽん
</div>
</div>
PC、タブレット、スマホで表示形式が変わるように書きました。
このようにclassに書き込むだけでレスポンシブ対応できるので、gridシステムはかなり便利です。
83.実践：フォトギャラリー制作１
フォトギャラリーを作るための下準備をしました。
84.実践：フォトギャラリー制作２
Unsplashで無料の画像を使う方法について解説されています。
無料の画像をランダムに表示することもできるので、とても便利です。
こちらのサイトに使い方が詳しく書かれています↓
無料高品質画像サイトUNSPLASHとそのAPIの紹介（https://donsyoku.com/website/about-unsplash.html）
85.実践：フォトギャラリー制作３
実際に画像を配置しました。
class=“imp-thumbnail”で画像に枠をつけられます。
b-◯（◯は1~5の数字) でmargin-bottomを指定することもできます。
また、AtomでCommandキーを押しながらクリックすると選択するカーソルを増やせる、という技も知りました。これは結構使えると思います。
86.補足：フォントオーサム公式サイトについて
フォントオーサム公式サイトのURLが変わりました、という話が書いてあるだけです。
87.実践：フォトギャラリーの制作４ フォントオーサムの導入
無料でアイコンが使えるサイトfontawesomeの使い方を学習しました。
導入方法はサルワカさんのサイトがわかりやすいです。
【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう
（https://saruwakakun.com/html-css/basic/font-awesome)
88.実践：フォトギャラリーの制作５仕上げ
フォトギャラリーページを完成させました。
簡単なものでも自分の手を動かして完成させると、達成感が出るのでオススメです。
できたページはこんな感じです↓
ソースコード(HTMLとCSS）↓
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>猫のフォトギャラリー</title>
<meta name="description" content="かわいい猫のフォトギャラリーです。">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" href="css/gallery.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a href="gallery.html" class="navbar-brand"><i class="far fa-image mr-1"></i>Cats</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a href="gallery.html" class="nav-link active">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">New</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">About</a>
</li>
</ul>
</div>
</div>
</nav>
<main class="container">
<div class="jumbotron">
<h1><i class="fas fa-camera-retro"></i>フォトギャラリー</h1>
<p>かわいい猫たちのフォトギャラリーをご覧ください。</p>
</div>
<div class="row">
<div class="col-lg-4 col-sm-6 mb-3">
<div class="img-thumbnail">
<img src="https://source.unsplash.com/C0zDWAPFT9A" alt="">
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-3">
<div class="img-thumbnail">
<img src="https://source.unsplash.com/5GQszN6vyI8" alt="">
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-3">
<div class="img-thumbnail">
<img src="https://source.unsplash.com/egfS7HzgKcc" alt="">
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-3">
<div class="img-thumbnail">
<img src="https://source.unsplash.com/e-S23SJzFqs" alt="">
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-3">
<div class="img-thumbnail">
<img src="https://source.unsplash.com/Hnwm8ktAd6E" alt="">
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-3">
<div class="img-thumbnail">
<img src="https://source.unsplash.com/gb3gq2Nh5xE" alt="">
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-3">
<div class="img-thumbnail">
<img src="https://source.unsplash.com/XKhV1c4oV7c" alt="">
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-3">
<div class="img-thumbnail">
<img src="https://source.unsplash.com/7qau-YIXn90" alt="">
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-3">
<div class="img-thumbnail">
<img src="https://source.unsplash.com/QTe-MHNUrz4" alt="">
</div>
</div>
</div>
</main>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</body>
</html>
@charset "UTF-8";
html{
font-size:16px;
}
body{
padding-top:5rem;
font-family:"Hiragino Kaku Gothic ProN","メイリオ",sans-serif;
}
img{
width:100%;
}
cssはこれだけしか記述していないのですが、Bootstrapを使うことにより、このような華やかなページを作ることができました。
しかも、レスポンシブ対応しています。
お得感ありますね。
セクション8Bootstrap4入門全体の感想
テックアカデミーのフロントエンドコースでbootstrapnには触れていたので、知っている内容がほとんどでした。
しかし、ハンバーガーメニューの作り方や画像の枠の作り方などは知らなかったので、知れてよかったです。
Bootstrapを使うとだいぶ楽にページをレスポンシブ対応できるので、どんどん使っていきたいですね。
特に理解できないところはなかったので、次のセクションに進みます。
ということで、明日からも引き続きプログラミング学習頑張ります。
おわり