【実践】HTML/CSSコーディングの流れ！ノーカット製作風景。CSS編
HTML-код
- Опубликовано: 4 июл 2020
- この動画は後編です。前編【 • 【実践】HTML/CSSコーディングの流れ！... 】
前編で書いたHTMLにCSSを当てていく作業です。CSS記述のポイントなども話しています。
📂この動画で使用したファイル 📂
www.craft.do/s/R5pbWq4PobjFit
✅ご視聴いただきありがとうございます🙇♂️
この動画を気に入っていただけたら、ぜひチャンネル登録よろしくお願いします❗️
◆ チャンネル登録
ruclips.net/user/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...
----------------------------------------------------------
![J.P., NLE Choppa - Bad Bitty (Remix) [Official Music Video]](http://i.ytimg.com/vi/rBDa6BCvw10/mqdefault.jpg)
どの動画も凄くわかりやすくて、
とても助かります🙇♀️✨
ありごとうございます☺️🌷
こちらこそ、ご視聴いただきありがとうございます😊♪
コメントもいただけて嬉しいです😆❗️ありがとうございます🙇♂️！
デザイナーの仕事でコーディングはしなくてもCSSやHTMLの多少な理解が求められる事があるのでとても参加になります。
デザインのお仕事されているんですね❗️参考にしていただけてこちらも嬉しいです☺️ありがとうございます🙇♂️❗️
2サイトを作ったところの初心者ですが、無駄にクラス増やしすぎて悩んでいた所なので共通部分などとてもわかりやすかったです。
サクッと流れを見ることが出来るので超初心者から抜け出した初心者レベルの自分にはこれ位が全体を見れて嬉しいです。
コメントありがとうございます❗️
クラスの付け方や共通要素作る点はなかなか難しいですよね💦
細かく説明できていない部分も多々あると思うのですが、そういって頂けてめちゃめちゃ嬉しいです😭ありがとうございます🙇♂️❗️
分かりやすかったです
ありがとうございます
最近勉強始めたばかりでまだまだですが
実際にき書くとなるとこんな感じなのかととても見てて楽しかったです
これからも楽しみです
コメントありがとうございます😆‼️嬉しいです😭もっと楽しくなるような動画上げれるように頑張ります‼️
最近知ってチャンネル登録しました。
目下勉強中の初心者なので、確かにこのスピードにつていくのは大変ですが、何度も繰り返し見るのが苦にならない、センスの良い動画のデザインで、どれもとっても学習のヒントになります。
特にこのように、１つのページのHTMLとCSS で組んでいく様子を見せてくださる動画は、また別のデザインパターンでも見てみたいです。
チャンネル登録いただき嬉しいです😭❗️嬉しいコメントもありがとうございます🙇♂️
似たような動画また出したいと思います😆♪
神ってる
ありがとうございます😆❗️
勉強を始めたばかりの初心者ですが、コーディングの順序、クラス名の付け方等、悩んでいたので分かりやすくとても勉強になりました。
ありがとうございます。
サクッとコーディングができるように、楽しみながらレベルアップしてきたいと思います。
こちらとしても嬉しいです☺️♪ありがとうございます🙇
先月からHTML/CSSの勉強を始めましたが、知らない単語がたくさん出てきて「？？？」状態でしたが、いい刺激になりました！勉強、頑張っていきます！
少しでも参考にしていただけたようで嬉しいです😊♪ 応援してます！！
こういう淡々と説明しながら模写コーディングしてくれる動画めちゃ好きです。もっとほしい＞＜
コメントありがとうございます😆❗️嬉しいです！こんな感じの動画また上げたいと思いますー🙇♂️❗️
最近コーディングを始めたばかりです！
この動画で書けるくらいの速度が目標だと思うと、勉強がどれだけ大変か……
コメントありがとうございます😊♪
最初は覚えることがたくさんあって大変ですよね💦
ただ、最初から沢山覚えるよりかは、一度使った指定を理解するまで復習して早めに覚えてしまうと効率良くなるかなって思います‼️
無料で観ていいの！？って内容で驚きました😳ごりごりコード書いてる感じがわかりやすくて良いです！
そんなふうに言っていただけてとても嬉しいです😭ありがとうございます🙇♂️❗️
すばらしいです。ご苦労さまです。副業で稼げるようになりたいとか言ってる人は、まずこのチャンネルの動画を全部見て独学すればいいと思いました(ここをスタート地点として、分からないところを誰かに聞く、みたいなスタイルで)。
解説スピードも良いと思います。頭を回転させながら、何度も巻き戻しつつ繰り返し見る方が身につきやすいですしね。
嬉しいコメントありがとうございます😭
解説のスピードについてもご意見いただけてとてもありがたいです🙇♂️❗️❗️
まあまあコーディングできる人から見て、「制作風景の流れ」めっちゃ助かります！
たぶん、この動画のターゲットは、超初心者向けではなく、ある程度分かる人用ですよね。
しかも、「コーディングを教える」ではなく、「流れを見せます」ですもんね。
むしろ1.5倍速で見ています笑
やっぱり「HTML」で構成したあとに、「CSS」で飾りつけみたいな流れなんですよね・・・。
どうしてもCSSで早く見た目をやりたくて、同時進行してしまう・・・。
コメントありがとうございます❗️
確かにこの動画は始めたての人には少し難しい内容かと思います💦
HTMLをすべて書いて→CSSを書くのって意外と難しいと思うので、初めのうちは細かくHTML → CSS → HTML → CSSって形で問題ないかと思います☺️❗️
その際、サイトやページを通して共通化できる場所の想定は予めしておいた方がいいかもしれないですね😆♫
分かりやすい動画をありがとうございます。自分のコーディングとプロの方のコーディングのずれがどのくらいなのか知りたかったため、とても参考になりました。
XDファイルから自分でコーディングしたものはポートフォリオに載せても良いでしょうか？
こちらこそご視聴いただきありがとうございます😊♪
ポートフォリオに作品を載せる場合、自分がどの範囲作業したのか、模写などの場合は対象のサイトを明記すれば親切でわかりやすいポートフォリオになると思います😆❗️
@@hirocode 分かりました！丁寧な返信ありがとうございます！実践してみます！
ちょっと速くて、んん！？ってなりますが、わかり易く参考になりました！
コメントありがとうございます❗️少し速いというご意見を他にも頂いているので、もう少し内容絞ってより細かくゆっくり説明する動画上げたいと思います🙇♂️❗️
動画の速度落として見てもいいかもしれませんね(^^)
凄く分かりやすいです。もし可能でしたら、せっかくなので続編でレスポンシブデザインの作成について教えていただけないでしょうか。スマホでの表示の切り替えのコーディングに奮闘しており、学びたいです！
コメントありがとうございます😊🎵
レスポンシブの動画上げたいと思っていたんですが、確かにこの続編なら作りやすいです‼️この続編作ってみます😆‼️ご意見ありがとうございます🙇♂️
@@hirocode ありがとうございます！楽しみにしています🥺
わかりやすい動画ありがとうございます！
一つ質問なのですが、CSSを当てるときの「px、%、em、rem」の使い分けを教えていただけますでしょうか。
というのも、CSSを当てるときにどの単位を使ってコーディングすればいいのか迷ってしまいます。よろしくお願いします。
コメントありがとうございます😊❗️
初めは全部px指定をオススメします🙆♂️
windowsの考慮や場合によってはemの方が良い場面もあると思いますが、とりあえずはデザインのフォントサイズそのままのpx指定で問題ないかと思います‼️
動画参考にさせていただいています、非常に助かっております！
もしよろしければ、こちらのページをレスポンシブ対応にする際のレクチャーをお願いします🙏
宜しくお願いします！
嬉しいです😆❗️
レスポンシブの動画出せてないので出します‼️
ご意見ありがとうございます🙇♂️
今までWebデザインからHTMLやCSSがある程度自動的に生成されると思ってました。違うのですね。
せっかくのデザインを一度ばらさないといけないのはもったいないですね。
スマホ版のコーディングもイチからしないといけないんでしょうか。
以前CSSフレームワークのbootstrapを使ったことがあるのですが、ああいうのはデザインをされる方からすると使いづらいもんでしょうか。
コメントありがとうございます❗️
基本的にはwebデザインを作成→コードに起こすという流れが主流ですが、一部そのようなツールは存在します🙆♂️ただ、使い勝手や作成されるコードの精度など諸々踏まえると、まだまだデザインとコーディングは分けて行われると思われます🙇♂️
bootstrapはグリッドシステムが有名ですが、デザインによって向き不向きが出てきてしまうかと思います。
bootstrapの機能を生かしきれるデザインは、シンプルでモダンな系統だったりすると思うので、サイトのデザインによって使い分けるなどすれば効率よく使えそうです❗️
初心者で、始めたいと思いPC買いました！
タグの意味とかもよく分からないので
そこの細かい解説動画とかあげてもらえたら
嬉しいです！！
動画の完コピしてやってみようと思います！
コメントありがとうございます😊
PCご購入おめでとうございます😆♪
確かにこの動画は基礎を知っている前提の動画になっていると思うので、もう少し細かい点の動画も作成したいと思います❗️
paddingとネガティブmarginで余白を調整するという方法には
どういう意味がありますか？
これはbox-sizing:border-boxで
paddingかmarginを正数で指定する方法でも代用できますか？
コメントありがとうございます🙇♂️❗️
動画内の2分割指定の箇所のことでしょうか?!
2つの要素の間に任意の余白を入れ、かつ2つの要素の幅を同じようにするには、こちらの動画で指定している方法か、calcを使用する方法が考えられるかと思います。
すみません💦box-sizingでの整数指定というのがどのような指定かわからないのです！詳細ありましたら共有いただければ幸いです🙇♂️
コメント失礼します。
自分の通っている学校では、brでの改行とネガティブマージンの配置決めはあまり使わない方がいいと聞いたのですが、どちらが正しいのか分かりません、、、ネガティブを使うのであればpositionで配置した方が良いと教えられました。
コメントありがとうございます🙇♂️
brについてはその通りです❗️
昔のサイトだとのような形でスペースを設けていることがありましたが、そのような指定はしない方がいいです。文章内の必要な改行であれば問題ないかと☺️
ネガティブマージンでの配置については、場合にもよると思いうので一概には言えないです🙇♂️
何か具体例や、この動画内の具体的箇所を共有いただければ回答できると思います😆❗️
素晴らしいコーディングありがとうございます。とても参考になりました。フォントのfuturaの使い方をネットで調べてみましたが、よく分かりませんでした。futuraは有料ですか？futuraの使い方を教えていただけると幸いです。
嬉しいコメントいただきありがとうございます😊♪
futuraについて、macには標準フォントとしてfuturaが入っているのでfont-familyにfuturaを指定した場合は、サイト上のフォントはFuturaで表示されます。
ただ、futura（OSに標準装備されているフォント）をwebフォントとして使うことはランセンス上できません。なので、windowsなどのfuturaがインストールされていない端末でサイトを表示した場合、別の代替フォントでテキストが表示されます。
futuraがインストールされていない端末でもfuturaで表示したい場合は、webフォントを提供しているサービスでライセンス（有料契約）を取得する必要があるって感じです！
Adobe xdにはどのくらいHTML cssをやってからがいいですかね。今はHTML css の基本が終わったところになります。よければ勉強していく手順を知りたいです
コメントありがとうございます😊♪
もしXD使用されたことないようであれば、試しに触ってみることをお勧めします❗️
HTML/CSSとは同時並行で勉強してみてはいかがでしょうか。
XDの勉強法としては、特定のサイトをXD上で再現してみるのが使い方など覚えやすいんじゃないかと思います😆❗️
XDの機能紹介した動画あるのでよろしければ見てみてください🙇♂️
ruclips.net/video/AaBB0YkbvYs/видео.html
作業中の手元の環境はどのような感じですか？カーソルの移動やタイピングが鬼のように速いので…笑
編集で全体的に速度あげてるから早く見えるだけです😅❗️
今度の動画で実際のスピードも交えてアップしてみます🙇♂️
とても参考になりました。
画像をhtml imgタグ で指定したりCSS background-img で指定したりされていますが、どうやってどちらにするか決めているのでしょうか？
嬉しいコメントいただきありがとうございます😊♪
例えば、何かの背景として使用したい場合、この動画で言えばトップのテキストやボタンなどの背景として画像があるので、この場合background-imageを使っています。
あとはhoverで画像に変更を加えたいとき、例えばボタン上のアイコンなどは、hoverで色を反転させることがあるのでその場合もbackground-imageを使用した方が指定しやすいです😆❗️それ以外はimgタグで配置します。例外はありますが基本的にこんな感じで判断しています！
コードを書くのにどのアプリケーションを使ってますか？
coda2というエディターを使っています‼️
投稿お疲れ様です、勉強になりました！
エディターはなに使ってますか？ Xdやエディターを横にスライドして切り替えるのはどうやってるんですか？
コメントありがとうございます😆❗️
エディターはcoda2を使用しています。coda2は有料エディタですが、クリップ機能という、いわゆるスニペットを簡単に管理出来る機能がオススメです！
スライドして切り替えるているのはmacのMission Controlという機能で、ウィンドウを表示するスペースを複数用意して切り替えられるイメージです。
この機能はmacのPCには標準装備されています😊🎵
返信ありがとうございます！
ヘッダーの動画もとても参考になりました！
mission Control使ってみます👍
よければ最終的なHTMLとCSS のコードが見せてもらいたいです。ゆっくり見て止めながら書いても、その通りにならないため、どこが違うのか分からないのです。なにかで公開していますか？
コメントありがとうございます😆❗️概要欄に使用したファイル載せたのでご自由にお使いください🙇♂️不明点あればまたコメントください☺️♪
@@hirocode ありがとうございました。細かいところで間違っているのが分かりました。
動画を見ながらやったんですが、完成がずれていました。自分が作った ソースコードを見直してみたのですが、違いがわかりません。 ＣＳＳがうまく適用されなくてレイアウトや見た目のデザインが崩れてしまった場合、どのように修正していったらよいでしょうか？
コメントいただきありがとうございます🙇♂️
ブラウザでコード確認する際に、デベロッパーツールというものを使うととても便利です（その辺の動画も追々出せればと思います。。)❗️
ブラウザ上で右クリック→検証（GoogleChromeの場合）を押すとサイドバーが出てくるので、サイドバー左上の矢印を選択後、画面上をクリックするとプレビュー見ながらソースコードをいじることができます（この説明だと意味わからないと思うので、詳しくは「デベロッパーツール」でググってみてください🙇♂️）。
また、概要欄にソースコードのリンク載せてるので、よろしければダウンロードしてご自身のコードと比較してみてください😆❗️
@@hirocode ありがとうございます。やってみますね。
素組のHTML/CSS を使うケースって相当手間がかかるのかなと思いましたが、これって実案件でもこのやり方でしょうか？
sassやpugなどコードを省略記述する方法や、パーツをコンポーネント化して再利用するなどもっと効率的に書く方法はありますが、基本的にはこんな感じで書く必要があります❗️
@@hirocode ありがとうございます。拡張性を考慮するとやっぱりコンポーネント必須ですよね
0:50あたりでウィンドウが切り替わっていて便利そうなのですが、Macのショートカットですよね。。。どのキーを押すとスライドしますか。
コメントいただきありがとうございます😊♪
トラックパッドを３本の指で左右にフリックすることで画面を切り替えています❕
キーボードで操作する場合は、control + ← or → です❕
とても親切にありがとうございます🙇♀️これからも応援させてください。チャンネル登録を失礼致します。
嬉しいです😭こちらこそありがとうございます🙇♂️❕
模写コーディングしてて思ったんですが
質問です！50%下にして、50%上にしたら同じじゃないですか？
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
コメントありがとうございます😆🎵
これに関しては同じじゃ無いです🙆♂️
topは親要素の%で、transform translateは指定要素の%です！
例えば、100pxの箱に10pxの四角がいるとしたら、上から50pxの位置にまず配置されて、そこから上に5px移動するといった感じです🙆♂️‼️
@@hirocode わかりました！ありがとうございます！！！
ヒロさん、
教えてください！
ヒロさんは持ち前のコーディング
技術がありますよね。
これだけの技術があれば
WordPressを使う必要は
無いかなと思います。
普段お客様のご要望などで
WordPressを使うことって
有りますか？
この質問の意図は
技術があれば
WordPressを使う必要が
無いと思ったからです。
是非ご教授ください🙇♂️
コメントありがとうございます😊♪
Wordpressの便利な点は、記事の投稿やフォームなどの機能が簡単に実装できる点にあります。
このような機能はHTML/CSSでは作成することができないので、主にエンジニア職の人が実装する範囲になります。
なので、Wordpressを使うとエンジニアなしでこれらの機能を導入することができます。
これがWordpressを使う一番の理由だと思います❗️
ヒロさん、
わかりやすいご回答ありがとうございます😊
今知り合いのホームページを
HTMLとCSSを使ってコードを書いて
作成しております。
さらにお問い合わせフォームを
追加しようとしております。
そこでもう少し教えて
ほしいのですが、この場合どうすれば良いでしょうか？
PHPやJavaスクリプト、JQeriなどの技術が必要なのですか？
これらの技術は私には残念ながらなく
どうすれば良いか迷っています。
もしくは
HTML CSSでページを作成して
お問い合わせフォームだけWordPressの
プラグインを組み込むことはできるのでしょうか？
ヒロさん、教えていただけませんか。
@@user-sk6ed9wl9t お問い合わせフォームだけでも全然大丈夫です❗️ただ、WordPressのインストールやページの作り方など、基本的なWPの使い方の知識は必要になるかと思います❗️お問い合わせのプラグインは「contact form 7」か「mwwpform」が有名です😆❗️
早すぎてわかりにくい
遅くやってくれれば理解しやすいです
コメントありがとうございます❗️
説明のスピードについて不安要素の一つだったので、そのようなご意見いただけてとてもありがたいです🙇♂️🙇♂️🙇♂️❗️いただいた意見参考に改善していきたいと思います🙇♂️
ファイルダウンロードで、アクセス権限がないと言われてしまいました😭
すみませんリンク新しいものに更新しました💦
ご指摘いただきありがとうございます🙇♂️❗️
詳しいのですが、展開が早すぎてついていけない！
コメントいただきありがとうございます🙇♂️
スピードが早いというご意見他の方からもいただいているので、今後もう少し速度面改善していければと思います❗️
貴重なご意見ありがとうございます❗️
もう少し操作を遅くして欲しい。
初心者には早すぎてコードが何書いてあるか確認がしづらい。
最後に完成したコードを一通り見せるとかしてくれると分かりやすい
コメントありがとうございます❗️
他の方のご意見でも早いというご意見をいただいているので、もう少しゆっくりとした流れで、分かり易い動画作り心がけたいと思います🙇♂️❗️
今後の動画作りに大変役に立つご意見ありがとうございます🙇♂️❗️❗️
全然理解できない
コメントありがとうございます😊
もっと細かくパーツなどに分けた説明動画も上げようと思います🙇♂️