プログラミング独学日記_5日目

【CSS編】プログラミング独学日記:5日目

こんにちは、アーノ君です!


2日間続けてきたCSS編も今日で最後のチャプターに進むよ。
独学だから進むのはゆっくりと思っていたけど、思った以上にすんなり進めることができているね。

この独学日記では、

  • ドットインストールでの学び・成果の報告
  • NoCodeの学び・成果の報告
  • gitHubに公開した学習プロセスのシェア

この3つを紹介していくよ。

僕はスキル0の初心者ザウルスだから、しばらくはドットインストールでの学びをシェアしていくね。

■ドットインストール:はじめてのCSS (全15回)
 - #11 リストのスタイリングをしていこう
 - #12 align-itemsを使ってみよう
 - #13 セレクタの適用範囲を限定しよう
 - #14 line-heightで行間を調整しよう
 - #15 プロフィールサイトを完成させよう

■GitHub:アーノ君のポートフォリオサイト(5日目)
 - CSS追加・編集
 - 画像の差し替え
 - 文言の修正

■ツイッター:アーノ君@プログラミング・ザウルス🦖

スポンサードサーチ

【プログラミング独学】今日の学び


今日はドットインストールから以下を学んだよ。

  • HTML/CSSの概要を理解しよう:はじめてのCSS
    • #11 リストのスタイリングをしていこう
    • #12 align-itemsを使ってみよう
    • #13 セレクタの適用範囲を限定しよう
    • #14 line-heightで行間を調整しよう
    • #15 プロフィールサイトを完成させよう

この間まで右も左もわからずに独学をはじめた初心者ザウルスの僕が、ついにHTML, CSSの基礎編を終わらせることができたよ!

今日は仕上げということもあって、少しノアに手伝ってもらいながら僕のポートフォリオサイトを作り上げたよ。

プログラミング独学の成果【5日目】

今日で基礎編は最終章。今まで書いてきたプログラミングを全て公開するよ。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>アーノ君のポートフォリオサイト</title>
    <link rel="icon" href="favicon.ico">
    <meta name="description" content="アーノ君のポートフォリオサイトです。">
    <link rel="stylesheet" href="css/styles.css">
  </head>
  <body>
    <header>
      <div class="container">
        <div class="icon">
          <img src="img/ano_02.jpg" width="120" height="120" alt="プロフ写真です">
        </div>
        <div class="info">
          <h1>アーノ君</h1>
          <p>プログラミング独学5日目の恐竜
            <br>
            ドットインストールを見ながらこのポートフォリオサイトを作ってみたよ!
          </p>
          <ul>
            <li>
              <a href="https://www.noahnohakoblog.com" target="_blank">
                <img src="img/blog.png" width="20" height="20" alt="ブログサイトへのリンク画像です。">
              </a>
            </li>
            <li>
              <a href="https://www.twitter.com/j_s_luciano/" target="_blank">
                <img src="img/twitter.png" width="20" height="20" alt="写真サイトへのリンク画像です。">
              </a>
            </li>
          </ul>
        </div>
      </div>
    </header>

    <section class="works">
      <!-- 作品紹介 -->
      <h1>WORKS</h1>
  
      <section>
        <h1>ドットインストール</h1>
          <a href="https://dotinstall.com/" target="_blank"><img src="img/di_logo.png" width="268" height="48" alt="ドットインストールのロゴ"></a>
            <p>こちらのポートフォリオサイトはドットインストールを見ながら作成したよ!完全初心者の僕でもこうして形にすることができて、独学中のみんなにおすすめだよ。
            <br>ちなみにこのポートフォリオサイトは5日で作れたよ。</p>
      </section>
      <section>
        <h1>NoCode</h1>
          <a href="https://www.wix.com/" target="_blank"><img src="img/wix_logo.png" width="123" height="48" alt="WiXのロゴ"></a>
            <p>ドットインストールの学びに区切りがついたら、NoCodeを勉強してみるつもりだよ。人間界で流行っているんでしょ?恐竜だけど頑張ってスキルを身に付けたいんだ!</p>
      </section>
      <section>
        <h1>GitHub</h1>
          <a href="https://github.com/" target="_blank"><img src="img/gh_logo.png" width=200 height="60" alt="GitHubのロゴ"></a>
           <p>プログラミング独学日記を公開と同時に、僕の作ったサイトをGitHubに載せていくよ。そのURLも日記(ブログ)に公開しているから、ぜひそのページもチェックしてみてね。</p>
      </section>
    </section>

       <footer>
         <p>©︎ J.S.Luciano All Rights Resereved.</p>
       </footer>
  </body>
</html>
body{
  color: #333;
  font-family: verdana, sans-serif;
  margin: 0;
}

header{
  background-color: #efefef;
  padding-top: 32px;
  padding-bottom: 32px;
}

.container{
  /* background-color: pink; */
  width: 400px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
}

.icon{
  /* background-color: skyblue; */
}

.icon img{
  border-radius: 50%;
  border-width: 1px;
  border-style: dotted;
  border-color: #2d2d2d;
}

.info{
  /* background-color: tomato; */
  margin-left: 32px;
}

.info h1{
  font-weight: normal;
  font-size: 24px;
  margin: 0;
}

.info p{
  margin: 0;
  margin-bottom: 16px;
  line-height: 1.7;
}

.info ul{
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.info ul li{
  margin: 8px;
}

.works{
  width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.works > h1{
  font-weight: normal;
  font-size: 24px;
  text-align: center;
  margin-top: 60px;
  margin-bottom: 60px;
}

.works > section{
  margin-bottom: 60px;
}

.works > section > h1{
  /* font-weight: normal; */
}

.works p{
  line-height: 1.8;
}

footer p{
  text-align: center;
  font-size: 14px;
  margin-bottom: 60px;
  color: gray
}


最後の総仕上げということで、細部の設定が少し多かった印象だよ。
だんだん慣れてきたのもあって、昨日より簡単に感じたのが嬉しかったな!

画像や文字を画面中央に寄せるだけで印象がものすごく変わるのが面白かったよ。下のサイトを比較してみよう!

■前回:アーノ君のポートフォリオサイト(4日目)
■今回:アーノ君のポートフォリオサイト(5日目)


画像を差し替えるだけで、本物っぽく見えちゃうね!

ちなみに”flex box”という言葉が頻繁に出てきたから、もしかするとこれからよく使うことになるプログラミング・ワードなのかもしれない…

この5日間でプログラミング用語と少し仲良くなれたかな。
はじめの頃より抵抗がなくなってきたよ。

アーノ君の所見

今日の詳しい学びはこちらだよ。

  • 新しいプロパティについて
    • align-items: center;
    • line-height: 数値;
  • セレクタの選択範囲について


今回は新しく2つのプロパティについて学んだよ。

1つは指定した範囲を中央に揃えるもの。
もう1つは、行の幅を指定の数値に揃えるもの。

どちらも、サイトの見栄えを良くしてあげる時には必要不可欠なものだから、ドットインストールでも1チャプターを使ってしっかり解説がされていたよ。

【これだけは知っておきたい】プログラミンング独学のポイント

今日学んだ言葉の中で「〇〇の直下の階層」というフレーズがあったよ。
直下?階層?僕にはさっぱり、お兄さんが何を言っているのかわからなかった!

でも、HTMLを見ながら動画を進めると理解ができたよ。下のHTMLで解説すると、

    <section class="works">
      <!-- 作品紹介 -->
      <h1>WORKS</h1>

        <!-- ここから -->  
        <section>
          <h1>ドットインストール</h1>
        </section>

        <section>
          <h1>NoCode</h1>
        </section>

        <section>
          <h1>GitHub</h1>
        </section>
        <!-- ここまで -->

    </section>

「ここから」「ここまで」に囲われた3つの<section>(6〜16行)は1〜19行の大きな<section>に囲まれているのがわかるね。この場合、3つの<section>たちは別のフロアに分かれていることになるんだ。

ここで3行目の<h1>だけにCSSを加えたい場合、大きな<section class=”works”>と同じフロアにいる、つまり「直下の階層」にいるものだけを指定するために不等号記号 “>”が使われるんだ。

CSSで表現すると、次のようになるよ。

.works > h1{

}

こうすることで「WORKS」だけにCSSを指定してあげることができるんだ。
言葉に惑わされないようにする注意が必要かもしれないね!

スポンサードサーチ

次回予告

HTML, CSSの基礎編が5日で終わっちゃうなんて、プログラミングの独学は思った以上に順調そうだぞ!

明日からは「はじめてのJavaScript (全11回)」のセクションに進んでいくよ。

またまた出てくる新しい言葉、「JavaScript」ってなんなんだ?
楽しみだねー!

✅今日のおさらい

■ドットインストール:はじめてのCSS (全15回)
 - #11 リストのスタイリングをしていこう
 - #12 align-itemsを使ってみよう
 - #13 セレクタの適用範囲を限定しよう
 - #14 line-heightで行間を調整しよう
 - #15 プロフィールサイトを完成させよう

■GitHub:アーノ君のポートフォリオサイト(5日目)
 - CSS追加・編集
 - 画像の差し替え
 - 文言の修正

■ツイッター:アーノ君@プログラミング・ザウルス🦖

ぜひ、ツイッターもフォローして一緒に頑張ろうね!


初心者ザウルスが独学でプログラミングをマスターするまで、あと95日。

関連記事