Тёмный

【実践】模写コーディングのやり方 | HTML & CSS | Coding 

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

こんにちは😊♪
今回はサイトの模写コーディングにチャレンジしました。
RU-vidのトップページのコーディングをしていて、コーディングの流れやコードの組み方などの参考になれば幸いです🙇‍♂️❗️
🎥 NEXT VIDEO!!
次の模写コーディング動画はこちら
• 【実況】模写コーディングの決定版!やり方・手...
0:00 オープニング
0:48 基本ルール
2:07 模写コーディングスタート
4:37 レイアウトを組む
5:55 ヘッダー(header)を組む
10:35 サイドバー(aside.sidebar)を組む
15:16 サイドバーのリスト
16:47 【ポイント】テキストとアイコンの並べ方
24:05 ヘッダーの詳細を組む
28:30 メイン(main)を組む
33:12 【ポイント】サムネイル画像比率保持
40:00 エンディング
⭐️ 自分でWebサイト作ってみませんか? ⭐️
誰でも、できる!Webサイト公開の流れ!
• 【10分でサイト公開】誰でもできる!Webサ...
✅ご視聴いただきありがとうございます🙇‍♂️
この動画を気に入っていただけたら、ぜひチャンネル登録よろしくお願いします❗️
◆ チャンネル登録
ru-vid.com?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...
----------------------------------------------------------

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

 

21 июл 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 160   
@todotaka4302
@todotaka4302 3 года назад
模写コーディングこれからも見ていきたいです!とても勉強になります!
@hirocode
@hirocode 3 года назад
嬉しいコメントありがとうございます😊🎵今後も上げてみたいと思います😆‼️
@user-mo4nb9cj9k
@user-mo4nb9cj9k 3 года назад
みてて楽しかったです! モチベあがりました! 参考にします!
@hirocode
@hirocode 3 года назад
楽しいと言っていただけてとても嬉しいです😊❗️ ありがとうございます❗️❗️
@morainbowon
@morainbowon 3 года назад
とても参考になり、楽しく視聴いたしました!ありがとうございまいた。
@hirocode
@hirocode 3 года назад
とっても嬉しいコメントいただき嬉しいです😭❗️ こちらこそご視聴いただきありがとうございます🙇‍♂️❗️
@minoco2253
@minoco2253 3 года назад
HIROさんの動画続けて何本も観てしまいました!3時間近く。 XDの使い方から飛んできたのですが、コーディングやWEB デザインについてもシンプルでとてもわかりやすいです。
@hirocode
@hirocode 3 года назад
コメントいただきありがとうございます🙇‍♂️ 沢山みていただき嬉しいですー😭 これからもっと参考にしていただけるような動画上げれるように頑張ります❗️
@tomoki.u6720
@tomoki.u6720 3 года назад
為になる動画ありがとうございます!
@hirocode
@hirocode 3 года назад
こちらこそご視聴いただきありがとうございます🙇‍♂️❗️❗️
@AobaStudyVlog
@AobaStudyVlog 3 года назад
毎回めちゃくちゃ参考にしてます! 自分もプログラミング頑張ります!
@hirocode
@hirocode 3 года назад
ありがとうございます😭❗️ 僕も全然まだまだなので一緒に頑張ります❗️❗️
@nken3037
@nken3037 3 года назад
参考になりました!ありがとうございます!
@hirocode
@hirocode 3 года назад
嬉しいです😊❗️ありがとうございます❗️
@user-bv6fx6tr4d
@user-bv6fx6tr4d 3 года назад
何回も動画見てRU-vid page模写してます。とっても勉強になります!また他のサイトも模写してください!!!
@hirocode
@hirocode 3 года назад
ありがとうございます😭❗️ 次の模写動画出す予定あるので、それまでしばしお待ちください🙇‍♂️❗️❗️
@smami5740
@smami5740 2 года назад
こうしたいところですが、このような理由でこうします、とコードを組む説明が秀逸! 同様のアプローチでの模写コーディング・デモンストレーション動画、楽しみにしています。
@hirocode
@hirocode 2 года назад
とても嬉しいコメントいただけて光栄です😭❗️ また同じ形の動画出します!ありがとうございます🙇‍♂️❗️
@user-hd3vn4mo8d
@user-hd3vn4mo8d 3 года назад
クラウドソーシングでHTMLコーディングに取り組もうと考えていた初心者です。こちらの動画を真似して、スキル向上させて、案件獲得していきます!
@hirocode
@hirocode 3 года назад
参考にしていただけて嬉しいです♪応援してます😊❗️
@kichiku-surume
@kichiku-surume 3 года назад
実際のコーディング風景が見れて勉強になりました! タイトルが2行に収まらない場合に省略する方法や、検索ボックスの右にあるサーチボタンをどのようにコーディングするのかも気になります!
@hirocode
@hirocode 3 года назад
コメントありがとうございます🙇‍♂️ 普段やらない喋りながら続けての作業だったので、中途半端なところで断念してしまいました😓 こちらできれば続きも上げたいと思います❗️そのほかの模写コーディングも上げれればと思います❗️
@ktml_o.O
@ktml_o.O 2 месяца назад
なんとか作成できました、、! とてもわかりやすかったです。ありがとうございます:)
@hirocode
@hirocode 2 месяца назад
良かったです😆❗️ありがとうございます🙇❗️
@adventurecraftsman1470
@adventurecraftsman1470 2 года назад
とても参考になりました! 実際に他の方が模写してる雰囲気を見れて良かったです! webgl?などが使われているサイト、パララックスが使われているサイトの模写もしていただけるととても嬉しいです!
@hirocode
@hirocode 2 года назад
少しでも参考にしていただけたようで嬉しいです☺️♪動画のご提案もいただきありがとうございます🙇‍♂️❗️
@user-ej7zu6nc9m
@user-ej7zu6nc9m 2 года назад
凄いのひと言✨ ホントに凄い‼️ 頭の中で組み上がっているのでしょうね😊 自分も今、勉強中なのですが、ここまで出来るようになれる気がしない……😂 参考にするのにオススメの本などがあれば教えて欲しいです!
@hirocode
@hirocode 2 года назад
嬉しいコメントいただきありがとうございます😭 最初のうちは覚えることたくさんあって大変ですが、知識量に比例して速度も上がってくるので続けていれば大丈夫だと思います💪❗️ 概要欄の1番下の方にいくつかオススメ書籍📚載せているので参考にしてみてください😆‼️
@user-bc5mt7ue7d
@user-bc5mt7ue7d 2 года назад
めっちゃめっちゃすごく参考になり勉強になりました! コーディングを書いてるところなかなか見る機会ないので、作り方とか勉強になって感謝です。 ありがとうございました。欲を言えば・・・もしできたらレスポンシブ対応までのコーディング動画が見たいです。
@hirocode
@hirocode 2 года назад
嬉しいコメントいただきありがとうございます😊♫ ご要望ありがとうございます❗️レスポンシブの動画1つも出せてないので作ります❗️❗️
@user-bc5mt7ue7d
@user-bc5mt7ue7d 2 года назад
わぁー嬉しいです!ぜひレスポンシブ動画よろしくお願いします。 ちなみに、この動画を見て4時間くらいかけてヒロコードさんのマネをしてコーディングしてみました。できました!!勉強になりました(☆▽☆)
@hyuma3357
@hyuma3357 Год назад
プロゲートを終えたばかりで次に何をやるか迷っていた時にこの動画に出会いました。 今の自分にはレベルが高すぎてついていけない😂 自分で模写コーディングできるように頑張ります♪
@hirocode
@hirocode Год назад
コメントいただきありがとうございます😊♪ おっしゃる通り、最初のうちはシンプルなサイトからチャレンジするのが良いかもしれません!頑張ってください😆❕❕
@hyuma3357
@hyuma3357 Год назад
@@hirocode ありがとうございます! 頑張ります!
@user-iu2zs5pj9p
@user-iu2zs5pj9p 3 года назад
webデザインに興味があるものです。ヒロコードさんの動画が分かりやすく色々な動画を見てしまいました笑 前職はアンティークショップ店員さんだと動画でお聞きしたのですが、そこから現在の会社に入るまでの学習のロードマップなど教えて頂けると嬉しいです。 動画作りとお仕事の両方大変かと思いますが応援しています!
@hirocode
@hirocode 3 года назад
動画色々見ていただけたようで嬉しいです😭ありがとうございます🙇‍♂️❗️ 僕の場合ちょっと特殊なのですが、他に参考になりそうな話も考えてゆるく話す動画あげれたらと思います❗️ご意見ありがとうございます😊応援コメントもありがとうございます😭
@oc31sunny42
@oc31sunny42 3 года назад
他にも模写コーディングの動画を希望します!
@hirocode
@hirocode 3 года назад
そういったご意見いただけて嬉しいです❗️他にもあげたいと思います😊❗️
@coil9001
@coil9001 3 года назад
何を模写するのかと思ったらRU-vidとかえぐいw
@KentaroxKondo
@KentaroxKondo Год назад
やっぱりすごいなぁ〜!こんなすらすら書いてみたいものです・・・笑 そして、 34:09 こんな技があったのか〜!絶対に思いつかない・・・
@hirocode
@hirocode Год назад
ありがとうございます😊♪ 今だとgapというめちゃめちゃ便利なプロパティが使えるようになったので、そちらの利用がオススメです😆❗️
@KentaroxKondo
@KentaroxKondo Год назад
@@hirocode gap! ありがとうございます! 調べてみます🙌
@ks-ed6xi
@ks-ed6xi 3 года назад
すごい! 参考になります! ヒロコードさんのスキル力で時給換算するとどのくらいなのでしょうか?
@hirocode
@hirocode 3 года назад
コメントありがとうございます🙇‍♂️❗️ Webデザインてクライアントの好みなどによっても作り直しなどがあって結構ばらつきがあるのですが、簡易的なwebサイト制作であれば5,000~10,000円/1h くらいかと思います💡僕がフリーランスだったら多分このくらいかなーって感じなのであくまでざっくりとした想定です😆❗️
@ei5557
@ei5557 2 года назад
とても参考になります! 先週、初めて知り合いから案件を頼まれたので奮起しています。でも知識も実践が足りなさ過ぎて本やネットに書いてあるコードをそのまま写す…とかもザラです…。 もっと頑張らねば…
@hirocode
@hirocode 2 года назад
コメントいただきありがとうございます😊♪ 最初の頃はみんな、見つけたコードそのままコピーして使って、って感じで覚えてくと思います❗️ 案件頑張ってください😆‼️
@takahiroshibuya
@takahiroshibuya 2 года назад
為になる動画をありがとうございます、お勉強させてもらってます。 サイドバーメニューのアイコンに1つ1つアイコンを当てていくのは一体どうやってやるのでしょうか?
@hirocode
@hirocode 2 года назад
こちらこそご視聴いただきありがとうございます😊♪ background-imageのみ個別で変える必要があるので、個別のクラスを付与して表示を変えていく形になります。 下記コード参考にしてみてください😆❗️ ■ HTML 音楽 スポーツ ゲーム ■ CSS .list_nav_sidebar .music::before { background-image: url(img/music.png); } .list_nav_sidebar .sports::before { background-image: url(img/sports.png); } .list_nav_sidebar .game::before { background-image: url(img/game.png); }
@toma66w
@toma66w 3 года назад
どの動画も分かりやすくて感謝しています。 次回も楽しみにしています! 模写するサイト「airbnb」はいかがでしょうか??
@hirocode
@hirocode 3 года назад
こちらこそご視聴いただきありがとうございます🙇‍♂️❗️ Airbnbのサイト模写するサイトとして良さそうですね😆 次の模写動画多分このサイトにすると思います❗️❗️ ご提案いただきありがとうございます😊♪
@toma66w
@toma66w 3 года назад
@@hirocode わ〜ありがとうございます!楽しみにしています✨
@yuhsiuchen4184
@yuhsiuchen4184 3 года назад
大変勉強になります! 独学でなかなか進めなかったですが、説明わかりやすくとても助かりました。 ありがとうございます:D 一つの質問をさせていただきたいですが、 約16:50からサイトバーのアイコンとテキストの並べ方を説明していただいて、 なんとなくわかりましたが、 逆に top: 50%; transform: translateY(-50%); を両方とも削除しても真ん中に揃えていますが、必ずtop:50%を先につける理由を説明していただれば嬉しいです。 基本的な質問ですみません...よろしくお願いします。
@hirocode
@hirocode 3 года назад
コメントありがとうございます🙇‍♂️ 上記書かれているコードでも問題なさそうですね😲❗️ 少し調べてみたのですが、おそらくtop→auto、bottom→autoがデフォルトで値の様なので、上下中央に揃っているのかと思います❗️ absoluteしたときにtop,leftなどの値を指定しないとIEで崩れる問題あった記憶があるので、その点大丈夫そうならそれで全然問題なさそうです😊❗️こちらこそ勉強になりました🙇‍♂️ top 50% transform -50% の応用的な使い方で言うと、右側のテキスト量が長くて折り返す可能性がある場合、1行目にアイコン中央に揃えておきたい場合なんかはtop 0.6em , transform -50%と指定すればうまくいくかと思います! あとはアイコンのバランスが悪い場合に、translate (calc(-50% + 2px))とかの指定もできるので、そう言う場面あれば使ってみてください😆❗️❗️
@rin_bluesky
@rin_bluesky 2 года назад
いつもわかりやすい動画ありがとうございます✨ テキストエディターで合ってるでしょうか? すごく見やすいので何を使用されているのか教えていただけないでしょうか。 コメントもすべて勉強材料になってとてもありがたいです!
@hirocode
@hirocode 2 года назад
嬉しいコメントいただきありがとうございます😊♪ この動画ではCoda2という有料のエディタを使用しています❗️最近は主にVSCodeという無料のエディタ使っていて、今だとそっちをオススメしています😆❗️
@rin_bluesky
@rin_bluesky 2 года назад
@@hirocode ご返答ありがとうございます!Coda2というエディタなんですね、すごく見やすいです✨今VSCode使っていて、ヒロさんのオススメでしたら、このままVSCodeで動画を見ながら同じように模写コーディングしてみます😆早くヒロさんみたいにスラスラ打てるようになりたいので、他の動画も参考に勉強します💨
@hirocode
@hirocode 2 года назад
今VSCode使ってるんですね❗️❗️VSCodeはプラグインで便利に使えるようになるので、オススメのプラグイン紹介動画もあるので、そこら辺触ったことなければ参考にしてみてください😆! 応援してます❗️
@rin_bluesky
@rin_bluesky 2 года назад
@@hirocode ありがとうございます!VSCodeのプラグインも、ヒロさんの動画を見ながら入れて使ってます✨模写コーディングの動画もですが、他の動画もわかりやすく理解できて感動です😆勉強していて楽しいのも、ヒロさんのおかげです。これからも応援しています💨
@karkshibata918
@karkshibata918 3 года назад
プログラマーにはとても勉強になる動画です❗️CSSレイアウト難しい。笑
@hirocode
@hirocode 3 года назад
嬉しいコメントありがとうございます🙇‍♂️ なんだかんだレイアウトは結構難しいですよね💦
@fanta1756
@fanta1756 Год назад
とても分かりやすいです!コードエディターは何を使われていますか?
@hirocode
@hirocode Год назад
嬉しいです!ありがとうございます😊♪ この動画ではCoda2を使用していて、最近はVSCodeをメインで使っています❕
@CHEESECAKE_J
@CHEESECAKE_J 3 года назад
フレックスボックスの動画を拝見してから登録して勉強させていただいております。 質問です。「sidebar」のアイコン用の位置調整について。「top: 50%;」で位置を下げてからまた上に移動されていますが、何かのバグ対策でしょうか?そもそも「top: 50%;」なしでも位置的に問題ないように見えます。お暇なときにご教示いただけますと幸いです。 いつも細かくわかりやすい解説動画に助けられています。これからも更新を期待しております。
@hirocode
@hirocode 3 года назад
コメントありがとうございます😊🎵 アイコンサイズやテキストサイズを今後調整する可能性を考えてこのような形で組んでいます❗️ 例えば、アイコンのサイズを縦横8pxとかにした場合、あらかじめtop50%の指定にしておくことで、常にテキストとセンター揃えになるので、アイコンの位置調整をする必要が無くなります😆‼️
@CHEESECAKE_J
@CHEESECAKE_J 3 года назад
@@hirocode さん、ご回答ありがとうございます。☺現役の方でないとできない仕掛けですね!スッキリしました!今後の追加動画にも期待して応援しています!
@onukikoichi3751
@onukikoichi3751 3 года назад
質問です。フロントエンドエンジニアを目指してる大学生です。html,css,JavaScriptを一通り勉強して、ポートフォリオ制作を始めています。作っているのは主にwebサイトなのですが、フロントエンドエンジニア志望でもPhotoshopや Illustratorでデザインができることをアピールすることは有効ですか?
@hirocode
@hirocode 3 года назад
コメントありがとうございます🙇‍♂️ 会社の構造にもよるかと思いますが、完全に分業されている企業の場合はそこまで大きなアピールポイントにはならないはないかもしれません💦 ただ、レベルにもよるかとは思いますが、デザイン含めてWebサービス構築に関しての知識や自主的な経験も踏まえて多いことに越したことは無いと思います‼️共有して損はないんじゃないでしょうか😆
@POCHA5503
@POCHA5503 2 года назад
現在、Webデザイン勉強中のママです。 とても参考にさせていただいてます。 動画止めながら一緒に模写してます。 初心者で申し訳ないのですが、Goliveとhtmlとcssの画面を同時に出しているのは、何か出し方がありますか? それとも、RU-vid用ですか? 実際にこんな感じで見れたら便利だなと思って。
@hirocode
@hirocode 2 года назад
コメントいただきありがとうございます😊♪ 基本的にはコードエディタには画面分割機能ついているはずなので、HTMLとCSSの画面を同時に表示することが可能です😆❗️ この動画では、ブラウザ画面とコードエディタ画面を同じウィンドウ上に表示しています。ブラウザの右端を縮めて裏側にあるコードエディタにいつでもアクセスできるようにして使用しています!!
@ggalow6576
@ggalow6576 3 года назад
AppleのiPhone12のページの模写コーディングが見たいです。
@hirocode
@hirocode 3 года назад
コメントありがとうございます😊❗️ iPhone12のページかっこいいですよね😆♪ スクロールとモックが連動して動く箇所についてcanvasタグで組まれているようです。 canvasタグはjavascriptと併用する必要があり、難易度が他の動画と比べて上がってしまうため、javascriptの基礎動画を出したタイミングか、もしくは簡単に実現できそうなライブラリなどあれば、その時期に合わせて検討してみたいと思います❗️ご意見いただきありがとうございます🙇‍♂️❗️
@ggalow6576
@ggalow6576 3 года назад
@@hirocode 返信ありがとうございます!楽しみにして待ってます!
@ky7039
@ky7039 3 года назад
全然わからんけど、楽しかった^_^
@hirocode
@hirocode 3 года назад
コーディング知らない方からしたら意味わからない動画ですよね😂 それでも楽しんでいただけてよかったです😆❗️ご視聴いただきありがとうございます🙇‍♂️
@takaradaaa
@takaradaaa Год назад
こんにちは。勉強させていただいてます。最初のほう 5:00あたりで display: flex にしても dev toolのuser style sheet を見ると サイドバーとメインが display: blockとなってしまい 横に並んでくれません。何がいけないのでしょう?
@hirocode
@hirocode Год назад
コメントいただきありがとうございます😊♪ 横並びについて、サイドバーとメインのdisplay属性はここでは関係なくて、親要素の.layout_pageにdisplay: flex;が正しく当たっているかが重要かと思われます。 下記参考にご自身のコードと照らし合わせてみてください😆❗️解決しなければ再度コメントください🙇‍♂️ サイドバー メイン .layout_page { display: flex; } .sidebar { flex: 0 0 240px; } .main { flex: auto; }
@user-xv8nv4ed3k
@user-xv8nv4ed3k 3 года назад
サイドバーを作っている時に、ホーム、急上昇、登録チャンネル作ってコピペした時に、いきなり全てが整っているのは、なにかショートカットをしたのですか?
@hirocode
@hirocode 3 года назад
コメントいただきありがとうございます😊❗️ 14:15 このあたりの表示でしょうか❓ ここについてはコピー&ペーストの作業なので、動画自体をカットして載せていて、実際はコピー&ペーストとテキストを変更する地道な作業を行なっています😅 ご質問の意図違っていたら再度コメントいただければ嬉しいです🙇‍♂️❗️
@Daichiiiiiii
@Daichiiiiiii 2 месяца назад
はじめまして! ヒロコードさんみたいな画面を別けてコードを書きたいと思っているのですが、どのように設定してますでしょうか?
@hirocode
@hirocode 2 месяца назад
VSCodeであれば表示→エディターレイアウトから分割できます😆❗️
@user-fj4zm3bv1l
@user-fj4zm3bv1l 3 года назад
ダラダラ勉強するよりも、模写コーディングして要領を掴んだ方がいいと思うのですがどうなんですかね。
@hirocode
@hirocode 3 года назад
そうかもしれないです❗️知識つけてからというよりかは、わからないところを調べながら実践した方が効率的だと思います❗️
@user-ef3dc4pb6m
@user-ef3dc4pb6m 2 года назад
動画拝見させて頂きました。 模写コーディングでよく拝見するのですが、マージンや高さ、画像のサイズを知る際にマウスをホバーすると値が出るのは、どの様にすればそうなるんでしょうか? デベロッパーツールだと結構見にくくてわからずらく、初心者の私には味方が難しく時間がかかってしまってます。 教えて頂けますでしょうか?
@hirocode
@hirocode 2 года назад
コメントいただきありがとうございます😊♪ デベロッパーツールのインスペクトモードのことでしょうか?? デベロッパーツール左上の矢印を選択した状態で要素にカーソルを合わせると、マージンやサイズなどが表示されるようになります😆❗️ もしおっしゃってることと相違ありましたら再度コメントください🙇‍♂️❗️❗️
@user-ef3dc4pb6m
@user-ef3dc4pb6m 2 года назад
恐れ入ります。 返信頂き有り難うございます。 先日の質問内容を確認いたしましたが、パソコンがWindowsということでしょうか?表示をすると、こちらの画像と違っています。 こちらではマウスをホバーすると丸い透明色の円が出て数字がみてとれますが、自身のパソコンではホバーするとmarginもpaddingもheight…などが一覧で表示されます。 この違いはどうしてでしょうか?
@hirocode
@hirocode 2 года назад
@@user-ef3dc4pb6m すみません、お手数をおかけしますが、この動画の何分何秒の表示か教えていただければ回答できるかもしれません🙇‍♂️💦よろしくお願いします!
@user-ef3dc4pb6m
@user-ef3dc4pb6m 2 года назад
お世話になります。 この動画に限らずですが、この動画でいえば15:47のところです。 私のパソコンではデベロッパーツールを開いてカーソルとあてると これとは違う表示がなされます。 これには何かしらのやり方があるのでしょうか?
@hirocode
@hirocode 2 года назад
ご確認いただきありがとうございます🙇‍♂️❗️ ここではmac標準機能の範囲指定のスクリーンショット機能を使ってます!範囲指定のスクリーンショットでは選択した範囲のピクセル数が表示されるので、簡易的にサイズを測る際に使用しています😂 macお使いでしたら、cmd + shift + 4 でカーソル変化するのでドラッグすれば同じ挙動になります。ドラッグ放すとスクショ撮ってしまうので、escキーでキャンセルしてます😆❗️
@takaradaaa
@takaradaaa Год назад
ご丁寧な回答ありがとうございます。しかしうまくいきません。サイドバー とメインが縦に並んでるだけです。試しに色も付けようとしましたが以前と違い 色まで反映されなくなりました。最初のどこかで間違っているみたいです。<Style>の最初のタグに赤いエラー下線がついてしまいます。泣きそうです。
@hirocode
@hirocode Год назад
こちらにhtmlファイルの中身をまるっとコピペしていただけたらわかるかもしれません❗️
@hn-3327
@hn-3327 2 года назад
スーパー初心者です。 そもそもな質問で申し訳ありません、、、 この入力していってるのはソフトか何かですか? デベロッパーツール?
@hirocode
@hirocode 2 года назад
コメントいただきありがとうございます☺️♪ これはコードエディターという、コードを編集するツールです❗️ コードエディターにもいくつか種類があるんですが、動画で使用しているのはCoda2というエディターで、最近だとVSCodeが人気なのでそっちを使用することが多いです!!
@kokoronosoranoiro1457
@kokoronosoranoiro1457 3 года назад
楽天市場のコーディングをどうしても知りたいです。楽天GOLDで使用できる言語などご存知でしょうか?
@hirocode
@hirocode 3 года назад
楽天市場GOLDって知りませんでした😵❗️ 調べてみたんですが、HTML,CSS,Javascriptが使えるようです❗️❗️
@user-ek9qf4np3t
@user-ek9qf4np3t 3 года назад
質問です。 リスト「.li」を書いた時に文の頭に黒丸ができると思うのですが、なぜヒロコードさんはできないのですか?
@hirocode
@hirocode 3 года назад
ご質問いただきありがとうございます🙇‍♂️ 説明なくてすみません💦 これは、リセットcssという、ブラウザのデフォルトのスタイルを打ち消すCSSを読み込んだ上で、独自のスタイルシート(style.css)を読み込んでいるためです! 上記のように、デフォルト打ち消し+独自のスタイルを当てるという形でコーディングしていくのが一般的かと思います。 リストについては、ブラウザのデフォルトで、ulタグに対してlist-style-type: disc;という指定がされているので黒丸が表示されます。リセットCSSには、ulタグに対してlist-style-type: none;という記述があるため、黒丸が表示されないように打ち消されています❗️
@user-ek9qf4np3t
@user-ek9qf4np3t 3 года назад
@@hirocode 丁寧に説明ありがとうございます!!
@user-ep7bq3zb6y
@user-ep7bq3zb6y 7 месяцев назад
8:18の所で、.headerクラスの背景に何故青色が付くのかが分かりません。 また、.headerクラスの上下左右と.sidebarクラス、.mainクラスの上右左に白く余白が出てしまうのは何故なのでしょうか? ヒロコードさんのコードと同じように入力はしてるのですが、うまくいきません。。。 教えて頂けると嬉しいです。
@hirocode
@hirocode 7 месяцев назад
コメントありがとうございます☺️♪ 8:18の部分で背景が青いのは、5:55での変更を保存してないためです(すみません意図はなくミスです😅)! 動画内で説明できてなくて申し訳ないんですが、余白が出るのはおそらくリセットcssを読み込んでいないためです! * { margin: 0; box-sizing: border-box; } 簡単なリセットとして、CSSの始まりにこれ記載するだけで余白はなくなると思うので試してみてください😆❗️
@user-cb3hl8he5s
@user-cb3hl8he5s 2 года назад
初めまして!サムネイル画像比率保持の部分で、疑似要素を追加して比率保持しようとすると赤いサムネイル画像が表示されなくなってしまいます。contentも入れてます。コード見ないと何とも言えないかもしれませんが、どの辺を確認してみたらいいでしょうか😢💦
@hirocode
@hirocode 2 года назад
もしかしたら、display: block;が抜けているなどがあるかもしれません。 ↓に同じコード書いてみたので、こちらと比較してみてください😆❗️ www.craft.do/s/sOFmX68xWHUgz0
@user-cb3hl8he5s
@user-cb3hl8he5s 2 года назад
​@@hirocode ありがとうございます!試しにコピペしてみたら比率保持出来ました! 色々確認して見たらCSSで「.list_video .thumb:before {」の部分の「.thumb」と「:before」の間にスペースが入ってました😓 一人では気が付けなかったので助かりました。返信、比較のコードありがとうございます!引き続きがんばります☺
@hirocode
@hirocode 2 года назад
解決したようでよかったです☺️♪そういうところなかなか気づけないですよね💦 引き続き頑張ってください😆❗️
@user-nw9lb4tb9f
@user-nw9lb4tb9f Год назад
初めまして。手順どおり模写していたのですが、34:57あたりの .list_video liタグに padding:10pxをつけると崩れてしまいます、、。 アドバイス頂けたら助かります😫
@hirocode
@hirocode Год назад
説明漏れていてすみません! * {box-sizing: border-box;}という指定をリセットcssに記述しています❕お試しください🙇‍♂️
@user-nw9lb4tb9f
@user-nw9lb4tb9f Год назад
返信ありがとうございます!!出来ました!😊
@user-vn9tw9oc4j
@user-vn9tw9oc4j 3 года назад
画面のサイズを図る時何を使ってますか?ショートカットキー、、、?Macですよね
@hirocode
@hirocode 3 года назад
command + shift + 4 で部分スクショのカーソルになるので、それで選択箇所のサイズ確認した後escキーでキャンセルしてます😆笑
@user-vn9tw9oc4j
@user-vn9tw9oc4j 3 года назад
​@@hirocode  キャンセルしてるんですね!初歩的なことも丁寧に返信していただきありがとうございます…!
@jptk6645
@jptk6645 2 года назад
width:240px; でなくて flex:0 0 240px;といれたのはなぜでしょうか? 試しに width:240px 入れたら狭くなってしまいました。 flex:0 0 40px; のアイキャッチは width:40px;でも変わりませんでした。
@hirocode
@hirocode 2 года назад
display: flex;直下の要素は、flexアイテムになります。 また、flex-shrinkのデフォルト値は1で、縮小を許容する指定になっています。 なので、親要素のサイズ次第で、flexアイテムは縮小します。 それを回避するため、flex-shrink: 0;(縮小させない)を指定する必要があるので、flexプロパティで指定しているって形です❗️ アイキャッチに関しては、他要素がそれに影響しないサイズなので、サイズ保っているだけかと思われます❗️
@jptk6645
@jptk6645 2 года назад
@@hirocode わかりやすい説明ありがとうございます! flex: 0(伸ばさない)0縮小させない 240px ということだったんですね。 flex の中にある幅はなるべくflex の値を用いた方が良さそうですね。 youtubeの模写は2回やってなんとなく掴めた気がします。(気がしただけかもですが。) 動画もそうですが、コメント欄の回答もとても勉強になります^^
@kurobosi1
@kurobosi1 Год назад
エディタは何を使ってるのでしょうか。VSCode? 上下ウィンドウ使いやすそう
@hirocode
@hirocode Год назад
最近はメインでVSCode使ってますが、この動画のエディタはCoda2というエディタです😊♪ VSCodeだと、開いているファイルのタブ部分を右クリック→下に分割で上下ウィンドウ分けることできます😆❕
@kurobosi1
@kurobosi1 Год назад
@@hirocode 返信ありがとうございます! そうなんですね‼︎ VS codeでも再現できるのであれば今度、上下ウェインドウでやってみます✨
@jptk6645
@jptk6645 2 года назад
li の中にarticle や div をいれても大丈夫なのでしょうか?
@hirocode
@hirocode 2 года назад
コメントありがとうございます😊♪ liの中にはどんなタグ入れても大丈夫です! ただ、ulの直下にli以外を入れるのはNGってなってます💡
@jptk6645
@jptk6645 2 года назад
@@hirocode 直下ならOKなんですね! ありがとうございます。
@jptk6645
@jptk6645 2 года назад
ナビゲーションリストを一度marign-left:auto で左寄せにして、 input タグを中央寄せにして margin-left:auto を消しても左にナビゲーションリストがもどらないのは何故でしょうか?
@hirocode
@hirocode 2 года назад
コメントいただきありがとうございます😊♪ 28:00 この辺りのことだと思いますが、marginにautoを指定するイメージとして、空間に余裕があればできる限りその空間を開けるってイメージです😅(言葉で伝わりづらいと思いますが...) ↓■が親の横幅だとすると、何も指定しない場合、要素は左から順に配置されます。 ■[logo][input][nav]    ■ ここで、[nav]にmargin-left: auto;を指定すると、 ■[logo][input]←←←←[nav]■ こんな感じで、親の横幅に余裕があった分、[input]と[nav]の間に空間ができます。 ■[logo]←←[input]→→[nav]■ なので、inputの左右にmargin autoを指定していると上記のようなレイアウトになるって感じです❗️
@jptk6645
@jptk6645 2 года назад
@@hirocode めちゃくちゃわかりやすい説明ありがとうございます!
@user-jb5ql8sn7p
@user-jb5ql8sn7p 2 года назад
大変参考になりました! ただ、少し早く感じたのと、もう少しhtmlとcssの表示時間を長くしていただけると助かります。 止めながら、一緒に記載しながらの視聴でしたが、ぱっぱと行ってしまって置いていかれてる感がすこしありました。 今後も勉強させていただきます。
@hirocode
@hirocode 2 года назад
嬉しいコメントありがとうございます😊♪ スピードに関してそういったご意見いただけて大変参考になります🙇‍♂️❗️その点今後改善できたらと思います😆❗️ありがとうございます❗️
@user-qs5lr3rg7s
@user-qs5lr3rg7s 2 года назад
5:16で、座標を表示されていましたが、これはどのようにして座標を表示させているのでしょうか?
@hirocode
@hirocode 2 года назад
コメントいただきありがとうございます😊♪ Macのスクショ機能で、ピクセルサイズを測ることができるのでそれを使用しています😅 「Command + Shift + 4」を押すとカーソルが表示されるので、ドラッグするとサイズが確認できます。そのままカーソルを離してしまうと、毎回スクリーンショットを撮ってしまうので、ESCキーでキャンセルしています😆❗️
@user-qs5lr3rg7s
@user-qs5lr3rg7s 2 года назад
​@@hirocode ご返信ありがとうございます。なるほど!windowsユーザーは、スクショはできますが、座標は出てこないみたいですね(笑) デベロッパーツールで工夫して調べます。
@dmcreatorjapan
@dmcreatorjapan Год назад
ネガティブマージンはよっぽどのことがない限りかけないほうがいい。 ネガティブマージンをかけないCSS設計を検討したほうがあとあとハマらなくて済む。
@hirocode
@hirocode Год назад
おっしゃる通りです❕ 今だとflexboxやgrid layoutではgapプロパティが使えるようになったので、そっちの指定が推奨です🙇‍♂️❗️
@yubiyubi2555
@yubiyubi2555 2 года назад
ショートカットキーなどによるわからない場所を0.25倍速にしたりするんですけどBGMがホラーじみていて少し怖いです笑
@hirocode
@hirocode 2 года назад
やってみたらほんとにホラー感出ててウケました笑😂
@user-ld2hs8qb8x
@user-ld2hs8qb8x 2 года назад
35:58の.li_video > li にpaddingを入れたら横に4つ入らなくなって3つ目で折り返してしまいます。頑張りましたが、解決しません。どうすればいいのでしょうか。
@hirocode
@hirocode 2 года назад
コメントいただきありがとうございます😊♪ もしかしたら、box-sizingが影響しているかもしれません。 次の1行をcss内に書いたら変わりませんでしょうか❓ *{box-sizing: border-box;} お試しください🙇‍♂️❗️
@user-ld2hs8qb8x
@user-ld2hs8qb8x 2 года назад
@@hirocode 返信ありがとうございます!変わりました! ヒロさんの動画で引き続き勉強させていただきます🙇‍
@hirocode
@hirocode 2 года назад
良かったです😆❗️ ちなみに上記の記述は、 僕の環境だと「cssreset-min.css」 の中に記載してるので相違が出てしまったようです💦 ちゃんと説明していなくてすみません🙇‍♂️ 今後ともよろしくお願いします😊♪
@user-ld2hs8qb8x
@user-ld2hs8qb8x 2 года назад
@@hirocode よく見ればコメント欄に同じ質問をされてた方がいました。余計な時間をとらせてしまい申し訳ございません🙇‍ 応援してます❗
@hirocode
@hirocode 2 года назад
全然大丈夫です😆‼️ありがとうございます❗️
@jptk6645
@jptk6645 2 года назад
main と アイキャッチのtextにmin-width:10px; があったのに、特に説明が無かったので気になりました。
@hirocode
@hirocode 2 года назад
すみません、これ完全に説明なかったんですが、 flexアイテムは、min-width: auto;が初期値になるので、コンテンツが外にはみ出してしまうケースが出てきます。それを回避するためにmin-widthをセットしています。min-width: 0;でも問題ないです❗️
@jptk6645
@jptk6645 2 года назад
@@hirocode そうだったんですね。謎でした。
@user-zc6ts2ct4e
@user-zc6ts2ct4e 3 года назад
自分用11:45
@user-zc6ts2ct4e
@user-zc6ts2ct4e 3 года назад
大変勉強になりました、ありがとうございます!
@hirocode
@hirocode 3 года назад
こちらこそご視聴ありがとうございます🙇‍♂️❗️❗️
@theworldofsnails9126
@theworldofsnails9126 2 года назад
widthをワイドとは読まないので読み方調べた方がいいと思います笑 内容はすごい参考になるのですがそこが気になりすぎて話が入ってきません笑
@hirocode
@hirocode 2 года назад
コメントいただきありがとうございます😊♪ 僕としては横幅に100%を指定、みたいな感じで言ってるつもりなんですが、プロパティと値の説明するときにワイドって表現すると確かにわかりづらいですね💦すみません🙇‍♂️ 流石にwidthをワイドと読むとは思ってないので大丈夫です!笑 ちなみに、他の動画で言ってると思いますが僕はウィドゥス派ではなくウィッズ派です😆❗️
@theworldofsnails9126
@theworldofsnails9126 2 года назад
なるほどです! そもそもこの単語発音が難しすぎるんですよね笑
@user-dm3eo7oi5m
@user-dm3eo7oi5m 4 месяца назад
勉強になりました…。ところで15:00あたりでpxを測っていますがその拡張機能教えていただけませんでしょうか?
@hirocode
@hirocode 4 месяца назад
コメントありがとうございます🙇 macだとcmd+shift+4で範囲指定の画面キャプチャができるので、そこで出てくる数値使って測っています😂
@user-dm3eo7oi5m
@user-dm3eo7oi5m 4 месяца назад
​@@hirocodeありがとうございますm(_ _)m
Далее
Stray Kids "Chk Chk Boom" M/V
03:26
Просмотров 33 млн
Coding Airbnb websites with HTML CSS
43:41
Просмотров 37 тыс.
HTMLをブラウザで表示する方法
9:37
Просмотров 21 тыс.