nekosiestr | 猫先生！？がプログラミングをガリ勉してみた。

ドットインストールWeb制作関連とGoogle提供ツールの無料レッスンの学習ノート

この記事では、プログラミング学習コンテンツのドットインストールでHTML、CSS、JavaScript、PHP、Googleが提供するツールのレッスンの学習記録を掲載していきます。現在私はプレミアム会員（有料会員）ですが、未登録の方でも視聴できる無料のレッスンに関して、自分自身の復習も兼ねてまとめました。

トップページに戻る
プログラミングの疲れ目対策と視力維持に向けて
自己紹介ページ

● Web制作関連

はじめてのWeb制作（HTML/CSS）
はじめてのJavaScript
はじめてのPHP

● Googleが提供するツール

マテリアルアイコン入門
Google Charts入門
Google Maps API入門
JavaScriptで学ぶFirebase入門
Google Chrome拡張機能入門
Chrome Developer Tools入門
Google Apps Script 入門
Google Fonts 入門

プログラミングのアンケートにご協力頂ける方はこちらのフォームで勉強法など色々と教えて下さい。

トップページに戻る
プログラミングの疲れ目対策と視力維持に向けて
自己紹介ページ

#11 背景画像を敷いてみよう(最終回)（ドットインストール無料レッスンHTML/CSS 「はじめてのWeb制作」）

この記事では、ドットインストールの無料レッスンの中で、HTML、CSSの基礎の基礎を体験しながらWebサイト制作の流れを学べるレッスンの学習ノートを記録しています。全11回分のレッスンはじめてのWeb制作で、HTMLとCSSが学べます。
また、学んだことを元に、自分でもアレンジを加えて行こうと思います。

レッスン動画はこちらです。

はじめてのWeb制作（HTML /CSS）に戻る
ドットインストール無料レッスンのページへ
トップページに戻る
プログラミングの疲れ目対策と視力維持に向けて
自己紹介ページ

このレッスンの完成版は、こちらより確認できます。https://nekofolio.com/dotinstall/htmlcss/lesson11/index.html

今回は、サイトの枠で囲った領域に、背景画像を敷いて行きます。
背景画像なので、imgではなくcssで指定して行きます。
cssのsectionの1番下に追記します。

background-image: url(背景画像のURLをここに指定)

ドットインストールの実行環境のアイコンから、ファイル構成を確認します。background.pngを使うので、コピーして使います。
先ほどのurl（背景画像のURLをここに指定）の中に貼り付けます。

section{
     border-width: 1px;
     border-color: gray;
     border-style: solid;
     border-radius: 8px;
     padding: 16px;
     margin-bottom: 8px;
     background-image: url(background.png);
   }

ブラウザで確認します。

背景画像が敷かれていました。

Web制作の流れは、HTMLは文章の意味をコンピューターに伝え、スタイルを整えるためにCSSのセレクターとプロパティを使います。

ここまでの全コードです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>My Site</title>
  <style>
    img{
      border-radius: 50%;
    }
    section{
      border-width: 1px;
      border-color: gray;
      border-style: solid;
      border-radius: 8px;
      padding: 16px;
      margin-bottom: 8px;
      background-image: url(background.png);
    }
    body{
      text-align: center;
    }
  </style>
</head>
<body>
  <section>
    <img src="icon.png" alt="太郎のアイコン画像です">
    <h1>山田太郎</h1>
    <p>UI/UXデザイナー見習いです。日々の勉強、がんばっています。</p>
  </section>
  
  <footer>(c) dotinstall.com</footer>
</body>
</html>

お疲れ様でした。

プログラミングのアンケートにご協力頂ける方はこちらのフォームで勉強法など色々と教えて下さい。

←前回のレッスン

#10 画像やテキストを中央揃えにしよう（ドットインストール無料レッスンHTML/CSS 「はじめてのWeb制作」）

レッスン動画はこちらです。

このレッスンの完成版は、こちらより確認できます。https://nekofolio.com/dotinstall/htmlcss/lesson10/index.html

今回はこのサイトの画像やテキストを中央揃えにします。
そこで、<section>や<footer>に、中央揃えのプロパティを設定します。

body{
     text-align: center;
   }

ブラウザで確認します。

中央揃え出来ました。

ここまでの全てのコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="utf-8">
 <title>My Site</title>
 <style>
   img{
     border-radius: 50%;
   }
   section{
     border-width: 1px;
     border-color: gray;
     border-style: solid;
     border-radius: 8px;
     padding: 16px;
     margin-bottom: 8px;
   }
   body{
     text-align: center;
   }
 </style>
</head>
<body>
 <section>
   <img src="icon.png" alt="太郎のアイコン画像です">
   <h1>山田太郎</h1>
   <p>UI/UXデザイナー見習いです。日々の勉強、がんばっています。</p>
 </section>
  <footer>(c) dotinstall.com</footer>
</body>
</html>

お疲れ様でした。

プログラミングのアンケートにご協力頂ける方はこちらのフォームで勉強法など色々と教えて下さい。

←前のレッスン 次のレッスン（最終回）→

#09 余白を設定してみよう（ドットインストール無料レッスンHTML/CSS 「はじめてのWeb制作」）

レッスン動画はこちらです。

このレッスンの完成版は、こちらより確認できます。https://nekofolio .com/dotinstall/htmlcss/lesson9/index.html

枠線の内側に余白を設定します。
padding: 16px;で、枠線の「内側に」余白を設定しました。
8の倍数にすると、ウェブサイトが綺麗になる様です。

sectionの1番最後に、paddingを指定しました。

section{
     border-width: 1px;
     border-color: gray;
     border-style: solid;
     border-radius: 8px;
     padding: 16px;
   }

ブラウザで、余白を確認します。

コピーライト表記が、枠にくっつきすぎているのでそれを修正します。
枠の外に「下方向だけ」余白を付けます。

先ほどのpaddingの下に、「margin-bottom」というプロパティを追記しました。

section{
     border-width: 1px;
     border-color: gray;
     border-style: solid;
     border-radius: 8px;
     padding: 16px;
     margin-bottom: 8px;
   }

ブラウザで確認すると、枠線とコピーライトの間に8pxの余白が出来ました。

ここまでの全てのコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="utf-8">
 <title>My Site</title>
 <style>
   img{
     border-radius: 50%;
   }
   section{
     border-width: 1px;
     border-color: gray;
     border-style: solid;
     border-radius: 8px;
     padding: 16px;
     margin-bottom: 8px;
   }
 </style>
</head>
<body>
 <section>
   <img src="icon.png" alt="太郎のアイコン画像です">
   <h1>山田太郎</h1>
   <p>UI/UXデザイナー見習いです。日々の勉強、がんばっています。</p>
 </section>
  <footer>(c) dotinstall.com</footer>
</body>
</html>

お疲れ様でした。

プログラミングのアンケートにご協力頂ける方はこちらのフォームで勉強法など色々と教えて下さい。

←前のレッスンへ 次のレッスンへ→

#08 コピーライト表記を追加しよう（ドットインストール無料レッスンHTML/CSS 「はじめてのWeb制作」）

レッスン動画はこちらです。

このレッスンの完成版は、こちらより確認できます。https://nekofolio.com/dotinstall/htmlcss/lesson8/index.html

今回は、「コピーライト」を「フッタータグ」の中に追加します。
フッタータグを追加する場所は、bodyタグ内の1番下です。
</body>のすぐ上になります。

追記したコードです。

<footer>(c) dotinstall.com</footer>

ブラウザで確認しました。

次は、このコピーライトを枠線の外に付けます。
その場合、「フッター以外を」1つのかたまりにして、フッターと区別してから枠線を付けます。

HTMLでは、それらの意味のあるタグに対して汎用的に使える「section」というタグがあるので、それを使います。
sectionタグを、bodyタグ内の1番上に書いて行きます。
sectionタグの中に、フッター以外の要素をカット＆ペーストします。

<section>
   <img src="icon.png" alt="太郎のアイコン画像です">
   <h1>山田太郎</h1>
   <p>UI/UXデザイナー見習いです。日々の勉強、がんばっています。</p>
 </section>

インデント（字下げ）を修正しました。

bodyにつけていたスタイルをsectionに付けるように、styleタグ内のbodyをsectionに書き換えます。

section{
     border-width: 1px;
     border-color: gray;
     border-style: solid;
     border-radius: 8px;
   }

ブラウザで確認します。

コピーライト表記が枠の下になりました。

お疲れ様でした。

プログラミングのアンケートにご協力頂ける方はこちらのフォームで勉強法など色々と教えて下さい。

←前のレッスン 次のレッスン→

#07 要素に枠線を付けてみよう（ドットインストール無料レッスンHTML/CSS 「はじめてのWeb制作」）

レッスン動画はこちらです。

このレッスンの完成版は、こちらより確認できます。https://nekofolio.com/dotinstall/htmlcss/lesson7/index.html

今回は、太郎くんの画像と名前と紹介文の全体に、太さ1pxの枠線を付けて行きます。これらを囲っているのがbodyタグなので、bodyにスタイルを当てて行きます。前回のレッスンのimg{ }の下に、body{　}を追記します。

設定するのは、
・枠線とその太さ1px
・枠線の色gray
・枠線のスタイルを実線
・枠線の丸めを8px

の4つのプロパティを設定して行きます。

枠の太さを指定するborder-widthというプロパティを書きます。

枠線を付けるには、色やスタイルも付ける必要があるので、追記して行きます。
色はborder-colorプロパティで指定して、色はgrayとします。

枠線のスタイルは実線にするので、border-styleプロパティで、
プロパティの値をsolid（実線）と指定します。

枠線を丸めることも出来るので今回は8pxで丸めて見ます。
border-radiusのプロパティの値を8pxにしました。

注意！複数のプロパティを指定した場合は、全ての行の末尾に「セミコロン」が付いていることを確認する。

今回追記したコードです。

body{
     border-width: 1px;
     border-color: gray;
     border-style: solid;
     border-radius: 8px;
   }

ブラウザで確認します。

この様に、グレーの丸囲み線が付きました。
この値を変えれば、見た目も変わるので、ちょっと実験してみます。

・枠線の太さを5pxに
・枠線の色を紫に
・枠線を点線に
・枠線の丸めを20pxに

ここまで変えれば、だいぶ見た目も変わるでしょう。
私は点線にするやり方が分からないので、検索して調べてみます。

こちらのHTMLタグリファレンスを使ってみます。
検索ボックスに「点線」と入れると、こちらのサイトが見付かりました。
どうやら、「dotted」を使うみたいです。
他にも二重線とか、破線とか、立体的な線とかあるみたいですね。

では、この様に設定しました。

body{
     border-width: 5px;
     border-color: purple;
     border-style: dotted;
     border-radius: 20px;
   }

ブラウザで確認すると

なんか、ケバいですね。
元に戻します。

ここまでのコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="utf-8">
 <title>My Site</title>
 <style>
   img{
     border-radius: 50%;
   }
   body{
     border-width: 1px;
     border-color: gray;
     border-style: solid;
     border-radius: 8px;
   }
 </style>
</head>
<body>
 <img src="icon.png" alt="太郎のアイコン画像です">
 <h1>山田太郎</h1>
 <p>UI/UXデザイナー見習いです。日々の勉強、がんばっています。</p>
</body>
</html>

お疲れ様でした。

←前のレッスン 次のレッスン→

#06 画像の角を丸めよう（ドットインストール無料レッスンHTML/CSS 「はじめてのWeb制作」）

レッスン動画はこちらです。

このレッスンの完成版は、こちらより確認できます。https://nekofolio.com/dotinstall/htmlcss/lesson6/index.html

今回のレッスンでは、画像を丸くするために、cssのstyleタグを<title>My Site</title>の下のheadタグ内に書いていきます。

cssでは、

・セレクタ（img）の後に波括弧
・プロパティ（border-radius）の後にコロン
・プロパティの値（50%）の後にセミコロン

を付けること。

注意として、

border-radius: 50%;

の、「:」と「50%」の間に、「半角スペース」も入る様にすることです。

そうしなかったので、ドットインストールの「お手本と比較」で赤いチェックが付いてしまいました。

これについては、VS Codeでは候補から選ぶと自動で半角空白が付いてきてくれるので、ドットインストールの実行環境を使うときは注意ですね。

追記したコードです。

<style>
   img{
     border-radius: 50%;
   }
 </style>

これで、このようにブラウザでも反映されて、太郎くんの画像が丸くなりました。

ここまでの全コードです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>My Site</title>
  <style>
    img{
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <img src="icon.png" alt="太郎のアイコン画像です">
  <h1>山田太郎</h1>
  <p>UI/UXデザイナー見習いです。日々の勉強、がんばっています。</p>
</body>
</html>

お疲れ様でした。

プログラミングのアンケートにご協力頂ける方はこちらのフォームで勉強法など色々と教えて下さい。

←前のレッスン 次のレッスン→

#05 CSSについて理解しよう（ドットインストール無料レッスンHTML/CSS 「はじめてのWeb制作」）

レッスン動画はこちらです。

#05 CSSについて理解しよう

このレッスンの完成版は、こちらより確認できます。
（今回のレッスンではコードは無かったのですが、分かる範囲で作って見ました。）https://nekofolio.com/dotinstall/htmlcss/lesson5/index.html

画像の角を丸めるCSSについて

img{

border-radius:20%

}

imgをセレクタ
border-radiusをプロパティ
20%をプロパティの値という様なので、頑張って覚えます。

この、プロパティ値である20%の数値を変えて50%にすると、画像が正円になるということで、早速VS Codeで作って見たいと思います。

仮のCSSファイルを「style.css」にしました。
VS Codeで「link」と入力すると、候補からcssが選べるので、この様な1行が加わりました。

どこに書いたら良いのかわからないので、多分ここかな、と思った、<title>My Site</title>の下のheadタグ内部に書いて見ました。
これで合っているのかな・・・？

<link rel="stylesheet" href="style.css">

このstyle.cssにリンクが貼られているので、そちらにカーソルを当てて、「リンク先を表示」を選ぶと、

この様なボックスをが出るので「ファイルを作成」をクリックすると、
自動的にcssファイルが作られます。

そこに、先ほどのコードを書いていくと、

img{
   border-radius:20%
}

このように書けました。
一旦整理すると、imgがセレクタ、border-radiusがプロパティ、20%がプロパティの値ということですね。

ブラウザで確認してみます。

良かった。CSSがちゃんと反映されていました。
プロパティの値を20%から50%にしてみると、

こんな感じになりました。
数値は元の20%に戻しておきます。

今回作成したindex.htmlのコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="utf-8">
 <title>My Site</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <img src="icon.png" alt="太郎のアイコン画像です">
 <h1>山田太郎</h1>
 <p>UI/UXデザイナー見習いです。日々の勉強、がんばっています。</p>
</body>
</html>

お疲れ様でした。

プログラミングのアンケートにご協力頂ける方はこちらのフォームで勉強法など色々と教えて下さい。

←前のレッスンへ 次のレッスンへ→

#04 プロフィール画像を配置しよう（ドットインストール無料レッスンHTML/CSS 「はじめてのWeb制作」）

レッスン動画はこちらです。

このレッスンの完成版は、こちらより確認できます。

https://nekofolio.com/dotinstall/htmlcss/lesson4/index.html

今回は画像も使うので、学習用フォルダーにダウンロードしました。

ドットインストールのブラウザ上の実行環境のindex.htmlタブの左側のリストのアイコンからファイル構成が確認出来ましたので、自分の環境で動作させるのに、index.htmlがあるフォルダーと同じ場所に画像を入れました。

（imgなどのフォルダに入れるのかな・・・と思ったのですが、今回はindex.htmlと同じ所でした。）

太郎くんの画像を表示させるには、h1タグの上にimgタグで画像ファイルを指定します。imgタグには終了タグはありません。

タグの中に書き込む情報をタグの属性と言います。
imgタグには、altという属性を指定して、画像の情報を書くのが一般的です。

altで説明を書くと、何らかの事情で画像が表示されない時や視覚に障害のある方に音声読み上げなどをしてくれます。

h1タグの上に追記した画像を表示させるコードです。

<img src="icon.png" alt="太郎のアイコン画像です">

このコードを追記したら、この様に表示されました。

ここまでの全コードです。

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="utf-8">
 <title>My Site</title>
</head>
<body>
 <img src="icon.png" alt="太郎のアイコン画像です">
 <h1>山田太郎</h1>
 <p>UI/UXデザイナー見習いです。日々の勉強、がんばっています。</p>
</body>
</html>

お疲れ様でした。

次回からCSSが始まります。

プログラミングのアンケートにご協力頂ける方はこちらのフォームで勉強法など色々と教えて下さい。

←前のレッスンへ 次のレッスンへ→

#03 見出しと段落を配置しよう（ドットインストール無料レッスンHTML/CSS 「はじめてのWeb制作」）

レッスン動画はこちらです。

このレッスンの完成版は、こちらより確認できます。

https://nekofolio.com/dotinstall/htmlcss/lesson3/index.html

今回は、bodyタグの中に、サイトで表示したい内容を書いて行きます。
タブキーで字下げしています。

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="utf-8">
 <title>My Site</title>
</head>
<body>
 <h1>山田太郎</h1>
 <p>UI/UXデザイナー見習いです。日々の勉強、がんばっています。</p>
</body>
</html>

表示をブラウザで確認します。