【HTML/CSS】実践！Webサイト作成から公開までの過程を解説！

👩‍💻セイトが運営するプログラミングスクール・研修事業「SiiD」
bug-fix.org/siid
👨‍💻セイトによるエンジニア専用・転職キャリア相談「EEE転職」
• 若手エンジニア皆さんの転職やキャリア相談にのります
✅LINEで配信・イベント情報・無料キャリア相談やってます
lin.ee/eR6BXOD
📙プログラミング入門書出版しました by 日経BP
amzn.asia/d/7Z3T5mH
◎お仕事のお問い合わせはこちらからお願いします
bug-fix.org
------------------------------------------------------------------
プログラミングを学習したい初心者の方、エンジニア転職を目指している方、Web制作したい方にぜひ抑えておきたい内容を詰め込みました。
ここで紹介しているHTML,CSS,JavaScriptの知識は、フロントエンドエンジニアなら必須！Webデザイナーやバックエンドエンジニアも知っておいてほしい実践的内容です。
------------------------------------------------------------------
今回紹介したコード
github.com/seito-developer/ht...
Google Font
fonts.google.com/
font-familyのおすすめ設定
willcloud.jp/knowhow/font-fam...
ダミー画像生成
dummyimage.com/
display:flexの使い方一覧
www.webcreatorbox.com/tech/cs...
フリーのアイコン画像
www.flaticon.com/
フリーのロゴ画像
worldvectorlogo.com/ja/downlo...
フリーの動画
www.pexels.com/videos/
particles.js
github.com/VincentGarreau/par...
Faviconジェネレーター
realfavicongenerator.net/
めちゃ簡単ホスティングサービス
www.netlify.com/
🔽目次
00:00 はじめに
03:20 事前の準備
12:36 Aboutのコーディング
34:16 Blogのコーディング
52:43 Contactのコーディング
01:14:31 Worksのコーディング
01:17:28 Footerのコーディング
01:38:02 Heroのコーディング & ホスティング
01:57:09 Headerのコーディング
02:04:57 レスポンシブデザイン
02:17:54 その他補足
02:24:36 さいごに
🔽Special Thanks
動画編集：ぽぴぃ氏 Twitter ▷@poppy0p0
画像素材：いらすとや さん
#プログラミングスクール・転職キャリア相談・公式LINEやってます

[@webit7652]

↓こちらもよければチェックしてみてください〜 👩‍💻ゼミ形式で学ぶプログラミング研修「SiiD」 kzbin.info/www/bejne/jYq4Y3qfqZ2XiMk 👨‍💻エンジニアによるキャリア相談「EEE転職」 kzbin.info/www/bejne/g3-3q4F8fMygj6s

[@shokoGaia]

全部やってみました！めちゃめちゃわかりやすかったです。有難うございます！

[@youma1]

全ての初心者に見てもらうべき動画

[@lei_branding]

公開ありがとうございます！とても勉強になりました。すごく分かりやすかったです！

[@webit7652]

あざます！

[@yoojiyang444]

非常にわかりやすい動画をありがとうございます！各タグが実際にどんな使われ方をするかがよく分かりました！

[@masa-qg3xp]

これは嬉しい😃 ありがとうございます! 一連の流れを見れるのは勉強になります

[@webit7652]

見てやってください！

[@splritz7544]

貴重な動画を出してくださり有難うございます！ 是非とも参考にさせて頂きます。

[@webit7652]

ぜひに！

[@suzumesakurajosui]

待ってました！！

[@webit7652]

＼(^o^)／

[@aki4281]

久しぶりに戻ってきました！いつもありがとうございます！！！❤ フロントエンドだけじゃなく、コンタクトからメールが飛んでくるバックエンドやAWSとかに実装して公開する方法もやって頂けると嬉しいです！！❤

[@user-bn6xw8ok6q]

書籍とネットの情報のみで独学しているのでゼロからの一連の流れを通して見れるのはとても貴重で本当に有料級の動画です ありがとうございます

[@webit7652]

あざます！！

[@masusan_ray]

こちら全て解説を見て模写するのに、10時間くらいかかってしまいました笑 今まで勉強した基礎が身になった気がします！ありがとうございます！

[@webit7652]

おお…お疲れ様です！！

[@user-bp8do1uv6t]

この方の説明やら動画編集やらが分かりやすいので、もっともっと伸びてほしい！しかも無料でここまで丁寧に教えてくれるなんてありがたい……いつも参考にしてます！

[@webit7652]

あざます！伸びてほしーｗ

[@kaiserart8483]

詳しいです‼️ 何日かに分けてじっくり観たいと思います😍👍

[@webit7652]

ぜひ！

[@tatsuyaaono8723]

いつもありがとうございます。 不動産管理でとても役になっております。 今後も、楽しみにしております。

[@webit7652]

ありがとうございます！

[@atsukita2760]

セイト先生学習でもお世話になります...！そしてありがとうございます！実務目指して頑張るぞ～

[@user-jc7ch4wm4j]

非常にありがたいです

[@KentaroxKondo]

全て観ました！ ものすごくわかりやすくて、全体像を掴むことができました！ 尚且つ、細部の気になるポイントも無視せずに解説くださったので、お腹いっぱいです！ 自由にコーディングできるセイト先生を見て、とても楽しそうだな〜と思いました。羨ましいです！ 重複する内容でも、復習にとても役立つので、ぜひまたこんな動画を投稿いただけると嬉しいです。このHTMLをベースにしたJavaScript編とかもあったら絶対に観ます😂 ところで、この動画のような作業が出来るようになると、働き口は比較的簡単に見つかるくらい、世の中に通用するのでしょうか？ あほな質問ですみません！🙏

[@kantakomura9768]

とても参考になる動画ありがとうございます！

[@webit7652]

恐縮です！

[@user-qz6lj4qz6e]

1週間かけて１５分ぐらい細切れで模写しました。JSはちょっと難しさを感じて飛ばしました。解説に、「あれ？とか、上手く行かない、行かない？調べましょう」とかエンジニアさんのリアリティみたいな心の声？が聞けたのが良かったです。「あー、セイトさんみたいな方でも、一発で行かず、試行錯誤しながらやってるんだ。じゃあ自分なんか出来なくあたりまえだ。あきらめずに頑張ろうと思いました。」 今後も楽しみにしています。 またclass属性をほぼすべてのタグにつけているのは斬新でした！ ネーミングつけるの大変だけど、ＣＳＳの構造は分かりやすくして、編集作業をしやすくするためかな？と思いましたが、いかがでしょうか。

[@user-ms8sz3kq7i]

VS CodeのショートカットやHTMLタグ、CSSプロパティの使い方など、実際のコーディングの様子を動画で見ることができ、大変勉強になりました。 動画の内容を参考に、コーディング速度を上げられるよう頑張ります。

[@makiko7197]

動画ありがとうございます。再生速度を下げて２日間かけて模写できました！ダメなところもあったのですが、すごく勉強になりました。

[@webit7652]

2日出来たら十分かと！おつかれさまです！

[@user-iq8lx3un7u]

丁度今HTMLとCSSの基礎学び終わったんで、早速実践したいと思います！

[@webit7652]

ぜひ！

[@3nr088]

これ無料はヤバすぎます！ありがとうございます

[@webit7652]

いえーい！

[@coco.11111]

自分用 35:35 card 36:15 span 38:46 article 42:50自由に動かせる45:05逆dt dd 46:40角丸49:00ディスプレイインラインブロック53:30form1:03:01テキストエリア1:04:06ボタン1:10:51margin auto1:15:15あさいど1:20:39あどれすたぐ1:21:11brたぐ1:21:44ターゲット属性1:22:12hr1:22:45smallたぐ1:26:26サニタイズcss読み込ませとけ1:28:29画像の拡張子1:39:43strong1:41:19動画再生1:42:38Windowsサイト1:46:26Zindex

[@user-ek8sc4ro1s]

とても、有益すぎます！😊 いつもありがとうございます‼️ scssでレスポンスシブコーディングする時に、デバイス毎に細かくいくつもブレイクポイントを設定した時のコーディングなども あげていただけると嬉しいです😊

[@webit7652]

1箇所で十分です。そんなにいくつも指定しないといけないレスポンシブはデザインの設計に改善点アリかもです

[@user-ek8sc4ro1s]

@@webit7652 なるほどです。 ありがとうございます🙇‍♂️

[@sasa-ip2wb]

ありがとうございました。とても勉強になりました！ 実務で触ってても自分の癖みたいなのが抜けないので、きちんとトータルで見れると助かります。 brの/がいるいらない問題とかも気になってましたがなるほど～！！ タイトルはsectionの外なのか中なのかがいまいち理解できてなかったのもスッキリ。 overflow:hiddenもあんまり意味わかってなかった。ブラウザで崩れたら入れときゃ直るくらいに思ってました。 ところで、エラーが出てもすぐ対応できるのはなぜでですか？ 英語が読めない私からするとjs動かないエラーが続いてギブしたこともあります。 どこを見てどのエラーだとわかってるんでしょうか？ 気になりました。

[@user-fw4rf9ud8s]

2:23:13のあたりのキャッシュについて。 ご存知かと思いますが動画で説明されていませんでしたので。 Macなら「command」+「shift」+「R」 Windowsなら「ctrl」+「F5」でキャッシュクリアしてリロードできますよ〜。 スーパーリロードとか言う名前だった気がします。

[@dummy_do]

【初心者必見】4:45 フォルダをコンパクト表示にせずに階層で表示する方法 1. VSCodeの設定を開く 2. 左側のメニュー欄から機能→エクスプローラーの「Compact Folders」のチェックを外す 初期設定は使いづらい！って方はシンプルな表示から慣れていくといいですね！

[@coco.11111]

ありがと

[@user-xz7eg8jl8m]

55:00 テーブルの話 1:45:00　ヒーロの画像の大きさ調節 1:27:28 box-sizing : border-box の話

[@marudddddd]

後の方から見ました！ 一部知らなかったこと知れて凄かったです😂

[@webit7652]

＼(^o^)／

[@tomohiromatsuyama8900]

JS中級者までの動画も作って欲しいです！

[@cc012050]

動画勉強に利用させていただいています。繰り返し3回目の視聴です。だいぶん理解できて自分でも書けるようになってきました。プログラムは業務用のvisual basic しかしたことがなかったのですが、最近html,css,javascriptの勉強をやっています。

[@webit7652]

ありがとうございます！3回と言わず100回でも1000回でも！

[@sumikado1971]

初めまして。 いつも動画を見させていただいています。 動画の中で、 ・HEADタグを先に読んでBODYタグを読む ・HEADタグを読むまでブラウザでは真っ白な状態 ・真っ白な状態を短くするため、SCRIPTタグはBODYタグの最後の方に記載 と説明されていたのですが、確か ・HTML全体を読み込む ・HTML全体を読み込んでからDOM解析（実際には、ブラウザのエンジンの仕組みによる） ・HTMLのDOM解析中に別のリソース取得が必要になったら、非同期にリソースを読み込み だったと思います。 HEADタグが膨大だったり、SCRIPTタグのインラインコード処理の実行が長い場合（srcで外部リソースを読み込まず、スクリプトコードがSCRIPTタグ内に記載されている場合）やBODYタグが描画できない状態だと、真っ白な状態が長くなることはありますが、外部リソースを読み込むSCRIPTタグを書いただけでは、ほとんど影響はないはずです。 大昔にIE5とかで検証しただけですので、最近のブラウザは違うという事であれば申し訳ないです。

[@mellowjean1360]

3回見て脳に叩き込みます

[@webit7652]

ぜひ！w

[@SahaLife]

プログラミング知識なしの状態から【HTML/CSS】の初級から実践まで拝見させていただきました。 （※理解を深めるため2週目の視聴をしています。） 結論、セイトさんの動画が一番わかりやすいしコーディングがきれいだと思いました。 他の方の動画も勉強のためにと多数見てみましたが、説明の順序やコードのルール的なところが粗くて見にくいもの多かったです。 ですが、この実践編も含めてセイトさんの動画は、各セクションごとに理解を深めていけば確実に身につく流れで学べる内容だと思います。 【要望】 無料のコンテンツなので無理を承知での要望となりますが、この実践編と同じような解説方式で 各業界(アパレル、ホテル、建設、価格比較サイト等)から受注しそうな「仮想案件」のサイト作成を取り扱っていただきたいです。 恐らく各業界で適切なデザインや有効なJSの例などもあると思いますし、より上級者向けの動画コンテンツとして取り上げていただけたら大変嬉しいです。

[@user-xz7do1pe6u]

コピーライトのマークは、半角で「©」と入力すれば出ます！

[@user-sf6tw4mi4p]

最近セイト先生のKZbinをみてプログラミングの勉強をしています。とても分かりやすく楽しく勉強とても感謝しています🙇‍♂️ このサイトを作っていて初めの段階でcssが反映されないのですがどーすればいいですね？？ ちなみに言語のエラーのサイトで調べたら言語は間違えてないんですけどこれはどーゆうエラーか分かったら教えて欲しいです💦 これからも動画投稿よろしくお願いします！ これみて沢山勉強させていただきます！！

[@webit7652]

あざます！ エラーの解決方法、という動画を上げているのでぜひ見てみて！

[@yuta8918]

40:36秒の{ }を同時に複数範囲に入力するのはどのようにするのでしょうか。

[@user-iy1sq6mj9z]

27:43 なのですが display flexにしても一向にプレビューが縦のままになってしまいます😢

[@switchtoanotherone]

現段階で覚える量だったり、記述の量が物凄くて出来る気がしないのですが、最初は苦手だったり嫌いでも続けていけば変わるものでしょうか？ そのような経験ある方お話を聞かせていただきたいです、、

[@aaa-wf7iy]

コメント失礼します。動画を貼った際にこのファイルはバイナリか、サポートされていないテキストエンコードを使用しているため、エディタに表示されませんと出てしまうのですが、解決策はありますか。

[@user-ns9qy1fd1b]

コメント失礼します。 48:56 この時に、hover { transform scale (1.5) }は使えますか？使えるのようでしたら、コードの記入位置まで教えていただけたら有り難いです。アレンジでホバー時に強調されるようにしたいのですが😅

[@favtifymusics]

完全に有料級なんだよなぁ、、、鳥貴族か！！

[@webit7652]

あざます🥺 鳥貴族！

[@user-mh2mv9oh9z]

４つの画像を横並びにする際、１つの画像だけ下の段に表示されるのですが、なぜでしょうか？

[@dream_fun]

芸人系ITエンジニア転職KZbinrで有名なセイト先生のお話を聞けて大変参考になりました！ ありがとうございました。

[@webit7652]

芸人系ｗｗｗ

[@Johnsonandandy]

為になる動画ありがとうございます！htm/cssの勉強を始めて2ヶ月になります。 質問が2つあります。 まずCSSのリセットについてですが、sanitize.cssを使った理由やメリットはなんでしょうか？ 動画を見ているとdestyleやressの方がコーディングが楽であるように思えました。どれを使うのが効率がいいのか、最近の悩みです。 2つ目はヘッダーについてです。なぜヘッダーを最後に作ったのでしょうか？私は特に何も考えず最初に作っています。 2つとも特に理由はないかもしれませんが、もし理由がありましたら教えていただけると幸いです。

[@webit7652]

好きなやり方でどうぞ！ フルスクラッチでWebページ作るなら僕はそれが1番慣れてるし別にマイナーで間違った方法とかでもないからそうした、というだけです

[@Johnsonandandy]

@@webit7652 初心者の些細な悩みに答えて頂きありがとうございます！ もっと書きまくって自分の形をみつけます！

[@user-qk9it8gl6h]

コメント失礼します。 いつも楽しく勉強させて頂いております(^^) 数年前、念願のWEB制作会社に就職できたのですが家の事情により数ヶ月で退職を余儀なくなり、年齢的な事もあってWEB業界は今後関われないかと諦めていました。そんな中、度重なる家庭問題で精神疾患が慢性化してしまい障がい者手帳を取得しました。 現在、行政の方々の支援を受けながらデザインに特化した就労継続支援の事業所でWebデザインやAdobeのアプリを用いてデザインや制作を学んでいます。今後は障害者枠になりますが一般就労を目指しています。 諦めていた事がもう1度チャレンジ出来るなんてプログラミングは難しいですが楽しいです。 今後とも動画を拝見しながら学んでいこうと思います。いつもありがとうございます(^^)

[@webit7652]

励みになります！ありがとうございます

[@reijiw8458]

svg透過のところでfill消してもなぜかダメでしたが、opacity="0"にしたらできました！

[@user-qz7yo2en2k]

あんた神ぃ？

[@user-zx1bf5wv9g]

いつも勉強させて頂いております！ heroエリアのvideoですが画面サイズ100％では上下左右キレイに表示されているのですが、画面サイズを拡小すると右側と下側に余白ができます。 これはvideoのサイズが合って無いからでしょうか？ もしvideoサイズも画面の拡大、縮小に自動調節してくれる方法があるなら教えて頂きたいです。 お忙しいとは思いますが宜しくお願い致します。

[@webit7652]

> 画面サイズを拡小 この操作するユーザーさんかなりレアなので対応しなくていいと思いますよ〜 もしやるならレアケース対応なので超長くなると思います😅

[@user-zx1bf5wv9g]

@@webit7652 お忙しい中お返事ありがとうございます。 承知いたしました。 引き続き勉強させていただきます。

[@user-ir4rj8ve2g]

とても分かりやすかったです。2:18:27のスクショの拡張機能の名前教えてください！

[@webit7652]

Macの標準機能です！cmd+shift+4

[@user-ir4rj8ve2g]

@@webit7652 ありがとうございます！

[@nichi9805]

初めまして！まだ勉強中でわからないことがあるのですが、 .footer-copy{ display: block; text-align: center; と書かれていたところを、自分は .footer-copy{ display: flex; justify-content: center; と書きました。これは間違いなのでしょうか？ 初心者でまだそれぞれの役割がきちんと理解できておらず。。トンチンカンな質問でしたらすみません… この動画を100回見直して、力を身につけたいと思います！

[@webit7652]

それで動作するならいいけど文字を中央寄せにしたいだけならあえてflex使わんでも、オーソドックスな text 文字の align 並びを center 真ん中にする というプロパティ使えばよくね、とは思います。 cssに間違った書き方というのはないです。 実現できればなんでもいいです。 ただ、上記のようなこういう実装はこういうやり方することが多いよね、というパターンはあります。 とくに理由がなければオーソドックスなやり方使っとくのが無難ですん。

[@nichi9805]

@@webit7652 ご返答ありがとうございます！まだどれがオーソドックスかとかもきちんと理解できてない状態なので、数をこなして知識を積んでいきたいと思います。勉強になりました！

[@user-fn8lt6sg9w]

動画の序盤なんですがstyle.cssに同じようにコードを打ったんですが、文字の色が変わらない原因がわかりません。

[@webit7652]

使ってるエディタの設定かも 動いているなら色はなんでもok 動いてないなら単純にタイピングミスってますな

[@norih7650]

実際の案件ではBEM記法とかってあまり使われないのでしょうか？ BEM記法にするかpx？rem？にするか迷子になってます😭

[@webit7652]

使うこともありますよｂ

[@so4751]

1:17:12の.works > imgですが、img全てに効かしたいから.works imgではダメですか？無知ですみません！

[@webit7652]

その指定の違いはcss編の動画で解説してます！

[@so4751]

@@webit7652 承知しました！確認します！

[@reiko4314]

セイト先生の動画はいつ観てもわかりやすくとても勉強になります。今回の動画は初学の私には少し難しかったのですが、時間をかけながらじっくり取り組んでいます。が...最後にきてファビコンがどうしても反映されずお手上げ状態です。何度やり直しても解決せず、どこが原因なのかわかりません。ここまで来て諦めたくありません(涙) どうすればいいのでしょうか？

[@webit7652]

ヒント：たぶんパスが間違ってる

[@reiko4314]

コメントありがとうございます。コピペしたlink に(href=“./assets/images/favicon/~~~~)を書き足して再確認してみましたが、相変わらず反映されません(涙) 概要欄にあるコードと見比べても違いは見つかりませんでした... どこが原因なのでしょうか？ちなみにパソコンはWindows11を使っています。他の画像等は問題なくできているんですが... 全くわかりません。。どうしても最後までやりきりたいので悶々としています。他に何かあるでしょうか？ 原因解明には至りませんが、チャンネル登録と高評価ボタンをポチッとさせて頂きますね(^^)

[@user-oy2wj4kh5r]

@@reiko4314 zipファイルのまま保存しちゃってるとかですかね。新規作成でフォルダ作って、zipファイルの中身を移せば表示されるはずです！

[@reiko4314]

@@user-oy2wj4kh5r 　コメントありがとうございます。早速やってみます。

[@user-cd9uw2cu4y]

overflow: hidden;をheroエリアに入れ込むと aboutのエリアの半分くらいのサイズにwidthも切り取られてしまうのですが、対処はあるのでしょうか？

[@webit7652]

すんません、その説明だとよくわからないです🥲 別の表現をしてもらえればと🙏

[@user-cd9uw2cu4y]

@@webit7652 すみません、解決できました！！打ち込みミスでした、、、

[@AH-fy5tf]

こちらの動画を見てwebサイトを作ろうとチャレンジしようとしていたのですが、WordPressの方が簡単だと聞きました。WordPressとvs codeで作られたサイトに違いはありますか？

[@webit7652]

その二つは全く別物です🥺

[@AH-fy5tf]

全くの別物…😱無知すぎる自分を反省し、セイトさんのKZbinや書籍などで勉強してVS Codeでサイト作りました！動画、とても参考になりました！ありがとうございます！ サイトを作れて嬉しかったし楽しかったので、もっと勉強したいなあと思い、セイトさんのKZbinを最初から全て見ているのですが…「ハードルが上がるからhtmlとcssは最初に学ばない方がいい。そもそも言語ではない」に、2度目の衝撃と無知を反省してます😅作ったサイトにお問い合わせフォームを作れていないので、JavaScriptの勉強を始めようと思います！エールください！

[@renmeri]

40:23の行を跨がない左側全選択のコマンドを教えて欲しいです。 ここら辺で使用しているショートカットコマンドを全て教えて欲しいです。お願いします。ctrl dまではわかります。是非このテクニックを習得したいです。OSはwindowsです

[@renmeri]

待ってます！

[@user-cx5mm7ie8f]

横から失礼します。私も同じところのやり方が分からず調べていました。多分この方法でできるかと思います。1.　class="をctrl＋Dですべて選択。　2.　→　右矢印を押す　3.shft+home これで、いけると思います。ちなみに右側すべて選択は、shift+end 。

[@user-ir6zp1fu3k]

@@user-cx5mm7ie8f この方法探してました！ありがとうございますー🤩

[@makiko7197]

いつも勉強させていただいています。 自分のポートフォリオに載せても大丈夫ですか？

[@webit7652]

だめw

[@makiko7197]

@@webit7652 そうなんですね🥺 わかりました！ ご返信ありがとうございます！

[@lavender-jv7vw]

セイト先生のHTMLとCSSの基礎の動画とても分かり易くためになりました。 ありがとうございます。 質問なのですが、この動画の17:24頃のctrl+Dで class=" は全て指定出来たのですが、その後カーソルを移動しても、全ての class=" のカーソルが動きません。指定した部分が元に戻ってしまいます。何かのキーを押しながらマウスを動かすのでしょうか？ ですから、その後のctrl+shift同時押し+矢印キーも実行できません。 私はどこかで間違っているのでしょうか？ この動画を最後まで見て勉強したいと思っていますので、お返事いただけると大変嬉しいです。 よろしくお願いいたします。

[@webit7652]

やり方はあっています！何かのキーを押しながら、ということもありません。お使いのパソコン自体に原因があるかもしれません。他のパソコンで一度試してみてください

[@lavender-jv7vw]

丁寧にお返事ありがとうございます。 私が使っているパソコンはWindows11なのですが、他にはパソコンを持っていません。 だから、他に試す方法がありません。 ctrl+Dを使わずにひとつずつ入力してみようと思います。 また、わからない事があればコメントするかもしれませんが、悪しからずご了承ください。 今後もこの動画の続きや他の動画も拝見させていただきたいと思います。

[@user-yv5zt7mv1w]

1:35:38 BugFix Inc. BugFix Inc.にタグってつけますか？

[@webit7652]

CSSあてたいとか、特に理由なければなくていいです◎

[@user-nb2ix8mf5v]

sanitize.cssをvscode上で展開したら黄色の波線出ますが無視でいいんでしょうかね

[@webit7652]

波線にカーソル当てると意味が表示されるかと！

[@user-nb2ix8mf5v]

@@webit7652 かいけつしました！ありがとうございます！

[@daigolifehacs2593]

ご質問です。分かる方、ご回答お願いします。 JavaScriptが上手く読み込めません。 404エラーがでます。 この動画の通り、コードを入力しているはずなのですが、上手くいきません。 また、ずっといじっているとコードは変えていないのですが、Hello Worldの画像が右側のみ見切れてしまいました。 改善すべき部分が分からないため、ご質問しました。 よろしくお願いします。

[@user-go1pi9cw2o]

border-radius: 50%; overflow: hidden;にすると角は取れるのですが、丸の底の部分が少し切れてしまいます。調べても分かりませんでした。分かる方いらっしゃったら教えてください...

[@user-go1pi9cw2o]

自力でいろいろ試してみた結果、sanitize.cssが適用されていないのと古いバージョンのHTML使ってました！お騒がせしました！

[@nichi9805]

@@user-go1pi9cw2o 初めまして。私も同じような現象が起きています.avatarが右寄せのまま、かつ丸画像の右側は少し欠けています）古いバージョンのhtmlを使っていたとはどういうことでしょうか？詳しい解決法などあれば教えいていただきたいです; ;

[@user-go1pi9cw2o]

@@nichi9805 自分は雛形を生成するときに動画のようにHTML5と宣言せず、他のやり方で宣言したところアイコンが見切れてしまいました。 多分ですが他の教材で習ったことと合わせてしまいますと上手くいかない可能性があります。動画と全く一緒の工程しているのならば外部の物が読み込めてない可能性もあります。初学者のため、このくらいしかアドバイス出来ません！

[@nichi9805]

@@user-go1pi9cw2o ご丁寧にありがとうございます!最初の設定部分を見直してみたいと思います！

[@gontacode3020]

このレベルのサイトをポートフォリオで出せば未経験でもフロントエンドエンジニアなれますか

[@webit7652]

フロントエンドエンジニアにはなれないです。 小さいWeb制作会社にアルバイトのコーダーとして潜り込むならギリ合格ラインかもです

[@gontacode3020]

@@webit7652 フロントエンドエンジニアならやれて当たり前ですよね＾＾；

[@user-rf6lo1hy2z]

質問させてください。webサイト上の文字を日本語で表示したいのですが、VS Codeだと日本語で打ち込めないのですがどうすればいいでしょうか？

[@webit7652]

おや...単純に日本語/英語入力の切り替えをうっかりできてない的なミスじゃないですか？ VSCodeに限った話ではないですが、アプリケーション内で日本語が入力できないという現象は聞いたことがないです。

[@user-rf6lo1hy2z]

PCの右下ではあとかひらがな表記になってるんですがcodeに打ち込むと変換もできずローマ字だけになってしまいます。 アプリのシステム的に可能なのであればPC本体の問題ですかね

[@KentaroxKondo]

やったーーーーー！！！

[@webit7652]

いえーい！

[@qipan3113]

いつも大変有益な動画をありがとうございます！一つ質問ですが、particle.jsのようなファイルは著作権が絡んでくるのでしょうか。自分のウェブサイトに使って公開するのってアリですか？コーディングもそうですが、ウェブサイトを作る上でのIP絡みのことなど、初心者にとっては難しい問題がたくさんあります😅

[@webit7652]

各種ライブラリの公式ページにライセンスの規定が書いてあるので都度チェックします！ ただソースコード内に著作権表記が含まれていれば自由に使っていいよ、という緩めのライブラリが大多数かなと思います。

[@qipan3113]

@@webit7652 了解です。ありがとうございました！都度こまめにチェックしていきます。いつも本当に分かりやすい動画で感謝です！

[@user-mg3qw7xe6t]

自分用 1:26:00

[@user-rf6lo1hy2z]

たびたびすみません。 現在Linuxアプリでは日本語入力に対応していませんとでてくるのですが解決策はありますでしょうか？

[@webit7652]

この動画とは関係ないところでエラーが出ています。 Linuxは初心者にはおすすめしません。WindowsかMacを使いましょ

[@webit7652]

この動画とは関係ないところでエラーが出ています。 またLinuxは初心者にはおすすめしません。WindowsかMacを使いましょ

[@user-br1lt9iw7w]

有料級動画をありがとうございます。3度みてます。 動画を止めながら、コードを模写し、行き詰まりました。 しかし、git でコードを公開までして下さってるではありませんか。 助かります！ どこから、、セイト先生のような他者貢献のマインドが出てくるのでしょう？ 子供男児3人育ててますが、将来子供達が、先生のような振る舞いができる ようになってほしいと思います。 今日、ほんの少しばかりのお礼として、メンバー登録しました。 動画作成いつもお疲れ様です。 この動画を作成するのに、エンジニア同士で、何十時間もかかってるのもしれませんね。　 お忙しいでしょうから、返信は不要です。ありがとうございました。

[@user-ny1bn4xb8f]

ネット楽しい♪

[@webit7652]

YES！

[@user-rq3sb2tm8k]

初コメントです。わかりやすい説明ありがとうございます。 質問なのですが、sanitize.cssの部分で、インストール後vs codeに反映させると、451〜453行目、459~461行目の所のheight及びwidthで-moz-fit-content、-webkit-fit-content、fit-contentの文字に黄色い波線が引かれていて、sanitize.cssのタイトルも黄色くなっています。ます。これは修正を促される時に出るものだと思うのですが、どうすれば治りますか？

[@webit7652]

ヒント: そのmoz-fitとかwebkitの意味をググってみたらいいかもよ

[@AsAS-nt5el]

公開を実装するのって、どの部分から始まりますか？

[@AsAS-nt5el]

だれか、公開部分がどこかわかる方いたら教えて欲しいです！

[@takahitoyamamoto2376]

VSCのにいれている拡張機能が知りたいです

[@webit7652]

シンタックスとスニペット系くらいで、あとそんなに入れてないかもです！

[@user-kp9ko7vj9d]

ソコン初心者です。htmlとsccの基礎動画を見てとても分かりやすかったのでこちらの動画も見ています。１８：００当たりでウィンドウズだとalt+矢印で一気に動かせると仰っていますが何も反応しないのですがaltキーであっていますか？ コーディングの部分とあまり関係がなくてすいません もし分ればでいいのでご回答お願いします。

[@user-cb6fy1lh6c]

1:06:58

[@migurohi]

神動画ありがとうございます(＞人＜;)まずは通して閲覧させてもらいましたが、知りたい事が完全に網羅されていて、更に、お役立ち情報満載で感謝しかありません！次は再生スピードを落としてノートを取りながらじっくり勉強させて頂きます٩( 'ω' )و

[@webit7652]

こちらこそあざます！！

[@user-gj4qg3sn9l]

vscodeの拡張機能であるLivePreviewで確認しながらコードを見よう見まねで打っていましたが、Blog作成のところで出てくる justify-content: start;がLivePreviewでは反映されるのに別ウィンドウではされておらず、色々試した結果justify-content: flex-end;に変更したら反映されました。コードのスペルミスも確認しましたが特に見当たらずで・・・なぜこんな挙動をするのでしょうか？ お答えいただけたら嬉しいです！

[@undergroundkeiba]

進めるの早すぎで0.5倍速でもついていけなかった笑

[@user-tt6iq4zn2e]

14:49

[@mashudggd]

1:38:10

[@hiroooo2177]

こらいいですね

[@webit7652]

あざます！

[@user-dz6tj3ul3k]

勉強用タグ 1:14:50

[@eeeg]

emailに引っ張られてfemailになったる！

[@sns.y9734]

まあ、勉強になるとは思いますが。 ただ、フレームワークがある今、素のHTMLとか書くか？、という疑問はありますね。 LaravelやReactjsなどでHelloWorldまで5分とかで、本1冊、数日から1週間程度やれば習得できるから、素直にフレームワーク使う方がよい気がします。

[@user-gz3ti2rr4g]

基礎も分からずにいきなりフレームワークをやるのはどうかとか思いますね

[@nfujimoto1454]

テロップでnavのはずが、justify-content:space-between 表示になっていました。一応報告しておきます

[@user-kr3jg7jz6n]

すみません、、ほんと恥ずかしいんですが、、text-alignとalign-itemsの違いがわかりません、、

[@webit7652]

文字の並びか、ブロックの並びか、の違いですん

[@XLEGT]

おわつた。長かったぁ

[@webit7652]

おつかれさまあああ！！

[@user-qc3vn5uf8s]

動画の方拝見させていただきました。過去動画で学んだことを応用していくにあたり、すごく役立ちました。 一つ質問させていただきたのですが、27:20 あたりでstyle.cssに.grid{....}というふうにか書いているのですが、index.html ではclas名がgridのものは定義されていません。これは文法的に間違っていいないのでしょうか？ ご返信していただけるとありがたいです。失礼します

[@otaai2]

脇から失礼します。 間に空白をいれると、複数のクラスを指定することができます。 具体的には、 index.html の40行目、 の部分で、"grid grid-col-4" とありますが、これで2つのクラス名（「grid」と「grid-col-4」）を適用させていることになります。

[@webit7652]

あざます！ ota aiさんの回答どおりです！