こんにちは。KOUKIです。
本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。
実装するもの
今回は、Unsplash Sourceが提供するAPIを使った画像取得アプリのスタイリングをします。
demoは「こちら」で確認できます。
ワークスペース
必要なファイルは、以下の通りです。
|
1 2 3 4 5 |
$ tree . ├── index.html ├── script.js └── style.css |
JavaScript版
HTML & JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <title>Random Image Feed</title> </head> <body> <h1>Random Image Feed</h1> <div class="container"></div> <script src="script.js"></script> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
const container = document.querySelector('.container') // リクエスト先 const unsplashURL = 'https://source.unsplash.com/random/' // 行 const rows = 5 // 画像パネル生成処理 for(let i = 0; i < rows * 3; i++) { const img = document.createElement('img') img.src = `${unsplashURL}${getRandomSize()}` container.appendChild(img) } // 画像のサイズをランダムに取得 function getRandomSize() { return `${getRandomNr()}x${getRandomNr()}` } // ランダムの数値を取得 function getRandomNr() { // 300~ 310までのランダムな数値を返す return Math.floor(Math.random() * 10) + 300 } |
スタイリング
これからCSSでスタイリングをしていきます。項目のbodyやtitleは、HTMLの要素です。
全体の設定
|
1 2 3 4 5 6 7 |
/* フォント */ @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"); * { /* ボックスの大きさを算出 */ box-sizing: border-box; } |
bodyの設定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
body { font-family: "Roboto", sans-serif; /* flexアイテムにする */ display: flex; /* flexアイテムを積み重ねるように配置 */ flex-direction: column; /* flex重点にアイテムを配置 */ align-items: center; /* flex横軸中央にアイテムを配置 */ justify-content: center; min-height: 100vh; margin: 0; } |
containerの設定
|
1 2 3 4 5 6 7 8 |
.container { display: flex; align-items: center; justify-content: center; /* flexアイテムの折り返しを定義 */ flex-wrap: wrap; max-width: 1000px; } |
container imgの設定
|
1 2 3 4 5 6 7 8 |
.container img { /* 画像の縦横比を指定 */ object-fit: cover; margin: 10px; height: 300px; width: 300px; max-width: 100%; } |
これで、完成です。
おわりに
今回は、全ての画像を同じ大きさにするスタイリングが勉強になりましたね。
また、画面の大きさを変更すると一列に並ぶ画像の個数が変化します。
Bootstrapのグリッドシステムに似ていて面白いですよね^^
それでは、また!
CSSまとめ
CSSソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
/* フォント */ @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"); * { /* ボックスの大きさを算出 */ box-sizing: border-box; } body { font-family: "Roboto", sans-serif; /* flexアイテムにする */ display: flex; /* flexアイテムを積み重ねるように配置 */ flex-direction: column; /* flex重点にアイテムを配置 */ align-items: center; /* flex横軸中央にアイテムを配置 */ justify-content: center; min-height: 100vh; margin: 0; } .container { display: flex; align-items: center; justify-content: center; /* flexアイテムの折り返しを定義 */ flex-wrap: wrap; max-width: 1000px; } .container img { /* 画像の縦横比を指定 */ object-fit: cover; margin: 10px; height: 300px; width: 300px; max-width: 100%; } |
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。