Тёмный
No video :(

Coding Airbnb websites with HTML CSS 

HIROCODE.
Подписаться 67 тыс.
Просмотров 38 тыс.
50% 1

0:50 screen structure
1:51 about sass
3:43 coding in html
4:19 emmet
4:55 about .container
5:51 about class name
6:05 header(HTML)
7:59 header(CSS)
10:18 footer(HTML)
11:55 layout & parts
12:46 footer(CSS)
14:20 Important point
14:58 main section
16:06 .p-home__section
16:53 main visual
17:10 .container
17:34 .p-home__section
18:14 parts
18:19 parts(.c-text)
19:55 parts(.c-description)
20:41 parts(.c-button)
21:50 【Important】parts(.c-image)
23:37 selector & class
24:31 photo list(.p-cardList)
28:20 【 Important 】Which one should the margin be applied to?
29:18 image & text list(.p-areaList)
32:07 box area(.p-box)
33:35 button pattern
34:56 photo
35:36 photo & text
36:03 :before
37:37 main visual
38:06 button pattern 2
38:58 header navigation
📁Files
www.notion.so/...
Thank you for Watching😆❗️
Please Subscribe 🙇‍♂️❗️
www.notion.so/...

Опубликовано:

 

5 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 53   
@fan827
@fan827 2 года назад
いつも分かりやすい動画ありがとうございます。内容ももちろんですが、お話の仕方がとても穏やかで素敵だなぁと思って拝見しています。模写コーディングは、避けて通れない効果的な練習方法だと分かっていつつ、一人で取り組むと途中で諦めてしまってばかりだったので、本当に本当に参考になります。効率よく、シンプルに書く方法や、レイアウトとパーツを分けて書くなど、自分でもできるようにこの動画を見ながら模写やってみます。模写コーディングシリーズどんどん出していただけると嬉しいです。これからも更新楽しみにしています。
@hirocode
@hirocode 2 года назад
とっても嬉しいコメントいただきありがとうございます😊♪ 最初の頃は覚えること沢山あってなかなか大変ですよね😥少しでも参考にしていただけたようで、こちらとしても嬉しいです🙇‍♂️❗️ 他にも模写コーディング動画作成したいと思います!ご要望いただきありがとうございます😆❗️
@web_jam
@web_jam Год назад
おかげさまでSassの実践的な使い方がよく理解できました!! classのつけ方もとても参考になりました^^
@hirocode
@hirocode Год назад
良かったです😆‼️嬉しいコメントいただきありがとうございます🙇‍♂️‼️
@user-sp9sc7ut7q
@user-sp9sc7ut7q 3 года назад
なんと!こんな神チャンネルがあったとは。過去動画から全て観てみます!
@hirocode
@hirocode 3 года назад
すごく嬉しいコメントありがとうございます😭‼️
@arik6802
@arik6802 3 года назад
初めまして。独学でプログラミング勉強中主婦です。いつもヒロさんの動画で勉強させていただいてます。現在デザインカンプからのコーディングをしていて、クラス分けやクラス名をどうつけたら良いかわからず彷徨ってました。こちらの動画を参考にさせて頂きとても勉強になりました。ありがとうございます。慣れてきたらemmetもsassも使えるようになりたいです。
@hirocode
@hirocode 3 года назад
コメントいただきありがとうございます❗️ 主婦のかたわらプログラミングの勉強とはすごいですね😵 参考にしていただけてこちらとしても嬉しいです😆♪引き続きプログラミングの勉強頑張ってください!応援しています❗️
@mizunoai8462
@mizunoai8462 3 года назад
模写コーディングとても勉強になりました。またアップ楽しみにしています!!
@hirocode
@hirocode 3 года назад
嬉しいコメントいただきありがとうございます😆‼️
@jptk6645
@jptk6645 2 года назад
今、動画を見ながらsassをいれてコーディングしました。sassは前から導入したいとおもっていたので、この動画がよいきっかけになりました。 ネガティブマージンをよく使ったり、flex 1 1 100% などつかっていたので、今の自分のスキルでは一人では出来ないのでこういうやり方もあるのかーと勉強になりました。
@hirocode
@hirocode 2 года назад
sass絶対オススメなので導入のきっかけになって嬉しいです😆❗️ ありがとうございます🙇‍♂️❗️
@araby_v
@araby_v 3 года назад
いつも動画ありがとうございます🙇‍♂️改めてシンプルな記述を心がけたいなと思いました...。 私もSASSを使っていますが、あまり活用できていないので、SASSの便利な記述法をガッツリ使った模写コーディングや制作が見られたら嬉しいなと思ってます☺️
@hirocode
@hirocode 3 года назад
こちらこそご視聴いただきありがとうございます😊♪ SASSについての実践動画まだ出せていないので検討したいと思います😆❗️貴重なご意見ありがとうございます🙇‍♂️❗️❗️
@mash_D
@mash_D 2 года назад
大変参考になりました。web業界には興味はありますが、まだまだ初期のcss止まりなので、今回のような表記方法をもっと覚えたいです。 自身の模写方法は、元ページのcssをほぼ持ってきて、細部をピクセル単位でいじるって感じなので、ページ内容はともかく、自分で全ルールを書けるように勉強を続けます。他の動画も参考にさせてもらいたいと思います。
@hirocode
@hirocode 2 года назад
コメントいただきありがとうございます😊♪ CSS学習とのことで、少しでも参考にしていただけたようでこちらとしても嬉しい限りです☺️♪ CSSは覚えること多いですが頑張ってください! 応援してます😆❗️❗️
@user-xm2eg7vb2j
@user-xm2eg7vb2j 2 года назад
ありがとうございます!
@user-ef9tc4oz2k
@user-ef9tc4oz2k Год назад
はじめまして!独学でwebデザインを勉強しておりますが、初心者の私にもわかりやすい動画で、いつも助けられています😊✨ヒロさんの動画がなければ挫折していたと思うので、こんなにも有益な動画をありがとうございます🥲✨ みなさんへのコメントへの返信も丁寧で、暖かい方なんだろうなと思いながら、拝見しておりました😌 もしまだよろしければ、CSSでのファイルをアップしていただくことは可能でしょうか?💦
@hirocode
@hirocode Год назад
初めまして😊♪ こちらこそ嬉しいコメント頂けて感謝です🙇❗️ ちょっと分かりにくくて恐縮ですが、概要欄を広げてもらうと、 📁 動画で使用したファイル 📁 ってところにurlがあるので、そこでzipファイルをダウンロードすることができます。 その中にcssフォルダがあるので、その中確認していただければと思います😆❗️
@user-ef9tc4oz2k
@user-ef9tc4oz2k Год назад
@@hirocode こんなにも早くご返信をいただきありがとうございます!☺️私の方こそ見落としてしまっており、申し訳ありませんでした💦こちら参考に学習させていただきます✨これからも動画投稿楽しみにしています😊❣️
@user-ui6kz7rl1g
@user-ui6kz7rl1g Год назад
こんにちは。ぜひflocssの解説動画を作って下さい🙇‍♀️
@hirocode
@hirocode Год назад
こんにちは😊♪ FlocssとBEMについての動画、既に撮影して編集中なので近々上げられると思います😆❕
@user-ui6kz7rl1g
@user-ui6kz7rl1g Год назад
ありがとうございます😭嬉し過ぎます!!!ものすごい楽しみにしてます😃
@KentaroxKondo
@KentaroxKondo Год назад
すごい…😂 幅や高さを確認するときに使っているのは、マックのスクショ機能の十字カーソルですか…??
@hirocode
@hirocode Год назад
ありがとうございます🙇‍♂️ そうです!ざっくりサイズ測りたい時はスクショ機能使っちゃってますw😆❗️
@KentaroxKondo
@KentaroxKondo Год назад
@@hirocode その発想はありませんでした!😂
@user-pb4cf7gd5u
@user-pb4cf7gd5u 5 месяцев назад
共通のパーツは同じクラス名を使いまわしししたけど一つだけパーツの色味などを変えたい場合はどうしていますか? 例えば、「周辺エリアを創作」と「好きなところに暮らそう」はほとんど同じパーツで作られています。「周辺エリアを捜索」の部分だけ背景を変えたいとき、[p-home__section]にbackground-colorを指定すると「好きなところに暮らそう」の部分も同じクラス名なのでそこにもCSSが反映されてしまいます。同じクラス名を使う場合このような問題によく合うのですがどうしたらよいでしょうか?コメントいただけると幸いです。
@hirocode
@hirocode 5 месяцев назад
それ用のクラスを用意します💡 .p-home__section--bgGray { background-color: gray; } こんな感じの指定で解決します😆❗️
@user-rc4lj2jz8h
@user-rc4lj2jz8h 9 месяцев назад
なぜc-imageは正方形になるのですか? 22:28 初歩的な質問ですみません
@hirocode
@hirocode 9 месяцев назад
コメントありがとうございます😊! padding-topは、親要素の横幅と基準とした値となるので、正方形になります。ただ、現在は比率指定できる便利な指定があるので、この動画で使用しているpadding-topを使った比率の指定は使わなくなりました。 .c-image {  width: 100px;  aspect-ratio: 1; } 今はこの指定だけで正方形を作ることができます😆❗️ 比率変えたい場合は、aspect-ratio: 16 / 9; みたいに指定します!
@user-rc4lj2jz8h
@user-rc4lj2jz8h 9 месяцев назад
@@hirocode ありがとうごさいます! 僕も最近やっとaspect-ratio知りましたw
@yuon4742
@yuon4742 3 года назад
初めまして! いつのHIROCODEさんの動画には助けられていて、かなり分かりやすくて最高です❗️✨ 動画の中で3枚の画像を横並びにしたときに、「flex: 1 1 0%;」というスタイルを付けられていたと思うのですが、どういう意味になりますか? ググってみたのですが、イマイチ分からず...教えて頂ければ嬉しいです🙇‍♀️
@hirocode
@hirocode 3 года назад
嬉しいコメントありがとうございます😆❗️ flexのプロパティについてはなかなか理解するのが難しいと思いますが、ざっくり説明します。 flexプロパティの値は、flex-grow,flex-shrink,flex-basis、これら3つの値を指定しています。 今回の場合、flex-grow→1,flex-shrink→1,flex-basis→0%という指定になります。 flex-growは対象の要素を広げるかどうか、shrinkは逆に縮めるかどうか、basisは基準の大きさを指定します。 今回、flex-grow,flex-shrinkは1の指定なので、広がるし、縮まる、という指定になります。 例えばflex-grow: 0;だと広がらないという指定になります。 最後flex-basisは0にするとflexアイテムが同じサイズになるという理解で大丈夫かと思います。 ざっくりの説明で恐縮です。なかなか覚えること多くて難しいですが、プロパティ1つづつ覚えていけば大丈夫だと思います😊♪
@yuon4742
@yuon4742 3 года назад
@@hirocode なるほど!丁寧なご説明ありがとうございます! 本当にヒロさんのおかげでコーディングの最初の峠を越えられたので...これからも動画楽しみにしています✨
@jptk6645
@jptk6645 2 года назад
@@hirocode こういうわけだったんですね。 ググっても でてこなかったので困っていました。
@tomohashi5537
@tomohashi5537 Год назад
質問失礼致します。いつも参考になる動画、有難うございます。 前のコメント欄に、概要欄の📁Files 📁のURLから、zipファイルをダウンロード出来るとありましたが、これをクリックするとnotionへ飛んで、「Hiro Tajimaへのアクセス権がありません」と表示されます。 勉強のためにzipファイルをダウンロードしたいと思っているので、対処方法を教えて下さい。 お手数お掛け致しますが、宜しくお願い致します。
@hirocode
@hirocode Год назад
嬉しいコメントいただきありがとうございます🙇‍♂️‼️ 前にnotion使ってたので、それが残ってるみたいです😱 すみません僕の方でnotionのリンク見つけられなかったのですが、リンクってこの概要欄のURLでしょうか??
@tomohashi5537
@tomohashi5537 Год назад
@@hirocode お返事有難うございます。 概要欄の動画のチャプターの下にある、📁Filesの下のURL「www.notion.so/code__31__copyC...」をクリックすると、notionへ飛んで、「Hiro Tajimaへのアクセス権がありません」と表示されます。 この動画のzipファイルはココからで間違いないでしょうか? 念のため当方もnotionのアカウントは取得致しました。 お手数ですが、お教え下さい。宜しくお願い致します。
@hirocode
@hirocode Год назад
こちらこそ詳細にありがとうございます🙇‍♂️概要欄のリンク変えてるはずなんですが、アクセス方法によってはなぜか古いリンクが表示されてしまっているようです💦 こちら正しいリンクです❕よろしければこちらアクセスしてみてください🙇‍♂️ www.craft.do/s/ym2RS2ZL1xNbg2
@tomohashi5537
@tomohashi5537 Год назад
@@hirocode お返事遅くなってすいません。リンク有難うございました。 何故かWindowsでZipファイルを展開すると文字化けしたのですが、MacOSから開くとコード確認出来ました。 動画の内容もそうですが、いつも親切・丁寧な対応と説明、本当に有難うございます。 また質問が出てきましたら、その時も何卒宜しくお願い致します。
@user-xm2eg7vb2j
@user-xm2eg7vb2j 2 года назад
.p-header{ .container{} &__logo{} ... } のようにするとうまく反映されないのですが何か間違っているのでしょうか? .p-header .container{} で中身を書くとうまくできたのですが アプリケーションによってヒロコードさんの書き方が使えなかったりしますか?
@hirocode
@hirocode 2 года назад
コメントいただきありがとうございます😊♪ おそらくですが、cssファイルに記述していませんか❓ この動画ではsassという言語を使用していて、scssファイルにスタイルを記述して、それをcssに変換するという形で使用しています。 .p-header {  .container {} } cssでは波括弧の中にセレクタ(上記例では.containerのこと)を入れることができないので、上記のように書くには、sassを使用する必要があります。 最初の設定が少し難しいですが、sassについてはこちらの動画で説明しているのでよろしかったら見てみてください😆 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-UDV-m3Xaero.html
@user-xm2eg7vb2j
@user-xm2eg7vb2j 2 года назад
ありがとうございます! わかりやすかったです! 見落としていたと思いますすみませんでした、助かりました…
@mmi9595
@mmi9595 2 года назад
ピクセルをWebページ上で図っているのは何かのツールでしょうか??
@hirocode
@hirocode 2 года назад
コメントありがとうございます😊 macでcommand + shift + 4を押すと範囲指定のスクショ機能になるので、それを利用してピクセル数測っています!ドラッグそのまま離すと毎度スクショ撮ってしまうので、escキーでキャンセルしてる感じです😆❗️
@ryoseim7056
@ryoseim7056 10 месяцев назад
こんにちは!エディタは何を使われていますか?
@hirocode
@hirocode 10 месяцев назад
コメントありがとうございます☺️ この動画ではCoda2という有料エディタを使ってます!今は無料のVSCodeをメインで使ってます😆❗️
@ryoseim7056
@ryoseim7056 10 месяцев назад
ありがとうございます! MacBookを今使っているのですが、書いたコードをすぐ反映させる簡単なやり方など教えてもらえると嬉しいです! 動画内で素早くやられているので気になります
@redred162
@redred162 3 года назад
いつもキーボードがいい音するなぁと思ってるんですが、なんていうキーボードを使われてますか?
@hirocode
@hirocode 3 года назад
コメントいただきありがとうございます😊♪ この動画で使用しているキーボードはMacbook Pro内蔵のキーボードです❗️16-inch 2019のもの使用しているため(バラフライ式キーボード)、現行のmacbookproとはタイプ音が異なるかもしれません。ちなみに普段作業するときはMX KEYSというロジクール製のものを使用しています😆❗️
@redred162
@redred162 3 года назад
@@hirocode 教えて頂き、ありがとうございました!😌✨ 変なこと聞いてすみません!
Далее
CSSクラス命名規則、FLOCSSとBEM。
11:50
Просмотров 25 тыс.
HTMLをブラウザで表示する方法
9:37
Просмотров 22 тыс.