# ググる！勉強会：HTML、CSS編【第１回】 本日は、ググる！勉強会にお越しくださいましてありがとうございます。 ## 本勉強会の目的 「実際にプログラミングしながら、ソフトウェア開発に必要なググり力(Google検索力)を身につけることです。」 第一回では、ここまで作ります。 ![](https://i.imgur.com/EbUM0ji.png) 下の空白部分は、第二回の「JavaScript」編で作ります。 **注：本勉強会では、ググり方のテクニックを詳しく取り扱いません。** **検索するための考え方を勉強します。** <u>Google検索の詳細</u>については、 雑談チャンネルで福田君が紹介している以下の記事が非常に参考になります。 [![](https://i.imgur.com/9MXDveh.png)](https://www.sejuku.net/blog/879) ## Webサイトを構成する言語について ### HTML ![](https://i.imgur.com/htJVhgu.png) HTMLは、Webページの**文書の各部分が、 どのような役割を持っているのかを示す**(マークアップする)ための言語です。 例えば、見出し・段落など、 文書の中で各部分が果たしている役割が分かるように目印をつけます。 ### CSS ![](https://i.imgur.com/v7CCvvT.png) CSSは、HTMLに色や大きさや背景などを加えて見栄えを良くするための言語です。 ## HTMLタグの説明 これはタグではありませんが、ブラウザにHTMLで書いていることを宣言します。 ``` <!DOCTYPE html> ``` `head`タグは**htmlファイルの概要**を表します。 `head`タグ内に内容(文字や画像)を表示させることは出来ません。 ```htmlmixed= <head> <title>ググる！勉強会！</title> </head> ``` `title`タグで、サイトのタブの名前を決められます。 ![](https://i.imgur.com/YCHlsDG.png) ## オンラインエディタ「liveweave」を使いコーディング ### オンラインエディタ「**[liveweave](https://liveweave.com/)**」 ### HTMLで内容を表示させていく！ `body`タグは、実際にWebページに**表示される内容**を表します。 `h1`は、大きな**見出し**を作るためのタグです。 `h5`まであり、数字が大きくなるごとに大きさが小さくなります。 `p`タグは、**段落を表す**タグです。 文章を書くときに使います。 モダンなWebサイトでは、全てに`p`タグを使い、文章の空白をとり、見やすくするケースが多いです。 `html`タグで**全てのタグを囲みます** ブラウザにhtmlで書かれていることを示します。 以上のことを踏まえて、下のHTMLをコピー＆ペーストします。 ```htmlmixed= <!DOCTYPE html> <html> <head> <title>HTML, CSS and JavaScript demo</title> </head> <body> <h1>ググる！勉強会！</h1> <p>Webページには、様々な技術が使われています。</p> <p>この勉強会では、HTML、CSS、JSなどの言語を使い、</p> <p>１からWebサイト公開までの工程を体験できます。</p> </body> </html> ``` ![](https://i.imgur.com/nDUndU4.png) ## CSSで背景に色をつけてみます。 Google検索では、 「**背景**」と「**やりたいこと**」 を単語に分解して検索します。 ``` 【背景】 CSSを使っている 【やりたいこと】 背景に色を付ける ``` [![](https://i.imgur.com/G6svgep.jpg)](https://www.youtube.com/watch?v=nwW4CDGucVs) とにかく検索してみましょう:mag: ``` css　背景 色 ``` **[Material Design Colors](https://www.materialui.co/colors)** から適当な色を選ぶと目に優しい配色ができます。 [![](https://i.imgur.com/RrPKROK.png)](https://www.materialui.co/colors) HTMLの`<p></p>`、pタグに色を付けます。 ```css= p { background-color: #303F9F; } ``` しかし、上記の方法で背景に色を付けた場合、 シマシマ模様になってしまいます。 そこで、**タグをグループ化する**(まとめる)タグ、 `div`タグを使います。 ```htmlmixed= <body> <div> <h1>ググる！勉強会！</h1> <p>Webページには、様々な技術が使われています。</p> <p>この勉強会では、これらの言語を使い、</p> <p>１からWebサイト公開までの工程を体験できます。</p> </div> </body> ``` CSSで`color`は**文字の色**になります。 ```css= div { background-color: #303F9F; color: white; } ``` ## 背景に隙間ができる 検索キーワード ``` css 背景　隙間 ``` ブラウザがもともと余白を作っているようです。 「リセットCSS」と検索すると、 さらに余白や文字の太さまでをきれいに消すためのテンプレートが出てきます。 ```css= body { margin: 0; padding: 0; } ``` ## 文字を中央に寄せたい 検索キーワード ``` css 文字　中央 ``` `text-align: center;`を付け加えます。 ```css= div { background-color: #303F9F; color: white; text-align: center; } ``` ## タイトルの背景の色を変えたい 先程のように`text-align:center;` をつけるのですが、ひと工夫必要です。 この場合、タイトルの`h1`タグに「**属性**」をつけると簡単です。 CSSには、「`class`」と「`id`」という２種類の**属性** が存在します。 この属性をHTMLのタグの中に書き込みCSSに認識させます。 :::info 「**class**」は、**複数回**使えるため、使い回したい要素に適用します。 「**id**」は、**１回しか使えない**ため、１つだけにしか適用したくない場合に使います。 ::: HTML ```htmlmixed= <body> <div> <h1 class="title-class">ググる！勉強会！</h1> <p>Webページには、様々な技術が使われています。</p> <p>この勉強会では、HTML、CSS、JSなどの言語を使い、</p> <p>１からWebサイト公開までの工程を体験できます。</p> </div> </body> ``` `font-size`で文字の大きさを決められます。 CSS ```css= .title-class { text-align: center; color: #303F9F; font-size: 50px; background-color: white; } ``` 文字を中央にすると同時に、 背景を白色にしてみました。 :::info 「**class**」では、`.`+クラス名 をつけることでCSSが反映されます。 「**id**」は、`#`をつけます。 ::: ## タイトル(文字)の上下の余白を設ける 検索キーワード ``` css 文字　上下　余白 ``` `line-height: 100px;` を使います。 CSS ```css= .title-class { line-height: 100px; text-align: center; color: #303F9F; font-size: 50px; background-color: white; } ``` ## 画像を表示してみる 検索キーワード ``` html 画像　表示 ``` ```html= <img src="https://i.imgur.com/L11kB5t.jpg"> ``` ```htmlmixed= <body> <div> <h1 class="title-class">ググる！勉強会！</h1> <p>Webページには、様々な技術が使われています。</p> <p>この勉強会では、HTML、CSS、JSなどの言語を使い、</p> <p>１からWebサイト公開までの工程を体験できます。</p> <img src="https://i.imgur.com/L11kB5t.jpg"> </div> </body> ``` :::warning :bell: 画像(`img`タグ)を直接`text-align:center;`で中央に寄せることはできません。 そのため、`div`などのタグで囲んであげる事で、中央に配置できます。 ::: ## 全体の背景の色を変えたい 検索キーワード ``` css　全体　背景　色 ``` ```css= body { margin: 0; padding: 0; background-color: white; } ``` `background-color`でもOK！ ## 青い背景の高さを指定したい ＝ `div`要素の高さを指定したい 検索キーワード ``` css 要素　高さ ``` ```css= div { background-color: #303F9F; color: white; text-align: center; height: 500px; } ``` :::info 高さの単位は`px`だけでなく、`%`や、ブラウザの高さ(ビューポート)の高さに対する割合`vh`もあります。 ::: ## 全コード ### HTML ```htmlmixed= <!DOCTYPE html> <html> <head> <title>HTML, CSS and JavaScript demo</title> </head> <body> <div> <h1 class="title-class">ググる！勉強会！</h1> <p>Webページには、様々な技術が使われています。</p> <p>この勉強会では、HTML、CSS、JSなどの言語を使い、</p> <p>１からWebサイト公開までの工程を体験できます。</p> <img src="https://i.imgur.com/L11kB5t.jpg"> </div> </body> </html> ``` ### CSS ```css= div { background-color: #303F9F; color: white; text-align: center; height: 500px; } .title-class { line-height: 100px; text-align: center; color: #303F9F; font-size: 50px; background-color: white; } body { margin: 0; padding: 0; background-color: white; } ``` ![](https://i.imgur.com/ZacY7nd.jpg) 下の部分が寂しいですが、 次回の第２回JavaScript編でコンテンツを作ります。 JavaScript(JS)が使えると、下図のような画像スライダーが実装できたりします。 ![](https://i.imgur.com/4flAKPT.png) 最後にアンケートにご協力ください。 デザインでやりたいことがわからないよ！ そんな人のために [MUUUUU.ORG](https://muuuuu.org/) [![](https://i.imgur.com/kHycg2l.png)](https://muuuuu.org/) [SANKOU!　Webデザインギャラリー・参考サイト集](https://sankoudesign.com/) [![](https://i.imgur.com/hvnio91.png)](https://sankoudesign.com/) ## 最後にアンケートにご協力ください ### [ググる！勉強会：第１回アンケート](https://forms.gle/mgBfL6gNYF336zUq6) 以上で、ググる！勉強会の第１回：HTML、CSS編を終わります。 **ありがとうございました。**