【実践】HTML/CSSコーディングの流れ！ノーカット製作風景。HTML編
HTML-код
- Опубликовано: 4 июл 2020
- 以前の動画で作ったwebデザインのコーディング風景です。
まずはHTMLで枠組みを組んでいます。HTMLを記述する際に注意すべき点や、考えることを話しています。
🔽 次の動画はこちら： CSSコーディング 🔽
• 【実践】HTML/CSSコーディングの流れ！...
📂この動画で使用したファイル 📂
www.craft.do/s/R5pbWq4PobjFit
⭐️ 自分でWebサイト作ってみませんか？ ⭐️
誰でも、できる！Webサイト公開の流れ！
• 【10分でサイト公開】誰でもできる！Webサ...
✅ご視聴いただきありがとうございます🙇♂️
この動画を気に入っていただけたら、ぜひチャンネル登録よろしくお願いします❗️
◆ チャンネル登録
ruclips.net/user/hirocode?sub_c...
◆ Twitter. ツイッター
/ hirocodeweb
◆ Instagram. インスタグラム
/ hirocodeweb
🔋 僕が使っている、おすすめのデバイス 🔋（アフィリエイト広告を使ってます！）
---- マウス ----
【 ロジクール アドバンスド ワイヤレスマウス 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...
----------------------------------------------------------
とても参考になりました！ありがとうございあます。
こちらこそご視聴いただきありがとうございます😊❗️❗️
めちゃくちゃわかりやすい
夜ゆっくり見て勉強します。
ありがとうございます😭‼️
Adobe CDでのデザインの仕方わかんなかったのでめちゃ参考になりました！ありがとうございます！
嬉しいコメントありがとうございます😆♫
最近XDの使い方という動画もアップしたのでよければそちらも見てみてください🙇♂️
スムーズ！
引き続き参考にさせていただきます
素晴らしすぎる動画をありがとうございます。
嬉しいです！ありがとうございます😊♪
Webデザイン、、興味あります。
観ていて楽しそう…
勉強はじめてみます！
自分で好きなデザイン作れるようになるととても楽しいので是非是非はじめて見てください😆❗️
もうHTMLとcssは当たり前にできる時代になってしまった。
参考になりすぎる！！
嬉しいコメントありがとうございます🙇♂️❗️
勉強になるチャンネル
嬉しいコメントありがとうございます🙇♂️‼️
まだ歴が浅いので、こんなことを言うのも何ですが、
今どこの部分を作ってるって枠とかでデザインの方を囲ったらもっとわかりやすくなるので初心者にも参考になる気がします。
まだ1週間しかやってないので、理解するのにめっちゃ時間かかってしまいました笑
コメントありがとうございます☺️🎵そういうご意見めちゃめちゃありがたいです❗️
今後の動画でそういったポイント入れてみたいと思います😆❗️ありがとうございます🙇♂️
素晴らしいコーディングありがとうございます😭😊この先も、さらに難易度の高いコーディングも公開して頂きたいです！よろしくお願いいたします。
嬉しいコメントありがとうございます😆❗️もっとコーディング動画上げたいと思います❗️❗️
自作のウェブサイトが重かったのでTinyJpegとても助かりました😭
ありがとうございます。
書き出したままだと結構画像で重くなりますよね💦
こちらこそありがとうございます🙇♂️
これは参考になります。
初心者なんですがliの下にpとかありなんですね。
引き出しがまた一つ増えましたありがとうございます!
参考にしていただけたようでこちらも嬉しいです😆❗️
嬉しいコメントありがとうございます🙇♂️❗️❗️
web制作会社へ転職するために勉強している者です。
ただコーディングすることはできても仕事で制作する際はどのようにしているのかがわからず、モヤモヤしていました。
この動画を見てこんな感じで進めるのか！とわかり、スッキリしました。
いつも有益な動画をありがとうございます🙇♀️
参考にしていただけたようで嬉しいです😭！ありがとうございます🙇♂️❗️
ここまで教えてくれる人いないので本当に助かりました・・・命を救われました・・・（大げさ）
そういっていただけて嬉しいです😆ありがとうございます❗️
有益な動画をありがとうございます。
こういったLPはいくらくらいで納品されていますか？
また納品後、お客様が編集したい場合はどうされていますか？
コメントありがとうございます☺️ ❗️
僕の勤めている会社ではLPだと約20万~30万円といった金額感です。
ただ実際はデザイン案を3案提出→選んでいただいたものをアップデートしていくといった形で進めていきます🖥
軽いテキスト変更等については納品後一定期間は無償で修正対応します。その後の修正や、時間のかかる修正・要素の追加に関しては、ボリュームに応じて都度お見積もりさせていただくといった具合です🙆♂️
すごい参考になります！
質問したいのですが、コーディングをする際、最初に画像を切り抜いて保存すると思うのですが、これはAdobe XDで問題ない感じですかね！？これからAdobe XDを導入しようか迷っていますので、ぜひ意見を聞きたいです！
コメントありがとうございます☺️♪
XDでも問題なくできます❗️使用する写真自体の色補正などが必要な場合にはphotoshopやlightroomなどを使用する感じです🙆♂️
XDは無料版でもほとんどの機能使えるみたいなので是非試してみてください😆❗️
勉強になる動画ありがとうございます。２点質問なのですが、jpgとpngで書き出すときに書き出し先「デザイン」と「web」とありますが、「デザイン」を選んだ方が良いのでしょうか？また、途中でファイルを一時的に白色のボックスに移動（3:29）させていますがあれはmacの機能ですか？
ご指摘ありがとうございます❗️ごめんなさい、むしろ「web」が正しいです🙇♂️❗️❗️webだとx2でも綺麗に書き出せるようなので「web」の方がいいです🙇♂️🙇♂️🙇♂️
ファイルを一時的にボックスに置いているのは、AppStoreで購入できるYoinkというアプリです。
ドラッグ&ドロップの作業が必要な際に、一時的に移動したいファイルを置くことができます。ファイルやフォルダ、テキストなど多分ほとんどなんでも置けるので、作業効率かなり上がるのでめちゃめちゃオススメです❗️パソコン内のフォルダからフォルダへの移動なんかもこれあると凄く便利です😆♪今度動画でも紹介しようと思います❗️
apps.apple.com/jp/app/yoink-%E3%83%89%E3%83%A9%E3%83%83%E3%82%B0-%E3%83%89%E3%83%AD%E3%83%83%E3%83%97%E3%82%92%E5%BF%AB%E9%81%A9%E3%81%AA%E3%82%82%E3%81%AE%E3%81%AB/id457622435?mt=12
@@hirocode
承知いたしました！
色々と有益な情報ありがとうございます！
分かりやすい動画配信ありがとうございます！
本当に初心者の質問で申し訳ないのですが、xdから画像を横に移動させるときに元のカンプそのまま移動してしまうのですが、
HIROさんみたいにカンプのデザインが動かないようにするにはどうしたらいいのでしょうか。。。
コメントいただきありがとうございます😊♪
あーそういうことですね！！説明不足ですみません💦
画像やテキストなどを「Option」キーを押しながら要素をドラッグすれば、ドラッグしたものがコピーされた状態で配置されます❗️
@@hirocode ご返信いただきありがとうございます☺️Optionキーを押しながら試してみたところできました♪ ありがとうございます！
Let's do this!
Thank you for your comment😆❗️
とてもわかりやすかったです。私はSEですが最近CSSを勉強しているのですがとても難しいですね。どうしたら管理しやすいCSSを組むことができるかなどの動画があったらご紹介いただきたいです。
嬉しいコメントいただきありがとうございます🙇♂️❗️
CSSの管理について、なかなかボリューム大きくなりそうで着手できてないんですが、優先度上げて作りたいと思います❗️
ありがとうございます！
期待して待っていますーmm
初心者です。
なぜ、エリアトップビューの下に、コンテナーを置いたほうが良いのですか？
divdivdivと何重にも包まれているのを良く見ますが、どういったルールで包んでいるのかがよく分かりません。
コメントありがとうございます😆❗️
.area_top_viewの下に.containerを入れたほうが良い理由を動画で説明していませんね、すみません😅
結論から言うと、このページのコーディングでは上記.containerがなくても全然問題ありません。
ただ、次に説明する2点を意識した上で.containerを挿入しています。
■ まず、.containerを使用する利点としては、他のセクションと均一化できると言う点です。
例えばトップビューの中に説明文やキャッチコピーが入る場合があります。その際、他のセクションと縦軸を合わせたり、左右の余白を合わせる（特にスマホで文章が折り返す場合）と言うことが頻繁に行われます（デザインで言う「整列」ってやつです）。
.area_top_viewに左右の余白を指定することはできますが、画面幅によって.containerの余白を変更する際に、同一の余白指定を.area_top_viewにする必要が出てきてしまいます。
そのような可能性を考慮した上で、.containerを指定していると言った理由があります。
■ 今回のデザインでは上記.containerは必要ないですが、今後トップビューに説明文を追加する可能性があると考えています。これが実際の案件だとそう言った追加の修正要望が多々あります。
その際、元々.containerありきで組んでいたほうが、そのような要望への対応もしやすいです。
また、毎回同じルールで組んでしまったほうが、毎回異なるコードで組むよりも視認性の良さと改修のし易さも上がると思います！
文章だと少しわかりづらいかもしれませんが、このような理由が挙げられるかと思います🙇♂️
他にも不明な点あれば遠慮なくコメントいただけると嬉しいです😆♪
コメント失礼します！非常に分かりやすい説明でとてもタメになりました！
質問なのですが、
自分はいつもクラス名をつけるときに
「home-title」のように「-」を間に入れているのですが、この動画では
「home_title」のように「_」にしていると思います。
「_」の方が良いという理由があったりするのでしょうか？
ご返信頂けると幸いです！
コメントありがとうございます😊♪
結論から言うと好みになるのですが、簡単に思いつくそれぞれのメリットとしては
■ハイフンの場合、入力が楽
■アンダースコアの場合、ワードの視認性が良い、ダブルクリックで選択できる（ハイフンの場合は単語が選択される）
僕は基本アンダースコア（スネークケース）で記述していますが、最近だとハイフン（チェインケース）で記述することも結構あるので、どちらでも全く問題ないかと思います❗️
adobe xdからそのままコードにするプラグインなどは使用されていますか？もし使用していたらオススメ知りたいです。
コメントありがとうございます😊♪
コード生成するプラグインは結構ガチガチのコードになってしまうので、サイトのメンテナンス性など考えても自分で書いた方が良いのが現状です。
XDで開発用に書き出しができるので、フォントサイズやカラー、余白の指定などは、それ使用すると便利です😆❗️
@@hirocode 返信ありがとうございます！！なるほど、やはりコードは書く必要はあるんですね！もっと動画見て勉強します😊🔥
タイピングの速度ってデフォルトの速さですか？
すごい速いですね！
コメントありがとうございます🙇♂️
編集見返してみたら1.5倍速にしてました😅
この動画くらいの速度で打てたらかなり効率上がりそうですね😆❗️❗️
html cssを学び初めて間もないのですが
divタグをどこで使えば良いのか
classをどのタグに与えたら良いか
がいまいちわかりません。
とりあえず意味のあるタグheaderやnav sectionなど以外のところはdivタグで分けて、装飾したいところはclassをつけておくと言う認識であっていますか？
〜
/は省略させていただきます
など、なぜdivの下をdivでまた区切るのか
またどのような基準でdivを書いているのかがいまいちわかりません。
コメントいただきありがとうございます🙇♂️
記載いただいているheaderを例に取ると、header直下の.containerは他の箇所にも共通で使用するクラスで、横幅が伸びすぎない指定・左右の余白（padding）の指定がされています。
これをheaderに付与すると、headerが画面いっぱいまで伸びてくれないので、headerとは別のタグ（div）に付与しています。
また、その中の.area_logo_header、.nav_headerについては、ヘッダー内のレイアウトとして使用しています。
レイアウトを組んだ上で、その中に、ロゴ画像・ナビゲーションのリストが入る形になっています。
結局のところ、htmlの組み方としてはどんな形式でも組むことができます。
とかでも組むことはできるのですが、効率的な組み方やレスポンシブ時の考慮、メンテナンス性など踏まえると、タグを分けて組んでおいた方が楽に対応できるようになります。
初めのうちはここら辺難しいのですが、何回かサイト作り試行錯誤しているうちに段々わかってくるところかなと思います😊❗️
@@hirocode
お返事 回答ありがとうございます😊
まとめると、headerという大きい枠の中にimg ulという中枠があるからそれをdivで区切る…という感じでしょうか？？
______レイアウト大枠______
(中枠 ロゴ画像)
(中枠 ナビゲーション)
__________________________
というイメージですかね…？わかりづらかったらすみません。
区切るのイメージがあっているか難しいですが、divのイメージとしては、エリアというようなイメージの方が近いかもしれません❗️
わかりやすい例で言うと、画像エリアとテキストエリアで分けることが多いです。
ヘッダーで言うと、ロゴが画像エリア、ナビゲーションがテキストのエリアというイメージでしょうか。
基本的にレスポンシブの際に、レイアウトを分けていた方が対応がしやすいって言うのがあるので、エリアを分けていますが、レスポンシブでレイアウトが変わらないようであれば分ける必要はないかもしれないです🙆♂️
「【実践】HTML/CSSコーディングの流れ！ノーカット製作風景。」シリーズは他にはない動画なので、とてもためになります。ありがとうございます。
もしできればですが、モバイルファースト版 HTML/CSSコーディングの実践動画を見たいです。最初はモバイル版サイトのデザインから最終的にPC版サイト完成ということでメディアクエリを使ってレスポンシブ用のCSSコーディングを教えていただきたいです。どうぞご検討の程よろしくお願いいたします。
レスポンシブの動画1つもあげていないので、アップリストに入れさせていただきます❗️
ご意見いただきありがとうございます🙇♂️
@@hirocode ご返信ありがとうございます。時間ができたときで結構ですので、ぜひ実践動画ご検討いただければと思います。ついでにお聞きさせていただきたいのですが、HTMLのマークアップが終わり、CSSでレイアウトするときモバイル版を最初にレイアウトしてからPC版にメディアクエリを使って上書きレイアウトをするか、その逆かどちらのパターンが現場では多いでしょうか？教えていただけたら幸いです。
WEBデザインに最近興味を持ったのですが、このHTMLのコーディングは何というソフトでされているのでしょうか？
コメントありがとうございます☺️♫
この動画でコーディングに使用しているツールは「Coda2」というエディタを使用しています。Coda2はクリップ機能が使い易くて初心者の方にオススメです😆 無料のエディタだとVSCodeを使用している人を多いようです❗️
クラス名って全て覚えてる感じです？
サーバーサイドのエンジニアなんですが、きになりまして！
サーバーサイドのエンジニアさんなんですね😆‼️‼️
タグの種類のことでしょうか？それだとしたら基本的に必要なものは全て把握しているかと思います❗️
なかなか普段使わないようなタグはたまに調べてみるって感じです‼️
全然わかんないけどテンポよくて最後まで見た。結局なんだったのか分からん……
最後までご視聴いただきありがとうございます😆♪知らないと何やってるかわからないですよね😅
コーディングの仕事をするにあたり、画像を書き出す能力は必要でしょうか。
コーディングをする際には、webデザインのデータから必要な画像を書き出して、コード内で指定する必要があるので、画像の書き出し方法は知っている必要があるかと思います。
ただ、画像の書き出しは基本的にはそこまで難しい作業ではないので、調べて解決できる範疇だと思います😆❗️
@@hirocode 丁寧な返信ありがどうございます！
初心者で初見ですが
これはなんのソフトを使ってるんですか？
コメントありがとうございます☺️❗️
デザインを作成しているソフトはAdobe XDというデザインツールを使用していて、HTML/CSSのコーディングに関してはCoda2というコードエディタを使用しています🙇♂️
@@hirocode ありがとうございます！
動画全部見ました笑
僕もプログラミングやりたいとは思って勉強しても、その知識を使ってなかなかなにをやればいいのかわからなかったり、案件を取るにもどうすればいいかわからずで結局プログラミングのモチベーション？が下がってしまう
といったことを二回繰り返しているのですが何かアドバイスしていただけませんか。
ありがとうございます❗️嬉しいです😭❗️
まずは自分の制作物でどの程度のものを作れるのか把握して、その範囲で対応可能な案件を探すことが良さそうです。フリーランスの主軸としてはクラウドソーシングなどが多いかと思います。
そこで知り合ったクライアント様や、Web関係の技術を求めている知り合いなども含め、関係性を築いていくことが長く続けていく上では重要だと思います❗️
正直、経験少ない段階では可能であればバイトなどでも良いのでどこかの企業で働いてみるってのが一番手っ取り早いとは思います💡学習できる点も個人学習よりか遥かに多いと感じます🙇♂️
0:40あたりのXDの操作でアイコンをベースポートに
ドラックアンドドロップで映せてると思うのですが
どうやってやっているのでしょうか？？
コメントいただきありがとうございます😊♪
0:40あたりの操作は、optionキーを押しながらオブジェクトをドラッグ&ドロップして、要素を複製しています❗️❗️❗️
@@hirocode
返信していただいてありがとうございます!!!
それはわかるのですが、例えば、ヘッダーのCONTACTボタンの中にある手紙のアイコンをドラッグ&ドロップする動作をそれでやったら
手紙のアイコンはグループの中にあるからグループの四角い枠がついてきませんか？？
普段自分はアートボードの方で、取り出したい要素をコピペしてグループの外に出してそれからベースボードに移しているのですが、
ヒロコードさんはアートボードをいじらずにドラッグ&ドロップだけでやっていたんでどうやってやっているんですか？
XDの使い方から覚えないとw
確かにXDの使い方には全然触れていませんね😅
別でXDの使い方についての動画上げているので、ご興味あれば見てみてください😆❗️
ruclips.net/video/AaBB0YkbvYs/видео.html
10年前に制作会社でコーディングしてたけど、今も基本は変わらないんだね。
基本は変わらないですね😆❗️
webデザインってコーディングの前の完成見本みたいなことですか？
よくわかってなくてすみません…
コメントありがとうございます🙇♂️その認識で相違ないです😆❗️
Webデザインの段階では、イラストレーターなどのデザインツールを使って、サイトの見た目を作ります。基本的に画像ファイルを作るってイメージです。
その画像ファイルを見ながら、コードを書いていくといった流れです。
ざっくりこんな感じです🙆♂️
@@hirocode なるほど。ありがとうございます！
アイコン類はなぜsvgで書き出すのでしょうか？
コメントいただきありがとうございます🙇♂️
SVG形式は拡大しても画質が劣化しないため、サイズを気にせず使用することができます❗️
■ PNGを使用する場合
例えば、高さ100px幅100pxでの表示をしたい場合には、iphoneなどの高解像度のディスプレイ向けに倍のサイズを計算して(H200px W200px)書き出す必要があります(最近のデバイスに対応する場合だと3倍)。
また、もう少し大きく120pxの大きさで表示させたいという場合、サイズを変更して再度書き出しを行う必要が出てきてしまいます。
これらをSVG形式で作っていれば、どんなサイズでも気にせず使えるようになります🙆♂️❗️
コーディングするとき、画像はいつでもこのようにして見本から取り出して貼り付けることができるのでしょうか。
コメントありがとうございます😆❗️
基本的にはWebデザインを作成した元ファイル、PSD(Photoshop),AI(Illustrator),XDなどがあると思うので、そこから必要な画像パーツを書き出して、コードで呼び出すという流れで作成します。
webデザインのデータがJPGやPNGなどの1枚画像の場合は元データを共有してもらう必要があるかと思います。
ご質問内容合っていますでしょうか❓他に不明点あれば再度コメントください🙇♂️❗️
@@hirocode
返信していただきありがとうございます。まだLPを一から一人で作ったことがないため、画像ファイルを呼び出すイメージをつかみたくてコメントさせていただきました。
お答えいただきありがとうございます！参考になります！
最近HTML勉強し始めてずっと謎だったんだけど
どうしての後ろに空白開けるんだろう
@@town8778 例えば4:18のところなんですが、
の後ろに余白がありますよね。ここのことです。語彙力がなくてすみません
@@town8778 ありがとうございます。
ですが、若干違います。伝わりづらくてすみません、、、
例えば
nekonekoneko
みたいな文があるとして、(○○は余白のことです)
○○
○○○
って「」の後ろに余白が空いてますよね。
これの意味があまりわかりません、、、
@@town8778 ありがとうございます！
コメントいただきありがとうございます❗️
皇帝ペンギンtownさんの仰っていただいた通りです🙇♂️
補足として、余白については”インデント”と呼ばれているもので、tabキー（タブ文字）で余白を設けるか、半角スペース（2個・4個が主流）で余白を設けるかがあり、どちらでも問題ありません。以前はtabが多く、今ではスペースが多い気がします😆❗️
ただ、全角スペースで余白を設けた場合エラーとなるのでご注意ください🙇♂️❗️
@@hirocode ありがとうございます！
なんかさっきエラー出た理由がわかった気がする、、()
フロントエンドってこんな事やってるのか。
コメントいただきありがとうございます😊♪
言語やフレームワークにもよりますが、ベースはこんな感じでタグの組み合わせでできています😆❗️
初心者なので、もう少しゆっくり例えばフッターやメインやヘッダーなど分けて教えていただけると助かります！ご検討ください！
コメントありがとうございます🙇♂️
エリアごとに分けるの凄く良さそうですね‼️やってみます🙆♂️
初心者にはまるでわかりませんでした
コメントいただきありがとうございます😊♪
おっしゃる通り、この動画見ても0から学べる形になっていないので、初心者の方向けに学べるような動画出せていけたらと思っています🙇♂️❗️
どっかの参考書で見たことあるようなデザインですね。
HTMLでコーディング？？？
早すぎてわからん。
コメントありがとうございます❗️もう少し速度落として説明できるようにします🙇♂️💦
初心者にはあまり参考にならない😅
おっしゃる通り完全初心者には難しいですね💦基本的なタグなどHTML CSSの基本を知ってる人向けって感じかもしれないです🙇♂️❗️