◆悩んだとこ、後から気づいたとこをシェアしていきます。 デイトラをはじめました。 現在中級に入ったところですが、つまずくようになってきたので 初めて復習をしています。 復習にあたって、VSCodeでmarkdownを使ってノートをとるようにしました。 せっかくなので、同じ悩みの方に向けて投稿していきます。 単元を学習した後に読むのが良いと思います。 わたしも同様に初学者です。内容の正確性を保証することはできません。 訂正やより良い情報があればご教授お願いします。 ✔この記事で解決できること 講義内容と課題の中でわからないことが解決できるかもしれない。 調べる時間を短縮できるかもしれない。 学習の仕方を効率化できるかもしれない。 ◆DAY5 ゼロから作る ① ✔ VSCode の emmet を設定する 今後の作業効率化のためと忘れてもつまずかないように emmetの設定をしてみました。 emmetの設定が書かれているjsonファイルを編集する必要があります。 VSCodeのウィンドウ左上Code →基本設定 →ユーザースニペット →html.json 参考サイトからコピーをさせていただくのが良いと思いますが、 私が今使っている設定を載せておきます。 "html5": { "prefix": "!h", "body": "<!DOCTYPE html>\n<html lang=\"ja\">\n <head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n <link rel=\"icon\" href=\"./favicon.ico\">\n <title>$1</title>\n <meta name=\"description\" content=\"\">\n <link rel=\"stylesheet\" href=\"./css/reset.css\" type=\"text/css\">\n <link rel=\"stylesheet\" href=\"./css/style.css\" type=\"text/css\">\n </head>\n <body>\n \n $2\n \n </body>\n</html>" }, 解説 - !hを入力すると下記の"body":以下が出てきます。 - \nは改行です。\"はダブルクオートです。 - \$1に最初のカーソルが置かれます。入力すべき箇所を意味します。 - tabを押すと入力カーソルが$1から$2に移動します。 デフォルトのemmetから追加したこと - html タグの lang を ja にした - description を追加した - favicon を追加した。 Bootstrapなど、新しいことを学んだ際に追加するようにしています。 参考サイト https://keywordfinder.jp/blog/seo/favicon/ https://slash-mochi.net/?p=1978 ✔ viewport について viewportの詳しい説明がなかったので、調べてみました。 pxについて CSS の px とは画素数ではなく長さの単位だそうです。(CSSピクセルとも言われる。) 画素数だと思ってましたが、画素数がどんどん細かくなっている今の時代は、 モニタによって1つの画素の大きさが違うそうです。 webページが表示される仕組み HTMLファイルが viewport で下書きされ、デバイスに表示される。 この時、viewport の初期幅は一般的なデスクトップ画面である 980px です。 つまり、980px に収まるように下書きされる。 CSS で 980px を超えるように記述されたものははみ出てスクロールが必要になります。 次に、下書きがデバイスのブラウザに合わせて拡大もしくは縮小されて表示される。 具体的には、980px の下書きが、360px のスマホに縮小されて表示されます。 レイアウトがHTMLファイル通りだが、とても小さいwebページの出来上がり。 これを避けるために、width=device-width で、 下書きをする viewportの横幅をデバイスの画面と同じにします。 下書きの幅と同じ画面に表示してくれるので、 下書き後の拡大縮小は起こらないということのようです。 ちなみに、initial-scale はwebページ表示時に何倍に拡大するかという設定です。 下書きとデバイスの幅が一致しているなら1を設定すればよいのです。 参考サイト https://www.youtube.com/watch?v=xdUjlpHRX0U ✔ reset.css の意味 CSSには、適用される優先順位があります。 最も高い優先度を持っているのが、user agentというスタイルシートです。 私達が記述した CSS の前に user agent という ブラウザが設定している CSSのスタイルシートが適用されます。 このスタイルはブラウザごとに異なっているため、 想定通りの表示がされるように、 user agentのスタイルシートを reset.css でを消します。 注意 まずはuser agentを消してからstyle.cssを読み込ませます。 <link rel="stylesheet" href="./css/reset.css" type="text/css"> <link rel="stylesheet" href="./css/style.css" type="text/css"> 参考サイト https://www.youtube.com/watch?v=aNnauB_PY3I ✔ font-size font-weight 親要素に指定しても子要素に反映されない。 最初の講義で、HTMLを親子にまとめて記述する理由の1つとして 親要素に指定したCSSが子要素に反映されるからと言っていましたが、 例外であるこれのルールについて説明している教材が少ないです。 講義ではなんとなく流してしまい、いざコーディングの時に気づきました。
デイトラをはじめました。 現在中級に入ったところですが、つまずくようになってきたので 初めて復習をしています。
復習にあたって、VSCodeでmarkdownを使ってノートをとるようにしました。 せっかくなので、同じ悩みの方に向けて投稿していきます。
単元を学習した後に読むのが良いと思います。
わたしも同様に初学者です。内容の正確性を保証することはできません。 訂正やより良い情報があればご教授お願いします。
今後の作業効率化のためと忘れてもつまずかないように emmetの設定をしてみました。
emmetの設定が書かれているjsonファイルを編集する必要があります。
参考サイトからコピーをさせていただくのが良いと思いますが、 私が今使っている設定を載せておきます。
"html5": { "prefix": "!h", "body": "<!DOCTYPE html>\n<html lang=\"ja\">\n <head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n <link rel=\"icon\" href=\"./favicon.ico\">\n <title>$1</title>\n <meta name=\"description\" content=\"\">\n <link rel=\"stylesheet\" href=\"./css/reset.css\" type=\"text/css\">\n <link rel=\"stylesheet\" href=\"./css/style.css\" type=\"text/css\">\n </head>\n <body>\n \n $2\n \n </body>\n</html>" },
解説 - !hを入力すると下記の"body":以下が出てきます。 - \nは改行です。\"はダブルクオートです。 - \$1に最初のカーソルが置かれます。入力すべき箇所を意味します。 - tabを押すと入力カーソルが$1から$2に移動します。
デフォルトのemmetから追加したこと - html タグの lang を ja にした - description を追加した - favicon を追加した。
Bootstrapなど、新しいことを学んだ際に追加するようにしています。
参考サイト https://keywordfinder.jp/blog/seo/favicon/ https://slash-mochi.net/?p=1978
viewportの詳しい説明がなかったので、調べてみました。
CSS の px とは画素数ではなく長さの単位だそうです。(CSSピクセルとも言われる。) 画素数だと思ってましたが、画素数がどんどん細かくなっている今の時代は、 モニタによって1つの画素の大きさが違うそうです。
HTMLファイルが viewport で下書きされ、デバイスに表示される。
この時、viewport の初期幅は一般的なデスクトップ画面である 980px です。 つまり、980px に収まるように下書きされる。 CSS で 980px を超えるように記述されたものははみ出てスクロールが必要になります。
次に、下書きがデバイスのブラウザに合わせて拡大もしくは縮小されて表示される。 具体的には、980px の下書きが、360px のスマホに縮小されて表示されます。 レイアウトがHTMLファイル通りだが、とても小さいwebページの出来上がり。
これを避けるために、width=device-width で、 下書きをする viewportの横幅をデバイスの画面と同じにします。 下書きの幅と同じ画面に表示してくれるので、 下書き後の拡大縮小は起こらないということのようです。
ちなみに、initial-scale はwebページ表示時に何倍に拡大するかという設定です。 下書きとデバイスの幅が一致しているなら1を設定すればよいのです。
参考サイト https://www.youtube.com/watch?v=xdUjlpHRX0U
CSSには、適用される優先順位があります。 最も高い優先度を持っているのが、user agentというスタイルシートです。
私達が記述した CSS の前に user agent という ブラウザが設定している CSSのスタイルシートが適用されます。 このスタイルはブラウザごとに異なっているため、 想定通りの表示がされるように、 user agentのスタイルシートを reset.css でを消します。
注意 まずはuser agentを消してからstyle.cssを読み込ませます。
<link rel="stylesheet" href="./css/reset.css" type="text/css"> <link rel="stylesheet" href="./css/style.css" type="text/css">
参考サイト https://www.youtube.com/watch?v=aNnauB_PY3I
親要素に指定しても子要素に反映されない。
最初の講義で、HTMLを親子にまとめて記述する理由の1つとして 親要素に指定したCSSが子要素に反映されるからと言っていましたが、 例外であるこれのルールについて説明している教材が少ないです。
講義ではなんとなく流してしまい、いざコーディングの時に気づきました。
概要 ヘッダーを作るにはFlexBoxを使う リストマーク(・)を無効化するにはlist-style: none; リンクの下線を無効化するにはtext-decoration: none; ヘッダーの構成 こんなヘッダーを作っていきます。 まず、考えるべきことはレイアウトです。どんなHTMLで構成されているのでしょうか？ ヘッダー.html <header class="header"> <h1 class="header-title"><a href="#home">ヘッダータイトル</a></h1> <nav class="header-nav"> <ul class="header-nav"> <li class="nav-list"><a href="#about">About</a></li> <li class="nav-list"><a href="#service">Service</a></li> <li class="nav-list"><a href="#contents">Contents</a></li> </ul> </nav> </header> 大きな構成としては「ヘッダータイトル」と「ナビゲーション」の2つ。 そして、特徴的なのはナビゲーション内のそれぞれの項目(アイテム)がリストで構成されていることです。通常のHTMLでリストを表示するとリストマーク(・)が表示されますが、どうやって消すのでしょうか？ また、aタグのリンクによる下線も消されているのも気になります。 まとめると、CSSで実装するために課題となるのは以下の3つです。 項目を横に並べる方法 リストマークを消す方法 aタグの下線を消す方法 項目を横に並べるには？ まず1つ目は「ヘッダータイトルとナビゲーション」や「ナビゲーション内の項目」を横並びにする方法です。この2つは同じプロパティを設定します。 それはFlexBoxです。FlexBoxとは「Flexible Box Layout Module」の略で、簡単かつ柔軟にレイアウトを組むことができるボックスレイアウトのことです。 このFlexBoxを使うことでそれぞれのアイテムを横に並べることができます。 header.css .header { display: flex; } このようにFlexBoxを使用します。displayプロパティで指定することでヘッダータイトルとナビゲーションが横に並びます。 しかし、今のままではヘッダータイトルとナビゲーションが左に寄っている状態です。サンプルのヘッダーを見てもらったらわかりますが、それぞれの項目が端に寄っている（タイトルが左端、ナビゲーションが右端）ヘッダーを作りたいのです。 そんな時に使えるのがjustify-content: space-between;です。justify-contentは横方向の並び順を指定するプロパティで、space-betweenを指定すればアイテム間のスペースを均等に割り当てます。そのため、2つしかない項目は両サイドによって並べられるのです。 水平方向はこれで大丈夫ですが、垂直方向がまだです。今のままだと上に寄っている状態です。中央に寄せるにはjustify-align: center;を使います。justify-alignでFlexBoxの垂直方向の設定を行います。 See the Pen RwRbMxq by swallow-enginer (@swallow-enginer) on CodePen. 次にナビゲーション内のアイテムも横並びにしましょう。こちらは右端に項目を寄せたいのでjustify-content: flex-end;を使います。このプロパティを使えばアイテムを末尾に寄せることが可能です。 また、アイテムの間隔を空けるためにそれぞれのアイテムにmargin-leftを設定します。 See the Pen oNLvdav by swallow-enginer (@swallow-enginer) on CodePen. リストマークを無効化・リンクの下線の無効化 これでヘッダーのレイアウトの作成が完了しました。次にナビゲーションに表示されているリストマーク（・）を無効化します。 リストマークを無効化するにはlist-style: none;を使います。これを使えばリストについている「・」の表示を無効化できます。 最後はリンクの下線の無効化です。これは、aタグにtext-decoration: none;を設定するだけです。 これでヘッダーの完成です。 See the Pen RwRbyda by swallow-enginer (@swallow-enginer) on CodePen.
list-style: none;
text-decoration: none;
こんなヘッダーを作っていきます。 まず、考えるべきことはレイアウトです。どんなHTMLで構成されているのでしょうか？
<header class="header"> <h1 class="header-title"><a href="#home">ヘッダータイトル</a></h1> <nav class="header-nav"> <ul class="header-nav"> <li class="nav-list"><a href="#about">About</a></li> <li class="nav-list"><a href="#service">Service</a></li> <li class="nav-list"><a href="#contents">Contents</a></li> </ul> </nav> </header>
大きな構成としては「ヘッダータイトル」と「ナビゲーション」の2つ。
そして、特徴的なのはナビゲーション内のそれぞれの項目(アイテム)がリストで構成されていることです。通常のHTMLでリストを表示するとリストマーク(・)が表示されますが、どうやって消すのでしょうか？ また、aタグのリンクによる下線も消されているのも気になります。
まとめると、CSSで実装するために課題となるのは以下の3つです。
まず1つ目は「ヘッダータイトルとナビゲーション」や「ナビゲーション内の項目」を横並びにする方法です。この2つは同じプロパティを設定します。
それはFlexBoxです。FlexBoxとは「Flexible Box Layout Module」の略で、簡単かつ柔軟にレイアウトを組むことができるボックスレイアウトのことです。
このFlexBoxを使うことでそれぞれのアイテムを横に並べることができます。
.header { display: flex; }
このようにFlexBoxを使用します。displayプロパティで指定することでヘッダータイトルとナビゲーションが横に並びます。
しかし、今のままではヘッダータイトルとナビゲーションが左に寄っている状態です。サンプルのヘッダーを見てもらったらわかりますが、それぞれの項目が端に寄っている（タイトルが左端、ナビゲーションが右端）ヘッダーを作りたいのです。
そんな時に使えるのがjustify-content: space-between;です。justify-contentは横方向の並び順を指定するプロパティで、space-betweenを指定すればアイテム間のスペースを均等に割り当てます。そのため、2つしかない項目は両サイドによって並べられるのです。
justify-content: space-between;
justify-content
space-between
水平方向はこれで大丈夫ですが、垂直方向がまだです。今のままだと上に寄っている状態です。中央に寄せるにはjustify-align: center;を使います。justify-alignでFlexBoxの垂直方向の設定を行います。
justify-align: center;
justify-align
See the Pen RwRbMxq by swallow-enginer (@swallow-enginer) on CodePen.
次にナビゲーション内のアイテムも横並びにしましょう。こちらは右端に項目を寄せたいのでjustify-content: flex-end;を使います。このプロパティを使えばアイテムを末尾に寄せることが可能です。
justify-content: flex-end;
また、アイテムの間隔を空けるためにそれぞれのアイテムにmargin-leftを設定します。
margin-left
See the Pen oNLvdav by swallow-enginer (@swallow-enginer) on CodePen.
これでヘッダーのレイアウトの作成が完了しました。次にナビゲーションに表示されているリストマーク（・）を無効化します。 リストマークを無効化するにはlist-style: none;を使います。これを使えばリストについている「・」の表示を無効化できます。
最後はリンクの下線の無効化です。これは、aタグにtext-decoration: none;を設定するだけです。 これでヘッダーの完成です。
See the Pen RwRbyda by swallow-enginer (@swallow-enginer) on CodePen.
概要 Web制作を始めるにあたっての基本です。 HTMLの基本的な書き方についても紹介します。 テキストエディター まずWeb制作を始めるにあたって、HTMLを書いていくためにテキストエディターというアプリケーションが必要となります。 これは制作する上で役に立つ補完機能がたくさん付いているのでダウンロードしてから始めましょう。 Atom、Visual Studio Codeなど、たくさんのテキストエディターがありますが、自分にあった物を見つけるのがいいと思います。 そもそもHTMLとは HTMLとはWebページを作る上で基本となる言語です。(マークアップ言語と言います。) インターネット上にあるたくさんのWebサイトがHTMLを使って作られています。 HTMLを記述してファイルを保存する テキストエディターにコードを記述し、ファイル保存します。 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>タイトル</title> </head> <body> <h1>タイトル1</h1> <p>段落１</p> </body> </html> HTMLのファイル名のルール HTMLのファイル名には拡張子をつける必要があります。 拡張子とは、そのファイルの種類を表す文字列のことで、ファイルの中でピリオドより後ろの部分です。 ex. blog.html HTMLファイルの場合はhtmlと後ろにつけて保存しましょう。 そのファイルを開くと、ウェブブラウザーが立ち上がり、記述した内容が表示されます。
Web制作を始めるにあたっての基本です。 HTMLの基本的な書き方についても紹介します。
まずWeb制作を始めるにあたって、HTMLを書いていくためにテキストエディターというアプリケーションが必要となります。 これは制作する上で役に立つ補完機能がたくさん付いているのでダウンロードしてから始めましょう。 Atom、Visual Studio Codeなど、たくさんのテキストエディターがありますが、自分にあった物を見つけるのがいいと思います。
HTMLとはWebページを作る上で基本となる言語です。(マークアップ言語と言います。) インターネット上にあるたくさんのWebサイトがHTMLを使って作られています。
テキストエディターにコードを記述し、ファイル保存します。
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>タイトル</title> </head> <body> <h1>タイトル1</h1> <p>段落１</p> </body> </html>
HTMLのファイル名には拡張子をつける必要があります。 拡張子とは、そのファイルの種類を表す文字列のことで、ファイルの中でピリオドより後ろの部分です。 ex. blog.html
HTMLファイルの場合はhtmlと後ろにつけて保存しましょう。 そのファイルを開くと、ウェブブラウザーが立ち上がり、記述した内容が表示されます。
課題 iosで input,select,textareaなどの要素をクリックすると下の画像のように拡大表示されてしまう 解決方法 それぞれのタグに下記のcssを追加する input, select, textarea { font-size: initial !important; } 結果 iosではフォントサイズが16px以下のinputやselectタグをクリックすると拡大されてしまう仕様があるため、こちらでフォントサイズを初期化するよう明示してあげます お疲れ様でした！
iosで input,select,textareaなどの要素をクリックすると下の画像のように拡大表示されてしまう
それぞれのタグに下記のcssを追加する
input, select, textarea { font-size: initial !important; }
iosではフォントサイズが16px以下のinputやselectタグをクリックすると拡大されてしまう仕様があるため、こちらでフォントサイズを初期化するよう明示してあげます
お疲れ様でした！
