HTMLとCSSでホームページを作る方法を完全解説【Web制作初心者向け】

No video

HTMLとCSSでホームページを作る方法を完全解説【Web制作初心者向け】

Рет қаралды 161,269

Күн бұрын

*****　一部修正
reset.cssはstyle.cssより先に読みます。
動画の解説順的にあとでreset.cssを追記したのもあって
そのままstyle.cssの後ろに書いてそのままアップしてしまいました（...言い訳です）
申し訳ありませんm(_ _)m
ーーー
HTMLとCSSを使ってホームページを作る過程を公開しました。どのような手順でホームページ制作をするのかを初心者向けに解説しています。
これからHTMLやCSSを使ってWeb制作を始める方はぜひご覧ください♪
HTML/CSSの概念や基本的な使い方については下記の動画で解説をしています。
・初心者でもゼロから理解！HTML/CSS基礎講座〜ホームページ制作を始めよう
• 初心者でもゼロから理解！HTML/CSS基礎...
＝＝＝　動画学習サービス「unazuki」
Web制作を学べる動画学習サービスを運営しています。
unazuki.online/
・WordPressコンプリートコース
　unazuki.online...
・JavaScriptコース
　unazuki.online...
・HTML & CSSコース
　unazuki.online...
＝＝＝　SNS
■ Twitter： / life_toshindai
＝＝＝　経歴
Webデザイナー・エンジニア
〜 2013 自動車メーカー系の企画職
2014 〜フリーランスWebデザイナー
2016 〜法人化
--------------------　簡単な自己紹介
都内でWeb制作をやっています。
苦労した経験をもとに、
KZfaqでは過去の自分が欲しかった
知識・技術・マインドなどをスライドやデモ解説で発信しています💪
🏋️‍♂️活動
WordPressやWebデザイン講座など有益な情報を発信。
初心者向けの動画〜超実践向けの動画まで多数公開しています。
再生リストも作っているのでよろしければご覧ください。
✈️出身
福岡県
---------------------------
Webデザイナーとして活躍される方の
知的好奇心・技術的向上心に少しでもお役に立てたらいいなと思っています
(｀･ω･´)ゞ
詳しくはチャンネル概要欄もご覧ください。
#ホームページ
#作り方
#アキユキ

Пікірлер: 72

@shiranoyukisan1699 2 ай бұрын

未経験で今はスクールにも通えないので、とてもありがたいです。 1つの動画を見終わってやってみると自信につながります。

@web5096 2 ай бұрын

コメントありがとうございます！ぜひご活用ください！

@nfujimoto1454 2 жыл бұрын

有料級神動画ですね😳 今まで色んな方の動画見ましたが、ダントツ1番わかりやすいです🔥 お忙しいとは思いますが、JS(jQuery)編、PHP編も出していただけると非常にありがたいです。なにとぞ検討のほどよろしくお願いいたします🙇‍♂️

@yoshikihomma2896 8 ай бұрын

IT未経験で勉強始めたばかりです。プログラミング言語についての入門動画をいくつかみてきましたが、実際どう使うのかが想像しづらく、このような実践的な動画はとても嬉しい！！ゆっくりしてほしいとのコメントも見られますが、止めたりスローにすれば問題なく、最後までやり切ることができました！楽しかったので続けられそうです！ありがとうございました！

@web5096 8 ай бұрын

コメントありがとうございます！参考にしていただけたみたいで嬉しいです🙌 ぜひ楽しく続けてくださいね！

@2011yosshi 2 жыл бұрын

最近ProgateでHTML & CSS 初級編をやったばかりの者ですが、ホームページ制作のイメージがなんとなく湧いてきました。

@user-ie7ig8un7f Жыл бұрын

最近プログラミング始めようと思い立って初級編やったのですが今yosshiさんってプログラミング続けられてますか？

@hyuma3357 Жыл бұрын

HTMLとCSSがなかなか難しくてつまづいていましたが、この動画に巡り会えて良かったです！

@minimini-times Ай бұрын

綺麗に出来ました！ありがとうございます

@chatnoir167 6 ай бұрын

とても分かりやすかったです。実際に一緒に記入しながら作成が出来、ホントに理解できました。ありがとうございました！

@web5096 5 ай бұрын

コメントありがとうございます！手を動かしながらやっていただいたんですね！

@ryunosukematsuura7664 2 жыл бұрын

最近Webデザインにチャレンジしたく、いろいろと動画を見ていましたが、実際のコーディングに近い流れでご説明をされていてとても分かりやすかったです！

@yukari2365 2 жыл бұрын

初コメントです。すごくわかりやすいです！！動画をよく見返しています。ありがとうございます！！

@web5096 2 жыл бұрын

ありがとうございます！

@splritz7544 2 жыл бұрын

ハッキリと喋ってくれているので早口でも聞き取りやすいです。説明が理解しやすいので難なく作成する事が出来ました。ただ、今までの過程で置いてきた画像等のURLを張って下さると幸いです。

@OoruneoO64 Жыл бұрын

素敵な動画をありがとうございます！私好みのホームページを作ってみたいけど作り方微塵も分からん🥲って状態からこの動画を見ながら真似たら2日で、初めてサイトのコーディング？？を完成させられました！まだ用語覚えきれてなかったり、訳分かってないまま真似したところも多かったのでこれからも参考にさせていただきます！🙌 とても分かりやすかったです。！

@web5096 Жыл бұрын

それは僕も嬉しいです！コメントありがとうございます！

@user-oc2dh4gt1g 2 жыл бұрын

本当に神動画です。🙇‍♂️

@user-mp2ei5fo3k Жыл бұрын

ありがとうございます！リセットcssの使い方理解できました。構造もわかりました、

@maruimonozuki5906 2 жыл бұрын

めちゃくちゃわかりやすくてありがたいです…スクールの動画よりわかりやすいです…！

@web5096 2 жыл бұрын

ありがとうございます！

@pancake56 2 ай бұрын

これめっちゃ分かりやすい。

@امیرجاودانفرد Ай бұрын

‏‪0:00‬‏

@luceveritiero1980 Жыл бұрын

完成されてるHTML/cssを読むことは出来るようになったんですけど、無から書くのに苦闘してます CSSが特に上から順番に完成されてるのは、作成過程がわからないのでこの動画は順番に作ってることが分かって嬉しい😃ですこの動画何度も見て参考になりますでもまずブロック毎の写経が全くやり足りてないとは自覚してます

@sangoshou 2 жыл бұрын

とてもわかりやすい内容をありがとうございました！！

@legoek5837 2 жыл бұрын

とても分かりやすい内容でした！！！この動画で使っているリセットcssを教えてもらえるとありがたいです。

@user-pz5fg9yq7w 4 ай бұрын

今更ですがどうが拝見させていただきました。まともにコーディングしたことなかったけどこの動画で全体像は掴めました。これからまだまだ学ぶので学んでから聞けよって話しだとは思いますがリンク先のページからこのページに戻る場合のこととかも考えるとメニュー部分まではどのページにも入ることになるんですかね？

@user-dx2ip9bi5o Жыл бұрын

わかりやすいです！！ありがとうございます🥹😭😢 自分用メモです 20:33 25:52 26:46

@misora6727 2 жыл бұрын

とてもわかりやすかったです！このくらいの難易度からコーディングしていけばで出来そうな自信がつきました！ただ、headerタグやnavタグは最初からつけてコーディングしてほしかったです； divだけでやっていくこともあるのかぁと思いながら一緒にコーディングしてました😅 あとコードを売っていく部分も早送りでなくゆっくりだと非常に助かります。他の動画も拝見させていただきます！

@techitechi003 Жыл бұрын

めちゃくちゃ為になりました！分かりやすくて理解しやすかったです！

@web5096 Жыл бұрын

ありがとうございます🙌

@noahmorita5872 2 жыл бұрын

すごいこの動画に助けられています！ありがとうございます！ウェブサイトのレイアウトが最初に製作されていたと思うのですが、あれはどんなソフトウェアで製作してますか？？そこら辺もぜひ教えていただけると嬉しいです！

@akeemsk8130 Жыл бұрын

XDです

@tamama1111 2 жыл бұрын

参考になります！ちょっと長いので後ほどじっくり隅から隅まで拝見させていただきます^^

@notfadeaway6617 Жыл бұрын

tailwind cssを使ったtutorialも良ければお願いします。

@niconicohahaha7 2 жыл бұрын

とても分かりやすかったです！！ありがとうございます！！一緒にコーディングで勉強させていただきましたが、早送りではなく、初心者向けなのでもう少しゆっくりだと助かります(>_

@web5096 2 жыл бұрын

ありがとうございます！ご意見もとても嬉しいです！

@chinchilla3538 2 жыл бұрын

勉強になります。

@user-ol7ei6if2d 3 күн бұрын

こちらreset cssファイルの中身がなくても作成できるのでしょうか？

@mtza7143 Жыл бұрын

この動画は初心者がなんとか自分で1カラムのページを作り終えた後に見て学べるレベルの動画。それ以下の理解度の入門者には難しいかも

@yuubbb 3 ай бұрын

初めまして。htmlの勉強をしようと思ってたどり着きました。reset.cssのテンプレってのはどこから引っ張ってきたものでしょうか？

@hikkymama 10 ай бұрын

アキユキさん、いつもわかりやすく役立つ動画をありがとうございます！ちゃんとウェブページがHTML/CSSで作れてうれしいです！質問ですが、個人事業主（インストラクター、飲食店、フリーランサーなど）を対象にウェブ制作をする場合、HTMLでの構築とノーコードツールを使うのとどちらが良いでしょうか？　このままコーディングやワードプレスの学習を続けるのか、Photoshopなどのデザインに時間をかけてノーコードで制作する方向にいくのか、これからの学習方法に迷っています。

@web5096 10 ай бұрын

ありがとうございます！僕は開発するならコードは書けた方ができることの幅も広がりますし、単価もあがって良いと思います。一概にどうすればいいというのは、その方が目指しているものにもよりますし、ここでコメントできる範囲では明言しづらいですが。もしノーコードでやられている方の意見を聞ける機会があればぜひ聞いてみてくださいね。

@hikkymama 10 ай бұрын

@@web5096 回答ありがとうございます💗

@user-bx4qs2ch4x 2 жыл бұрын

使ってるリセットcssなんていう名前のものですか？

@What-ef8ji Жыл бұрын

勉強になりました！超初心者なのですが、Index cssとReset cssの違いは何ですか？どちらもが必ず必要なのでしょうか？

@user-tq3ot4sg4n Жыл бұрын

同じこと思いました😭

@ripton91 Жыл бұрын

全体的に左寄りになってしまい右に余白ができてしまうのですがなぜでしょうか

@_kuroneko- Жыл бұрын

divタグで要素をまとめれます！！ center:ページの中央 left:左寄せ right:右寄せなどですかね...間違ってたらすみません！

@kakkoiinippon Жыл бұрын

🇯🇵🇯🇵🇯🇵いいですね

@ganbaru77 Жыл бұрын

とても分かりやすかったです！ちなみに質問なんですがreset.cssはどれを使用していたのでしょうか？教えていただければ幸いです

@web5096 Жыл бұрын

ありがとうございます！ html5doctorのreset.cssです（中身は多少書き換えていたかもしれません）

@ganbaru77 Жыл бұрын

@@web5096 ありがとうございます！参考にさせていただきます

@user-minri Жыл бұрын

お世話になります。HTML/CSSの勉強中です。非常に判りやすかったのですが、フッターの個人情報保護方針が、どうしても右側に行きません。text-align: right;がきいていません？

@everybodyhappywithearth 2 жыл бұрын

参考になります！クソどうでもいいことですがアキユキさんは左側にCSSを配置する派なんですね。自分は左側でHTML書いて右でsass書いてます。

@ooky9623 5 ай бұрын

20:30の所をコードを入力しても横並びにもならず、隙間も開きません。何故だかわかる人いますでしょうか？

@gonchaka 6 ай бұрын

0:40 ここの、表示する「index.html」はどうやって作るのですか？

@_caramel-vi4dw 7 ай бұрын

style.cssより前にreset.cssを置いているのですが反映されません。どうすればいいでしょうか

@candrawahyu26 4 ай бұрын

兄さん、でもモバイルで開くと反応しないんですよね？

@user-by1gf2vs3j 10 ай бұрын

22:37 メモ

@امیرجاودانفرد Ай бұрын

‏‪0:00‬‏

@user-ds3tjfh6ge Жыл бұрын

15:58

@user-wm5xq6hf4e 9 ай бұрын

コピーするときなどに、今作ったものを３つ用意しなくてはならないので、ここからここの範囲をコピーして貼り付けます。などの説明を入れて欲しいです。流れで理解できる人もいると思いますが、初心者向けとしているのであれば理解できない人に合わせた方が良いかと思います。真似して作るだけでも精一杯という人は、ただのコピペであっても、急に画面が変わればビビります。長文失礼しました。