【実践】はじめてのレスポンシブコーディング！HTML CSS基礎講座。
Vložit
- čas přidán 5. 11. 2021
- 今回は、レスポンシブについての動画です！
HTML CSSを使ってレスポンシブWebデザインのコーディングする際に必要な、知識や実際のコードを紹介しています。
🎥 この動画の構成 🎥
00:06 レスポンシブとは？
01:03 デザインについて
02:29 レスポンシブに必要なコード
06:07 実際のコーディング画面
📁 今回使用したファイル 📁
www.craft.do/s/cOFb8ppG854WSN
✅ご視聴いただきありがとうございます🙇♂️
この動画を気に入っていただけたら、ぜひチャンネル登録よろしくお願いします❗️
◆ チャンネル登録
czcams.com/users/hirocode?sub_c...
◆ Twitter. ツイッター
/ hirocodeweb
◆ Instagram. インスタグラム
/ hirocodeweb
◆ ROOM. 楽天ルーム
room.rakuten.co.jp/hirocode/
🔋 僕が使っている、おすすめのデバイス 🔋（アフィリエイト広告を使ってます！）
---- マウス ----
【 ロジクール アドバンスド ワイヤレスマウス MX Master 3 】
amzn.to/34Zn5LH
" ボタンカスタマイズによって作業の効率化が図れます。アプリケーションごとにカスタマイズ可能です。 "
---- キーボード ----
【 ロジクール アドバンスド ワイヤレスキーボード KX800 MX KEYS 】
amzn.to/38S1B4i
" 打ちやすく疲れにくく、タイピング音も静か。長時間コーディングする方にオススメ。 "
---- パソコン ----
【 Apple Macbook Pro 16inch 】
amzn.to/2WXKtEN
" 画面サイズ大きいと作業が捗るので便利です。初期投資で良いパソコンの使用をオススメします。 "
---- 周辺機器 ----
【 Apple AirPods Pro 】
amzn.to/3rAyU4u
" カフェでの作業や通勤時間など、ノイズキャンセリング機能で周りの雑音に影響されることなく集中できるようになります。他にApple機器を使用している方はAirPodsがオススメです。
【 Apple iPad Pro 11インチ 】
amzn.to/3mZuvoo
" macに搭載されているSidecarという機能で、iPadをサブディスプレイとしての利用が可能です。 "
📕 おすすめ書籍 📕
---- デザイン 基礎編 ----
【 1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座 】
amzn.to/3o8vofO
" webデザインの基礎とコーディング(HTML/CSS)の基礎がわかる。入門者におすすめの一冊です。 "
【 なるほどデザイン 】
amzn.to/2X48Z77
" デザイン全般について、図解で視覚的に分かりやすく説明がされている書籍。デザインに興味がある人にオススメです。 "
---- デザイン 思考編 ----
【 誰のためのデザイン？ 】
amzn.to/3o4gzun
" デザインにおける役割を理解できる。デザインをする上で何を考える必要があるのかが分かる本。 "
【 IAシンキング Web制作者・担当者のためのIA思考術 】
amzn.to/2KETvEn
" デザイン以前のサイト設計における思考の方法を身につけるための一冊。 "
---- 書籍デバイス ----
【 キンドルペーパーホワイト Kindle Paperwhite 】
amzn.to/3n2AwRh
" 200冊あったビジネス書を処分してこちらを導入。一部デジタル化されていない書籍はありますが、紙の本に特別なこだわりのない方は電子書籍での読書をオススメします。
🎧 BGM 🎧
----------------------------------------------------------
Music Title: Happy And Joyful Children
Music Link: • Happy Children Backgro...
----------------------------------------------------------
メタviewportの件、すっかり忘れていました。
ありがとうございました。
レスポンシブデザイン難しすぎてレイアウト崩れまくって心折れてたところだったのでとてもありがたい動画です！いつもためになる動画ありがとうございます😳
少しでも参考にしていただけて嬉しい限りです😊🎵こちらこそありがとうございます🙇♂️‼️
20年前にHTMLとCSSをタグ打ちして、メモ帳からホームページを作っていましたが、インターネットをやめて15年くらいになります。
またホームページを作成を考えていましたが、レスポンシブデザイン対応で試行錯誤していました。
HIRO先生の動画で理解できました。
とてもわかりやすい動画です。
今後もチャンネル登録して、勉強させていただきます。
コメントいただきありがとうございます😊♪
メモ帳でって凄すぎます笑 その頃遊びでですがFlashゲームをサイトに埋め込んだりしてたのが懐かしいです😂
登録いただきめちゃめちゃ嬉しいです😭ありがとうございます🙇♂️❗️
今ちょうどレスポンシブデザインについて悩んでいたので凄くありがたいです！！！！！
嬉しいコメントいただきありがとうございます😭❗️
ブレイクポイントについて非常に分かりやすい説明でした。
わかりやすいと言っていただけて嬉しいです😊♪ありがとうございます🙇♂️
最近お勉強の為、拝見しております。
今回レスポンシブの課題でどうやって作って行くべきかを悩んでおりましたので、大変参考になりました。
ありがとうございます♪
参考にしていただけたようでこちらとしても嬉しいです😆❗️ご丁寧にありがとうございます☺️♪
簡潔でわかりやすいです！
そういっていただけて嬉しいです😭ありがとうございます🙇♂️！
ひろさん、ありがとうございます。とても丁寧で分かりやすいレスポンシブデザインの基礎講座でした！タブレット対応の時に、文字を小さくすればよいというところは改めて気づかされ勉強になりました。ひろさんのホームページのデザインはとても絵心があり洗練されたデザインで素敵です！！実際のレスポンシブ作業をする動画も楽しみにしています！
こちらこそご視聴いただきありがとうございます🙇♂️❗️嬉しいコメント頂けて光栄です☺️♪
職業訓練でWebデザインの勉強をしていますが、そこの先生の授業が草すぎてひろさんの動画にたどり着きました。本当にわかりやすく、モヤモヤがスッキリしました。学校をやめてひろさんの動画で勉強した方が良いくらいですw
実際にレスポンシブをしてるところもぜひ拝見したいです！楽しみにしてます。
コメントいただきありがとうございます😊♪
分かり易いと言っていただけてめちゃめちゃ嬉しいです😭ありがとうございます🙇♂️❗️
レスポンシブの実践動画出せていないので、これから出していけたらと思います😆❗️❗️
定番テーマを導入してWorpress使わなくても、できますね❣ コンパクトにPHPとJavascriptも織り交ぜて使えるのが素晴らしいです。ありがとうございます❣
ここ最近、CZcamsの広告で、TDCテーマを導入すると…。ばかり表示されてきます(笑)
こちらこそご視聴いただきありがとうございます😊♪
わかりやすい動画ありがとうございます。初歩的な質問で申し訳ないのですが、大きさの指定をpxではなく、vh,vwや%で行えばスムーズに大きさが変わるように思えるのですが、こういったことはせず、各規定画面サイズごとにpxで作るのが普通なんですか？
コメントいただきありがとうございます😊♪
実際はパーツに応じて使い分ける必要があるかと思います💡
例えば、フォントサイズに関しては、画面幅に応じてサイズが変わるようなvwより、ある程度固定化されたpxやremなどの指定が一般的です。逆にレイアウトの場合は、%やvwを使用することも多いです！また、余白に関しては、%やvwを使用するとよりもpxやremである程度固定化した方が見栄え上良くなると思います😆❗️そんな感じでパーツや用途によって使い分けるのが良いかと思います❗️❗️
@@hirocode ありがとうございます！！
はじめまして！いつもわかりやすい解説ありがとうございます！質問ですが、動画内で使用されているアイコン等はflaticonでしょうか？
こちらこそ、いつもご視聴いただきありがとうございます😆❗️おっしゃる通り大体flaticonのアイコンを使用してます😊♪
@@hirocode 返信ありがとうございます(^^)わかりやすい図や表とても参考になります😊
すいません、remを使ったリキッドレイアウトのコーディングなどの動画ってありますでしょうか？
質問があります。例えば縦にテキストボックスが二つならんでいるとします。テキストボックスの間の距離は１００pxとします。スマホで見たときに距離を縮めたい場合は、５０pxとする必要があると思います。こいう細かい距離の数値も一つ一つコーディングする必要があるという認識であってますか＞＜？
それと、cssに書くときは通常のcssを書いた後の一番下に書きますか？
あってます！media queryを書く場所は自由ですが、基本的には対象のセレクタのすぐ下に書くのが楽だと思います。ただ、1つ1つのセレクタに指定すると膨大になるので、ある程度のまとまりごとにmedia queryにまとめて書くのが良いかと思います😆❗️
いつも見ています。とても役に立つ内容で次回の配信を楽しみにしています。
コーディングの際のソフトは何を使われていますでしょうか？？
いつもご視聴いただきありがとうございます🙇♂️❗️
Visual Studio Code（VSCode）という無料のエディタを使用しています！
プラグインも豊富で、使ってる方も多いのでオススメです😆❗️
@@hirocode ありがとうございます！ 僕は@Panic製のソフト、NovaがFTP機能までついて便利で使っているのですが、多くの皆さんVSCode使われていて、FTPは別ソフト使っているんだろうなーって思っていますが、web更新するとき2つのソフト起動しないといけないのに、不便でないのかなーっていつも思っています。。。
@@shuichimakise8924 VSCodeはプラグインでFTP接続可能です！ただ、僕もCoda2（Novaの前身）所有してるので、そっちの方が使いやすいです😅
大好きなチャンネルです！
質問ですが、世の中のサイトは基本的にスマホで見られることのほうが多いと思うのですが、PC→スマホではなく、スマホ→PCにレスポンシブ対応させる設計の手法はあまり採用されないのでしょうか？
LPデザインをする際も、PCではなくモバイル版を優先的に確認したいとの要望もあるので、いっそのこと全てモバイルファーストで攻めた方が良いのかなと思ったのですが…難しめですかね？
嬉しいです！ありがとうございます🙇♂️❗️
PCとスマホ、両方のデザインカンプもある状態であれば難しくないと思います！
僕の場合、PCのデザインカンプのみで、コーディングでそのままスマホ表示作ることがあるんですが、その逆が難しいです。いわゆるスマホのデザインカンプだけある状態で、PCの表示をコードで作っていくのは結構難易度高いと思います！
@@hirocode ご返信いただきありがとうございます！
そうなのですね。かしこまりました！
Webデザイナーではないのですが、仕事でHPのコーディングをすることがあるので、参考にさせていただきます！
表示される文章が変わる方法ありますか？例えば1024pxだったら「チョコレート」480pxになったら「チョコ」に変わるっていう、、
こんな感じで、画面幅で表示非表示切り替えれば可能です😆❗️
---
チョコレート
チョコ
.pc {
display: block;
}
.sp {
display: none;
}
@media screen and (max-width: 480px) {
.pc {
display: none;
}
.sp {
display: block;
}
}
わざわざ丁寧に対応して頂きありがとうございます！！！