CSSでユーザー検索アプリをスタイリングしよう!

こんにちは。KOUKIです。

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

実装するもの

以前、GitHUB REST APIを使ってユーザー検索アプリを作成しましたが、今回はそのスタイリングになります。

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

ワークスペース

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

JavaScript版

HTML & JavaScript

初期画面
golangで検索した時の画面

スタイリング

これからCSSでスタイリングしていきます。bodyやuser-formは、HTML要素です。

全体の設定

bodyの設定

user-formの設定

user-form inputの設定

その他ユーザー入力フォームの設定

cardの設定

avatarの設定

user-infoの設定

user-info h2の設定

user-info ulの設定

user-info ul liの設定

user-info ul li strongの設定

repoの設定

メディアクエリの設定

おわりに

UIのスタイリングができるとアプリケーション開発も楽しくなってきますよね。でも私の感覚だと、フロントエンドやバックエンドエンジニアでUIのスタイリングが得意な人は少ない気がします^^;

やっぱり、センスみたいなのが必要ですよね。

一つ一つのアプリケーションを丁寧に作成して、センスを磨いていきたいと思います。

それでは、また!

CSSまとめ

CSSソースコード

コメントを残す