CSSで画像取得アプリのスタイリングをしよう!

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

実装するもの

今回は、Unsplash Sourceが提供するAPIを使った画像取得アプリのスタイリングをします。

demoは「こちら」で確認できます。

ワークスペース

必要なファイルは、以下の通りです。

JavaScript版

HTML & JavaScript

スタイリング

これからCSSでスタイリングをしていきます。項目のbodyやtitleは、HTMLの要素です。

全体の設定

bodyの設定

containerの設定

container imgの設定

これで、完成です。

おわりに

今回は、全ての画像を同じ大きさにするスタイリングが勉強になりましたね。

また、画面の大きさを変更すると一列に並ぶ画像の個数が変化します。

Bootstrapのグリッドシステムに似ていて面白いですよね^^

それでは、また!

CSSまとめ

CSSソースコード

コメントを残す