【HTML/CSSレイアウト】聖杯レイアウトのコーディング実践、デザイン解説【ヤフー出身エンジニアの初心者向けプログラミング講座】
HTML-код
- Опубликовано: 3 авг 2024
- 文系プログラミング未経験 → Yahoo! JAPANエンジニア → 起業家
🐙 GitHub（使用したコード）
github.com/lightsound/html-cs...
📙 もくじ
0:00 聖杯レイアウトとは何か？
2:10 聖杯レイアウトのコーディング
9:53 聖杯レイアウトを固定幅にする
11:06 聖杯レイアウトのレスポンシブデザイン化
15:59 聖杯レイアウトのデザイン的観点
17:30 ユーザーがサイトを見るときの目線について
18:27 色んなサイトの聖杯レイアウト
19:05 デザイントレンドの変化によるfooterの配置の変化
22:02 まとめ
🚀 今日のひとこと
聖杯レイアウトを実際にコーディングしましょう！
ただHTMLとCSSでマークアップするだけでなく
実際のWebサイトを例にデザインの解説もしています。
エンジニアを志望している方だけでなく、
Webデザイナーを目指す方にもオススメの動画です。
🔥この動画だけは見よ！
【HTML/CSSレイアウト #1】
実践的かつデザインも学べるレイアウト講座を開講します
• 【HTML/CSSレイアウト #1】実践的か...
【HTML/CSSレイアウト番外編】
コーディングに便利なChrome拡張機能を作りました
• 【HTML/CSSレイアウト番外編】コーディ...
👨💻 自己紹介
ヤフー株式会社でプログラマーとして働いていました！
現在は起業家として新規サービスを開発中です！
下記に興味がある方はチャンネル登録をおねがいします！
・IT業界、Web系、プログラミング講座
・リモートワーク、在宅勤務、副業
・スタートアップ、ベンチャー、経営者、社長
🌏 SNS
Twitter: / shimabu_it
Instagram: / shimabu_it
🏷️ タグ
#HolyGrailLayout #Webデザイン #聖杯レイアウト 
Хобби
聖杯レイアウト (Holy Grail Layout) をHTML・CSSで実際にコーディング！！👩💻👨💻
後半ではデザイン的な解説もしていますコレって需要ありますか...？(^O^;)笑
いつも動画を拝見しています。
しまぶーさんの動画は
非常に分かりやすいです！
尚且つ幅広く学べるので大変参考になります！！
ありがとうございます！
そう言ってくださって大変嬉しいですー😆
今後もいっぱい動画出すので期待していてください！
需要ありますよ！デザインについて教えてくださるRUclipsrさんはあまり多くない印象、、
たしかに、、、あんまり居ないですよね。エンジニアの中では、かなりデザインまで知っている方なので今後もそういう発信していきます👍
大学生でとてもためになると実感しております。webアプリ作成の一連の流れを通しで教えていただけるととっても嬉しいです!!
素敵な動画ありがとうございます！
どの動画も、全体像を把握しながら細部の部分まで学ぶことができるのでとても分かりやすいです。しまぶーさんのコンテンツを軸に勉強していきたいと思います。
めちゃくちゃ分かりやすいです！
おすすめに上がって来たので見ました。
話のテンポも丁度良かったです〜！！
色んなプログラミング学習の動画を見ていますがしまぶーさんの動画が一番わかりやすく着目点が他の方よりも明確なのでありがたいです！これからもいい動画をたくさんよろしくお願いします！
うおーーー1番わかりやすいという評価嬉しいです🤣
次は圧倒的No.1を目指さないと・・・！
今後もっと有益な動画だせるように頑張ります👍
レイアウトも時代と主に変わっていきますから参考になります。いつも思いますが、説明が上手いですね。勉強になります。
テンポがよくて、とても聞きやすいです。合間もちょっとしたコメントなどもすごく助かります。これからもレイアウト講座の更新どうぞよろしくお願いします！
レイアウト講座、今後もバンバン出す予定です。
本業が忙しくて間隔が空いていますが、今後も必ず出すので乞うご期待です😊
ちょうどモヤモヤしてたところを解説してくださり大変助かります。ありがとうございます😂
しまぶーさんのお陰でプログラミングめっちゃ楽しくなりました！
コードを打つシーンを観れるのはとても助かります！
独学で学んでいる最中でしたので参考にまりました！
プログラミングはやっぱりコードを打ってナンボですもんね😁
今後もこういう動画をたくさん予定しています！
なんとなく理解してるけど使いこなせず時間かかってる自分にはすごく有益な動画
正直学校の授業よりも遥かに分かり易かったです。
誰かが分からなかったら、このチャンネルを教えようと思います。
レイアウト作成は、苦手でしたが、非常にわかりやすくて
簡単なコードでだいぶクリアになりました
ありがとうございます。
実はコードって意外と少なくてもレイアウトできるんですよね！
助けになれたようで良かったです😊
お忙しいのに有益な情報ありがとうございます！☺️
楽しい忙しさなので問題ナッシング👍
めちゃくちゃ知識がなくても理解できて、作れました！ありがとうございます✨
それは良かったですー嬉しいコメント😊
雑学もありとても有益な学びができました。
こんなに簡単にレイアウトできるんですね。
基本を教えて応用は各自に任せるところが「講座」という感じでいいです。
footerがないサイト例が出されているので、最近のトレンドを意識しながら、今後のwebデザインに取り組めます。
需要ありまくりだと思います！
おおー需要あると知って嬉しいです🤣
他の方もそのように仰ってるので今後も続けたいと思います！
私の講座ですべてを賄うと、それはそれで調べる力が身につかないと思うので基本的には基礎までですね！JavaScriptは深いところまで解説しないとさすがに一人では難しい部分もあるので応用レベルまでやる予定ですが👍
勉強になりました。ありがとうございます！
最高にわかりやすいです。
今回も最高でした！ 実サイトでのトレンドの解説は、大変ありがたかったです！
うぉーーーまたコメントありがとうございます！
今後もデザイン解説していきますね😁
ありがてえ・・・何度もリピートしてvscodeに書きながら学ばせてもらいました。
Webデザインで、なぜ、の部分も丁寧に解説されていて、すっと理解できました！ぜひデザインのみの解説動画も観たいです！
むしろデザインのみ！？笑
断片的な知識が多くて体系立てて解説するのは難しいですね
でもたしかにデザイン講座もあり・・・いつかやりたい😣
知りたかったことについて知れました。ありがとうございます。
おおーーーそれは良かったです！
学びを提供できて嬉しいです😆
お疲れ様です。今回も大変勉強になりました。デザイン的な解説、私には意味ありありです！まだまだhtml、cssの範囲ですが、実験的になってきて今後も楽しみです。感謝感謝。
デザイン意味ありと言ってもらえて良かったですー😊
ただ実験的ではなく実践的！？😏笑
@@shimabu_it あ！ホンマですね。(^^ゞ
圧倒的なわかりやすさ！！
他の意識高い系のプログラマーRUclipsrとは違いますわ〜〜。
説得力が段違い！！
こんばんは、動画を見ながら学習していたら、動画どおりにできました！ありがとうございます！
１つ１つ解説してくださるので、かゆい所に手が届く感じで良いですね！
質問したいなー意味わからないなーって所の説明が特に。
某プログラミングスクールのテキストより分かりやすいです。
実際のコーディングから、企業例、聖杯レイアウトの沿革まで非常に分かりやすかったです。ありがとうございます！
以前ご紹介いただいたPasteで、いつでも利用できる状態にストックさせていただきます😁
そして、あっという間の2万人突破おめでとうございます！
これからも応援しております💪
ただコーディングするだけで終わらないのが私の講座です(￣ー￣)
Paste使われましたか、めちゃくちゃ便利ですよね。あれだけはMacで外せないBestアプリです。
2万人突破もめちゃくちゃ嬉しいですー！！
次は3万人に向けて、今後も有益な動画を発信して評価していただけるように頑張ります！😆
毎日ヤフーをスマホで見てますが、無限スクロールの事など全然知りませんでした...ただ、言われてみて「あっ、ホントだ😲」とすごく納得してます🙃
dev toolsに関する動画を何本かいろんな人の動画を見てましたが、イマイチ具体的な使い方がわかりませんでした。
この動画で使い方がわかってきました。
大まかな枠組みを作る→dev tools でその場で見ながらデザイン決める→決まったら枠組みにコピペ
ありがとうございます！
flex使い始めてから横のレイアウトが格段にしやすくなったなあ。
float使ってた頃はめっちゃハマりまくった。
まったく同意です。
floatとclearfixの闇(^O^;)笑
めちゃくちゃいいから、早く次の動画出してほしい。。。。
いつもわかりやすい動画ありがとうございます。
レスポンシブ対応させる際に、cssのmediaqueryを使うのか、bootstrapを用いた方が良いのか、
実務ではどちらが使われることが多いのか？
お聞きしたいです！
フェイトの聖杯を思い出されるレイアウトですね！ありがとうございます!!
Fateの格ゲーは昔よくやってました🤣笑
@@shimabu_it そして遅くなりましたが、登録者２万おめでとうございます！もうあっという間ですね！！
ありがとうございます！
今年の目標が5万なので、まずはそこに向かって頑張ります💪
説明上手い！ロジカルシンキングの講座もやってほしい！
就活講座をやってますが、その文脈でロジカルシンキングは扱います！👌
いつも拝見させていただいてます！
これからも動画配信よろしくお願いします！
大変恐縮なのですが、adobe XDは使用されているのでしょうか？
回答よろしくお願いいたします！
webの勉強を始めたばかりですがとても分かりやすく参考になりました。
フッターを右に寄せる今風のレイアウトの場合、asideの中にfooterを入れれば良いのでしょうか？それともfooterタグを使わずpタグなどでフッターの情報を入れるのが良いのでしょうか？
コードをうちながら、新しい知識を頭にバンバン叩き込まれて最高の学習動画です。ありがとうございます(T∀T)
今後もっと凄い動画を出してバンバン叩き込みます
知識詰め込みスパルタ🦹♀️🦹♂️
すごくスッキリまとめてくださり、助かりました。
レイアウトってhtmlで最初にぶち当たる壁のような気がします。
他の要素は各個撃破できそうなんですが、レイアウトが出来ないと、そこから前に進む気にならないんですよね。
神奇的演算法帶我來到這裡……XD
↑有開發前端也有學日文的人
いつも有益な情報提供誠にありがとうございます。何かしらコードを打つ時に、その箇所をズームするように動画編集して下さると、見やすくなるのでなお有難いです👏 よろしければご検討お願いします！
たしかにちょっと見にくいかも・・・スマホとかだとかなりキツイですよね？😅
毎回ズームは実は編集でかなり時間がかかっちゃうので次回からコード部分をもっと拡大します！！👍
いつもタメになる動画ありがとうございます。質問があります。聖杯レイアウトはある程度形を理解し、必要となった際にコピペするといったやり方でもよろしいのでしょうか？
もちろんコピペでも良いですが、flexなどのプロパティはとてもよく使われるので覚えた方が良い部分かと思います。もちろん何度もコピペしていく中で覚えることもできるかと思いますが「なぜそう動くのか」という仕組みを理解することで、コピペも必要なくなります👍
今回も非常に勉強になりました＾＾
聖杯レイアウトの成り立ち、意味とその変遷が面白かったです。
Webデザインについて学びを深めたいのですが、現場での業務以外だと、しまぶーさんは書籍などで学ばれたのでしょうか？
もしオススメの本などありましたら是非ご紹介頂けますと嬉しいです！
何卒よろしくお願いします。
実は今日1日使ってCSS講座を1〜7をまとめてやったのでJavaScriptの動画も一区切りつくのを期待してます。切り口が人と違って頭が整理されていく感じがしました。
JavaScriptももう少しで1シーズンが終わります！
今かなり構想を練っております✌️
that's a great video. +1 sub
いつもありがとうございます。「ださいデザイン」「かっこよくて見やすいデザイン」など、デザインについての考察？があれば教えて頂きたいです。今後どのようなものが流行りそうでしょうか？
最強web制作の会社に未経験から入って勉強しています。本当に有益でわかりやすい動画助かります。しまぶーさんはエンジニアが本業だったと思いますので、趣旨とは違うかと思いますがwordpressは使われたりすのでしょうか？PHPや関数が出てきたり難しくて…。なにより説明が分かりやすいのでwordpressについての実践的な講座があればなぁと個人的にすごく思っています…。
今まで俺はイケメンに対して嫌悪感を抱いていたんだけど、
なんだろ…この人…イケメンなのに…見るたび俺の胸が…ﾄｩﾝｸﾄｩﾝｸ♡しちゃう…。
俺の身体…なんかおかしいぞ…。
あ、すみませんとりあえず言いたいことはこのお方のスクールがあるならまじで行きたいと思いました。まじこのお方に感謝！！！！！！
しまぶ → 🏃💨 🏃♂️ ← トルコ。
（やばそうな人から逃げてる図）
というのは置いといて嬉しいコメントです。スクールはまだ考えていませんが、教えるのは好きなので将来的には考えたいですねー😊
初心者につき、とても参考になってます。
flexboxの子要素の比率はすべてflexで指定するものと思っていましたが、
左右に幅指定し、真ん中を1にすることによって残り幅が割り当てられることが分かりました('◇'）
めちゃくちゃ文での説明うまいですね。
簡潔で分かりやすすぎてビックリしました(^O^;)笑
それ私も感じました。
flexは使ったことなかったので、cssgridだと1frと指定する感じなのかなと(^^)/
なんとなくで学んだ基礎の部分などを確実に潰せる動画、めちゃくちゃ参考になります！
質問ですが、navタグの読みは一般的には「ナブ(ナヴ)」なんでしょうか？人によるかもなのですが、自分はナビと読んでいたので…
ありがとうございます！参考にしていただけたようで私も嬉しいです！navタグの読み方は難しいですね。もとがnavigationなのでナビタグでも良さそうです。ただどちらでも伝わるのであんまり気にしていないのが正直なところです(^O^;)笑
@@shimabu_it ご返信ありがとうございます！
どちらでも伝わるのであれば、あまり気にせず使用していきます笑
フロントエンド系勉強中なのでいつも助かっています、今後ともよろしくお願いしますー！
少しずつ拝見しております。貴重な動画ありがとうございます。
ｙａｈｏｏのレイアウトデザインをベースにコードを追いながら、
学習したいのですが、ｙａｈｏｏと同じ文字のままではマズいと
思いますので、仮の文字が埋まった状態のサンプルが欲しいのですが、
Ｇｉｔ等、参考となる情報はどこかにございますか。
いつも勉強させていただいてます！
デザインについては今後も是非発信していただきたいです！
質問です。私は企業などのHPを作成出来るようになりたいのですが、HTML、CSS、JavaScript以外に勉強すべきことはありますか？
個人的にJquery、PHP、wordpressを今後勉強していこうかと思っています。ご回答いただけると嬉しいです！
デザインについてありがとうございます。結構肯定的な意見が多くて嬉しいです。個人的にはフロントエンドエンジニアとデザイナーの境目（両者を繋ぐ役割）が狙い目のポジションだと思っているので、だいぶオススメですねー
さて質問に関してですが、企業のHPと言ってもたくさんの作りがあります。結論、HTML・CSS・JavaScriptだけでもできますし、PHPやWordPressを用いても作ることが出来ます。私は前者のHTML・CSS・JavaScriptで作る方法をオススメしていますが、そこそこJavaScriptに関する知識が必要にはなります。
Web制作系の仕事で食べていきたいならWordPressもありかと思いますが、ただWordPressはヤフーやLINEやメルカリなどのアプリ開発系の現場では使われません。まずはWeb制作がしたいのか、アプリ開発系のスキルがほしいのか、どちらを目指すかを決めると良いかと思います。そちらも過去の動画で触れているので、もしよかったらどうぞ！
ruclips.net/video/_IJQ2iBkf4w/видео.html
ちなみにjQueryは確実に使われなくなるので、個人的には今から学ぶべき技術ではないと思っています！
@@shimabu_it
ご回答いただきありがとうございます！
とても参考になりました(^-^)
これからも動画楽しみにしてます！
いつも有益でわかりやすい動画、ありがとうございます！
毎日、夕食時のおかずにしていますw
夕食時のおかず！笑
野菜もちゃんと食べてくださいね
🍆🥦🌶🥒🌽🥕🥬🥔
とても勉強になります！！ありがとうございます！！ 一つ質問がありますが、VScodeのテーマは何を使われていますか？ とてもすっきりして見やすいなと思いました。教えていただけると嬉しいです！！
GitHubのテーマを使っていますよー✨
marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme
@@shimabu_it ありがとうございます！😊
なかなか出来の良い解説です。因みに、聖杯レイアウトがモバイルにおけるデザインの考え方も解説していただけたら助かると思います。
ありがとうございます！
動画内で触れていませんでしたが、聖杯レイアウトはPCでのレイアウトの話で、モバイルだとただの名前のないレイアウトですね。なのでモバイルにおけるデザイン的な意図はなく、聖杯レイアウトのレスポンシブ対応として最もよく使われている形を紹介したというだけのものになります。説明不足で失礼いたしました。😢🙏
◎聖杯レイアウト
・聖杯レイアウトとは
・デザイン的観点
●聖杯レイアウトとは
固定幅/全画面幅
昔は難しいとされていたレイアウトだから
navタグ
左側によくナビゲーションが配置される為
asideタグ
右側には広告やバナーがよく配置される
構図が聖杯っぽからHoly Grail Layoutって呼ばれるとどこかで見た気がする。
ちなみに昔ながらのcssとhtmlでそれっぽいのを作ると…
レスポンシブや複数デバイス対応をみてみたいです
この動画でも扱ってるメディアクエリとかの詳しい話ですよね
そちらのCSS講座も時間があるときに作りますね✌️
（作りたい講座が多すぎてパンク中(^O^;)）
いつも拝見させていただいています。
を記入したかったのですが、何故か高さが反映されません。何か問題あるのか？そういう状況もありますか？
自分がやりたかったレイアウトが、この講座で出来るようになりました！（単なる凡ミスでしたが・・・）
ReactのNEXT.jsや.nativeの講座もしていただけますか？ご検討お願い致します。
おおー実現できたようで良かったです！おそらくmin-heightかな！😌
React、Next.jsは「確実に」やりますよー！JavaScriptをもう少し進めたら入れるのでちょっとだけお待ちをー！React Nativeも大好きなのでいつかやりたいと思ってます👍
@@shimabu_it やはり見抜かれました・・・min-heightです(笑)
1時間調べてました後に、基礎を復習するために観てたら、「あっ」っと思いまして・・・
min-heightはあるあるですね！笑
１番の引掛けポイント😂
flexこんな風にして使うのか。
カエルで鍛えてよかったー
いつも非常に助かってますm(__)m
フォントサイズや画像などのレスポンシブ対応が上手くいかないので、よろしければレスポンシブについて詳しくお願いしますm(__)m
てっきり、header-center-footer で、盃の形だからだと思っていました(´▽｀;)
こんなに整理整頓されてたらさぞかしお部屋も綺麗にレイアウトされているのでしょうかー
残念ながら部屋はposition: absoluteでレイアウトされていて無秩序になってます😱
というのは冗談で、たぶん普通ぐらいの部屋です。
決してオシャレではないです(^o^;)笑
1:40昔はそれがありましぇんでしたって聞こえるｗ
ほんとだ・・・笑
発音警察に見つかってしまいました👩✈️👨✈️
@@shimabu_it
わざわざ言う事でもないですが面白くて我慢できませんでした笑
内容自体はとても良かったです😂
👍👏👏 🔔
widthの発音はウィズスでなくウィッズですよ。
世紀末リーダー伝たけしの作者かと思った。
なぜエディタじゃなくて開発ツールでしょうか？なんだかみにくいです。。
0
お食い初め
昔から気になっていたのですがご結婚されてますか？
結婚してますよー😊
うーん、日本語が気になる。
1. 見切れる
舞台用語にこんな言葉がある様だがぁ。。。一般用語には無い。
2. width
ウイドゥス？
そんな発音はしない。
ウィッズが正解
内容が良いだけに惜しい。
div.mainの内容量に応じてbodyのheightも可変にしたいので、body要素にheight属性を使わず、min-height属性を使うわけね。なるほどぉ。知らんかった。div.mainの内容量がデカくなると、vertical scroll barが現れ、body要素が110vhとか120vhへと変化可能となるんね。
”ウィズス”って、はずかしいがな。いい子は、”ワイズ”と読みましょうね。
私も英語は苦手なので発音の下手さに関しては何も言えませんが、ワイズとは読まないのでぜひ検索して調べていただきたいです🙇♂️
www.google.com/search?sxsrf=ALeKk03fWoxhGml2ZFFJ_Mg7xEB9dhnSIQ%3A1589896226598&source=hp&ei=IuTDXrjfIeWWr7wP48ij0AI&q=width+%E3%83%AF%E3%82%A4%E3%82%BA&oq=widt&gs_lcp=CgZwc3ktYWIQAxgAMgQIIxAnMgQIIxAnMgYIIxAnEBMyAggAMgIIADICCAAyAggAMgIIADoHCAAQgwEQBDoECAAQBDoECAAQQzoFCAAQgwFQrwdY4g5gvRVoAHAAeACAAb0CiAHKBpIBBzAuMi4xLjGYAQCgAQGqAQdnd3Mtd2l6&sclient=psy-ab
ちなみに頑張って英語っぽく発音することも考えましたが、日本語と英語を行き来すると余計に「？」ってなってしまうと考えてウィズスと発音しています。
@@shimabu_it ”ワイズ”って読んでる人、周りにもいて、結構間違えられやすいんだなって思いました。高校生で習う単語ですよね。高校の英語の先生の発音が悪いから、こういうことになってしまうんでしょうか？
@@webgodweb よくテストにも出てくる単語ですよね。
1番の原因が何かはわかりませんが日本の英語教育に問題があるのは間違いないですねー・・・😥
為になるご説明にいつも感謝しております。Widthの発音ですが、母国語がイギリス英語の国で生まれた現役大学生と高校生の息子たちに尋ねてみた所「ウィッズ」が一番近いと思われます。しかも「ウィッ」と「ズ」の間に一拍入れる感覚で発音する事になるそうです。ただ「ズ」の発音も正確な「ズ」ではなく「ＴＨ」の前のＤの発音を引きずる事になるので、到底カタカナでは表現出来ない発音とのことです。この発音をされても殆どの方が「何の事」か分からなくなると思いますので、もしかしたら「幅（はば）」と日本語で発言されるのが分かりやすいかも知れませんね。
that's a great video. +1 sub
Wow, thanks!
I subscribed to your channel too.🤣
聖杯馴染みあるなぁ…なんでやろーなぁ…（Fate）