新卒　研修４日目　HTML,CSSでカレンダー作成・JavaScript基礎

いつでもこんばんは。

２分で読み終わります。

今日はHTML,CSSを使って、カレンダーを作成しました。 table, tr, tdを使って作成しました。

昨日までの３日間、HTMLとCSSの課題に取り組んだので、それを踏まえて作成しました。本ブログでは積極的に恥を晒していこうと思うので、ソースコードも載せちゃいます。 div, tableを使って作成しました。

カレンダーお手本はこちら f:id:kawano-fusic:20180406232938p:plain

作成したものがこちら f:id:kawano-fusic:20180406233955p:plain

ソースは以下 ※html, css共に一部抜粋

      <div class="april">
        <span class="fs70">4</span><br>
        <span class="fs30">2018</span><br>
        <span class="fs15">平成30年</span><br>
        <span class="fs20">April</span><br>
        <span class="fs10">卯月</span><br>
      </div>
      <table class="hako">
          <tr class="days">
            <td class="date">mon</td>
            <td class="date">tue</td>
            <td class="date">wed</td>
            <td class="date">thu</td>
            <td class="date">fri</td>
            <td class="date sat">sat</td>
            <td class="date sun">sun</td>
          </tr>
          <tr class="line0">
            <td class="date">26</td>
            <td class="date">27</td>
            <td class="date">28</td>
            <td class="date">29</td>
            <td class="date">30</td>
            <td class="date sat">31</td>
            <td class="date sun">1</td>
          </tr>
          <tr class="line1">
            <td class="date">2</td>
            <td class="date">3</td>
            <td class="date">4</td>
            <td class="date">5</td>
            <td class="date">6</td>
            <td class="date sat">7</td>
            <td class="date sun">8</td>
          </tr>

CSSは以下

  height: 700px;
  width: 800px;
}

body {
  height: 100%;
  width: 100%;
}

.kakoi {
  height:100%;

}

.april {
  float: left;
  height: 100%;
  width: 12.5%;
  color: white;
  text-align: center;
  background-color: blue;
}

.date {
  width: 100px;
  height: 100px;
  vertical-align: top;
  text-align: left;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
}


/*
 一番上の曜日が書いてある行の文字を,bottomに表示したい
 右の線を消したい
*/
.days > td {
  vertical-align: bottom;
  border-right-style: none;
  height: 30px;
  text-align: left;
}

今日知ったのは、.css内の .days > tdのように、daysクラス内のtdタグという風に限定してプロパティを指定できることです。

また、.css内のaprilクラスでfloat: left;を与えていますが、これはどこかで回り込み解除する必要があるんですね。

そうでないと、永遠に右側にブロックが回り込み続けてしまうと・・。

先輩から指導いただきました。

いろんなルールがありますが、とりあえず今は情報の嵐を浴びまくってコード書いて慣れるしかないと思ってます。再度同じような課題に出会った時に思い出せるようにしとくためにも、復習&アウトプットしないとなぁ。たつを。

あっ、JavaScriptについてはまた更新します。。

p.s.

うちの会社は天神にあるのですが、天神駅で降りて歩いて４分で着いちゃうのでそれはもうラクなんです。

今日も雨が降ってましたが、天神地下街から出て２分ほどだからあまり濡れずに済むんです。

ただ、雨の日は満員電車なんですねぇ。。１０分しか乗らなくて良いのでマシですが。ポジション取りをミスったら圧死します。天神で働きたい人は体幹を鍛えましょうね。

webエンジニア1年目でございます

気が向いたら更新するやつ

新卒　研修４日目　HTML,CSSでカレンダー作成・JavaScript基礎