【実践】Instagram インスタグラム 模写コーディング

instagram

今回は、インスタグラムの画面をHTML CSSでコーディングしてみました😊♪ コーディングの練習にどうぞ❕

🎥 この動画の構成 🎥
00:00　Instagramコーディング
00:20　基本ファイルを作成
01:41　HTML側の構成を書く
05:21　CSS側を書いていく
06:28　ヘッダー
08:58　プロフィールのエリア
20:52　ボタンのエリア
27:46　タブ
33:15　投稿リスト

✅ ご視聴いただきありがとうございます🙇‍♂️
この動画を気に入っていただけたら、ぜひチャンネル登録よろしくお願いします❗️
👇『HIROCODE.ヒロコード』をチャンネル登録する 👇

◆ Twitter. ツイッター

◆ Instagram. インスタグラム 👈 オススメ❗️

🔋 僕が使っている、おすすめのデバイス 🔋
【 マウス 】
✅ ロジクール アドバンスド ワイヤレスマウス MX Master 3

” ボタンカスタマイズによって作業の効率化が図れます。アプリケーションごとにカスタマイズ可能です。 ”

【 キーボード 】
✅ ロジクール アドバンスド ワイヤレスキーボード KX800 MX KEYS

” 打ちやすく疲れにくく、タイピング音も静か。長時間コーディングする方にオススメ。 ”

【 パソコン 】
✅ Apple Macbook Pro 16inch

” 画面サイズ大きいと作業が捗るので便利です。初期投資で良いパソコンの使用をオススメします。 ”

【 周辺機器 】
✅ Apple AirPods Pro

” カフェでの作業や通勤時間など、ノイズキャンセリング機能で周りの雑音に影響されることなく集中できるようになります。他にApple機器を使用している方はAirPodsがオススメです。

✅ Apple iPad Pro 11インチ

” macに搭載されているSidecarという機能で、iPadをサブディスプレイとしての利用が可能です。 ”

📕 おすすめ書籍 📕
【 デザイン 基礎編 】
✅ 1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座

” webデザインの基礎とコーディング(HTML/CSS)の基礎がわかる。入門者におすすめの一冊です。 ”

✅ なるほどデザイン

” デザイン全般について、図解で視覚的に分かりやすく説明がされている書籍。デザインに興味がある人にオススメです。 ”

【 デザイン 思考編 】
✅ 誰のためのデザイン？

” デザインにおける役割を理解できる。デザインをする上で何を考える必要があるのかが分かる本。 ”

✅ IAシンキング Web制作者・担当者のためのIA思考術

” デザイン以前のサイト設計における思考の方法を身につけるための一冊。 ”

【 書籍デバイス 】
✅ キンドルペーパーホワイト Kindle Paperwhite

” 200冊あったビジネス書を処分してこちらを導入。一部デジタル化されていない書籍はありますが、紙の本に特別なこだわりのない方は電子書籍での読書をオススメします。

🎧 BGM 🎧
––––––––––––––––––––––––––––––
Happy and Joyful Children by Free Music
Creative Commons — Attribution 3.0 Unported — CC BY 3.0
Free Download / Stream:
Music promoted by Audio Library
––––––––––––––––––––––––––––––

#htmlcss #コーディング #instagram