【実践】ヘッダーの組み方 HTML/CSSコーディング part.1
Вставка
- Опубліковано 15 вер 2024
- 今回は、ヘッダーの組み方の説明動画です☺️
わかりにくい箇所などご意見あればコメントいただければと思います🙇♂️
🎥 part.1 ➡︎ この動画
🎥 part.2 ➡︎ • 【実践】ヘッダーの組み方 HTML/CSSコ...
🎥 part.3 ➡︎ • 【実践】ヘッダーの組み方 HTML/CSSコ...
📂この動画で使用したファイル
www.craft.do/s...
この動画が気に入っていただけたら、ぜひチャンネル登録よろしくお願いします😆❗️
その他のSNSもフォローいただけたら嬉しいです🙇♂️❗️
◆ チャンネル登録
www.youtube.com...
◆ Twitter. ツイッター
/ hirocodeweb
◆ Instagram. インスタグラム
/ hirocodeweb
◆ ROOM. 楽天ルーム
room.rakuten.c...
🔋 僕が使っている、おすすめのデバイス 🔋（アフィリエイト広告を使ってます！）
---- マウス ----
【 ロジクール アドバンスド ワイヤレスマウス 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...
----------------------------------------------------------
親からの依頼でHP作成をしている現役高校生なんですけど、headerタグを使って項目を作ることに苦戦していました。ネットでいろんなサイトを見ていましたが、この動画一本で理解出来ました。CSSの方でも、インライン要素とブロック要素の理解が浅く、実行されないことが多々ありました。各コードが何について行われているかが分かりやすかったです。
高校生でコーディング学ばれていてめちゃすごいです😵❕嬉しいコメントいただきありがとうございます🙇♂️❕
初学者がつまづきそうなところを解説してあって、とても分かりやすかったです。今後も期待しています。
嬉しいです😭‼️期待に応えられるように頑張ります🙇♂️
コードを書きながら、この場合は、これとか喋ってくれる説明がわかりやすかったです。
そう言っていただけてとても嬉しいです😭❗️ありがとうございます🙇♂️‼️
headerの作り方がよくわかりました！ありがとうございました！「.list_nav_header > li + li: margin-left: 20px;」liが隣接したらmarginを取るのは初めて知り感動しました！
参考にしていただけた様で良かったです😊♪嬉しいコメントいただきありがとうございます🙇♂️❗️
とても参考になりました。
いつも楽しく拝見しています。
とっても嬉しいコメントいただきありがとうございます🙇♂️❕
書出しからコーディングまで…こういうのを求めてました！
WEBデザインを勉強中ですが、margin-leftもheightでのロゴサイズの指定も目からウロコでした。
早速次の動画も見まーす！
コメントありがとうございます☺️ご視聴いただけて嬉しいです❗️ありがとうございます🙇♂️
本当にありがとうございます、まだ駆け出しでヘッダーのパターンが自分には無かったので凄く参考になります
少しでもお役に立てて嬉しいです😊♪こちらこそありがとうございます🙇♂️❗️
色んなテクニックを知ることができて、勉強になります！
ありがとうございます😭❗️
今日まさに仕事でつまずいたとこで、
復習、勉強になりました！
わかりやすい動画ありがとうございます。
コメントありがとうございます❗️少しでもお役に立てたようで良かったです☺️♪こちらこそありがとうございます🙇♂️
html・css初心者ですが今回の動画もとってもわかりやすくて助かりました！ありがとうございます！
とっても嬉しいコメントいただき、こちらこそありがとうございます😭‼️
今まで見た組み方動画で1番分かりやすかったです！！！
練習して理解を深めたいと思います。ありがとうございます！
めちゃめちゃ嬉しいコメントありがとうございます😭❗️
メイン部分やセクションごとの説明もあるとすんごくありがたいです!!!
コメントいただきありがとうございます😆❗️ヘッダー以外のパーツ載せられてないので、いくつかパーツの作り方上げていきたいと思います🙇♂️❗️❗️
@@hirocode かなり需要あると思いますしヒロさんはこうやって真摯に対応していただけるのでより見たいと感じます！
どの動画もすごくわかりやすいですね。
XDからWEBにコーディングを詳しく教えてほしいです。
嬉しいコメントありがとうございます😊♪
XDからコーディングの流れ作成してみます❗️ご意見ありがとうございます🙇♂️
初めまして^^最近webの独学を始めた初心者です。ヘッダーのcssでつまづいていたのでわかりやすく勉強になりました！ありがとうございます。
はじめまして😊❗️独学だと何かとつまづくことも多いかと思いますが、少しでもお役に立ててこちらとしても嬉しいです♪コメントいただきありがとうございます❗️
参考になりました。
素材提供をしていただいたおかげで手を動かしながら学べました。
ありがとうございます。
嬉しいコメントありがとうございます😊❗️❗️
複数のヘッダー管理のためににクラス名をつけることもあるんですね。
とても勉強になります。😁
コメントいただきありがとうございます😊♪
他にもテーブルやリストなど、基本的にはクラスで管理するのがおすすめです❗️
とても勉強になります…！
少しでも参考にしていただけて嬉しいです😊♪
ありがとうございます❗️
@@hirocode 返信コメントありがとうございます…！
職業訓練でWebデザインを学んで、コーダーからフロントエンドエンジニアに行きたいと思っている者です。実務的なことがまだまだわからないので、ヒロさんの実際にコード打っているところは大変勉強になります！これからも応援させてください🥰
わかりやすい解説ありがとうございます
わからなかったとこがわかってモチベーション上がりました！
こちらこそありがとうございます🙇♂️‼️そう言ってもらえて嬉しいです😭
adobeを導入して練習してみたいと思います。
ぜひぜひ😆❗️
ありがとうございます
こちらこそありがとうございます🙇♂️
いつもわかりやすい動画ありがとうございます。
勉強に活用させていただいております。
font-sizeの指定で15px/1emとしているところがあると思うのですが、これはどうゆう意味なのでしょうか。
よろしくお願いします。
コメントいただきありがとうございます😊♪
フォントの一括指定はfontプロパティで行うことができ、
書き方としては、font: フォントウェイト フォントサイズ/ラインハイト フォントファミリー; という記述をします。
なのでこの場合、フォントサイズを15px、ラインハイト（行の高さ）を1em（文字と同じ高さ）にする、という指定になります😆❗️
ちなみにここではline-heightを1emと書いていますが、1でも問題ないです！
とても勉強になりました！
お問い合わせボタンの箇所について2つ質問があります。
・aタグはdisplay:blockにしなくてもheightが指定できるのですか？それはdisplay:flexにするとaタグがブロックレベル要素になるという事でしょうか？
・「お問い合わせ」の文字が垂直方向の中央に配置できたのは、aタグにdisplay:flexと指定したとこによって、aタグがflexコンテナーになって、お問い合わせという文字がflexアイテムになったということでしょうか？
返信頂けると嬉しいです。よろしくお願いいたします。
コメントいただきありがとうございます😊❗️
display:flex;の指定をした要素はブロックレベルのフレックスコンテナになるので高さの指定が可能になります。どちらもその通りの認識で問題ないと思います🙇♂️❗️❗️
ありがとうございます。
実践的な内容でとても勉強になります。これからも色々なパーツの作り方を教えていただけると嬉しいです😊
初めまして
凄く分かり易いです。
使われているのは、何のエディターですか？
コメントアウトが簡単に出来ていたので気になりました。
嬉しいコメントいただきありがとうございます😆❗️
エディターはCoda2というエディターを使用しています♪
コメントアウトについては、command + / がショートカットとして設定されていることが多いです❗️もしご自身で使用されているエディタがあればそちらでも試してみてください😊♪
@@hirocode ご丁寧にありがとうございます。
デザインデーターも提供していただき、勉強しやすくありがたいです。
質問です。
パソコン解像度の関係かもしれませんが、 ブラウザ（Chrome）の表示を50％以下にしていくと「お問い合わせ」の文字が下に行ったり(50%時)上に行ったり(33%時)しますが、これはブラウザの仕様で仕方ないことなのでしょうか？
コメントありがとうございます❗️
画面幅狭くすると崩れることですかね❓
それについては今回そこまで考慮していないからです🙇♂️❗️
この次のステップとしてはレスポンシブ作業があるのですが、その際、画面幅の縮小に応じて文字サイズを小さくしたり、一定の狭さになったらハンバーガーメニューにするなどの対応をする必要があります🙆♂️
ちなみにChromeが一番綺麗に表示してくれるブラウザです😆❗️
サイトとして公開するにあたっては、safari,firefox,IE,Edgeなどの代表的なブラウザで表示の崩れがないか全て確認する作業が入ります❗️
@@hirocode 様
ご返事ありがとうございます。
Chromeの表示で縮小していくと、「お問い合わせ」の文字だけが上に行ったり下に行ったりします。
レスポンシブの関係ではないと思うのですが、 MacBookProと LGモニターの関係かもしれませんので再度確認してみます。
次のスッテップ「レスポンシブ」楽しみにしています。
返信めちゃめちゃ遅くなり申し訳ございません💦
そうなのですね😵 すみませんパッと原因になりそうなこと思い浮かばないのですが、実際の案件でもクライアント様の環境ではうまく表示できないということが定期的にあるので、そいういった考慮とかも大変だったりします😅
レスポンシブに関する動画お待ちください🙇♂️❗️❗️
この動画と関係ないですが、HIROCODEさんは画像をCSSではなくHTMLのimgタグを使う理由はなんですか？
ご質問いただきありがとうございます😊♪
画像の表示については用途によって使い分ける必要があると思います！
まず、ブログなどの投稿系の画像については、日々投稿するものをいちいちCSSに記述するわけにいかないので、imgタグを使用するのが一般的です。
cssで画像を指定する場合、background-imageでの表示か、擬似要素(::before ::after)のcontentプロパティで挿入するかがあると思います。まず擬似要素の場合、サイズ調整が難しいので、これを使うことは全くないです。background-imageプロパティについては、画像を背景前面に表示する場合や、色んな箇所に同様の画像やアイコンを表示したい場合に使います😆❗️
@@hirocode なるほど！そういうことだったんですね！
丁寧にありがとうございます☺
何度も質問失礼します。。
ヒロさんはコーディングする際にHTMLの命名規則は全部決まってますか？たまにhederにクラスをつけない場合とp-headerみたいにクラスをつけたりとどのようにクラスの命名を使い分けてますか？
@@J.J.J_sml 動画では説明簡単にするためにタグにそのまま指定とかしますが、仕事ではFLOCSSとBEMを組み合わせた命名規則使ってます🤗❗
@@hirocode なるほど！！
是非仮想の案件をヒロさんがコーディングして見ました的なの見たいです💖
凄く聞き取りやすい声なので、字幕不要ですね。とても参考になります。
嬉しいお言葉ありがとうございます😊♪