一緒に作ろうHTML(カレンダー作成)

website
2019.06.17

この記事はhtmlとcssを勉強し始めたばかりの人に送るWebsite作成記事だ。カレンダーを作成していくことによってhtmlとcssを学べる作りになっている。
ではさっそくやっていこう。

準備編

1.まずはデスクトップに新規フォルダを作成する。名前はCalendarでいいだろう。
2.Calendarフォルダの中にcssフォルダ、imagesフォルダを作成する。
3.画像をダウンロードしてimagesフォルダに格納する。
4.cssフォルダの中にmain.cssを作成する。

マークアップ

5.Calendarフォルダの直下に以下のようにindex.htmlを文字コードutf-8で作成する。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>6月カレンダー</title>
  </head>
  <body>

  </body>
</html>

6.YUIライブラリのreset.cssとmain.cssをindex.htmlから読み込めるように2行追記する。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>6月カレンダー</title>
    <!--ここを追記-->
    <link rel="stylesheet"  href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
    <link rel="stylesheet"  href="css/main.css">
    <!--ここまで-->
  </head>
  <body>

  </body>
</html>

7.コンテンツ全体をブラウザの中央に配置したい。そのためにコンテンツ全体を包むdiv要素を作ろう。今回はidとしてcontainerを付与している。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>6月カレンダー</title>
    <link rel="stylesheet"  href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
    <link rel="stylesheet"  href="css/main.css">    
  </head>
  <body>
      <!--ここを追記-->
    <div id="container">
      
    </div><!-- end container-->
    <!--ここまで-->
  </body>
</html>

8.コンテナの中に見出し、画像、カレンダーとなるテーブルを作成していく。テーブルは項目が多いがうまくコピペを利用して作成してほしい。
Atomなどの高機能エディタを利用しているとこういった作業がぐっと楽にになる。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>6月カレンダー</title>
    <link rel="stylesheet"  href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
    <link rel="stylesheet"  href="css/main.css">
  </head>
  <body>
    <div id="container">
    <!--ここを追記-->
     <h1>令和元年6月のカレンダー</h1>
     <img src="images/june.jpg" alt="6月の画像" />
     <table border="1">
       <tr>
         <th>日</th>
         <th>月</th>
         <th>火</th>
         <th>水</th>
         <th>木</th>
         <th>金</th>
         <th>土</th>
       </tr>
       <tr>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td>1</td>
       </tr>
       <tr>
         <td>2</td>
         <td>3</td>
         <td>4</td>
         <td>5</td>
         <td>6</td>
         <td>7</td>
         <td>8</td>
       </tr>
       <tr>
         <td>9</td>
         <td>10</td>
         <td>11</td>
         <td>12</td>
         <td>13</td>
         <td>14</td>
         <td>15</td>
       </tr>
       <tr>
         <td>16</td>
         <td>17</td>
         <td>18</td>
         <td>19</td>
         <td>20</td>
         <td>21</td>
         <td>22</td>
       </tr>
       <tr>
         <td>23</td>
         <td>24</td>
         <td>25</td>
         <td>26</td>
         <td>27</td>
         <td>28</td>
         <td>29</td>
       </tr>
       <tr>
         <td>30</td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
       </tr>
     </table>
     <!--ここまで-->
    </div><!-- end container-->
  </body>
</html>

9.Chromeブラウザで見てみよう。以下のようになっていれば成功だ。cssをリセットしているのでスタイルは何もあたっていない状態だ。

CSS

10.それではスタイルを当てていこう。まずはコンテンツ全体を画面中央に配置するため以下のように記述する。

#container{
  width:1000px;
  margin:0 auto;
}

幅を1000pxとしてそれを
margin:0 auto;
で画面の真ん中に配置している。
marginの値として0 autoと指定すると上下が0,左右がautoという意味となり、この左右autoによって全体がセンタリングされる。

11.フォントの設定
今回はフォントも変えたいので
Google Fonts + Japanese
にアクセスして使いたいフォントを探した。
https://googlefonts.github.io/japanese/#roundedmplus1c
今回はM PLUS Rounded 1cを選択埋め込みリンクをコピーしてindex.htmlに貼り付ける

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>6月カレンダー</title>
    <link rel="stylesheet"  href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
    <!--ここを追記-->
    <link href="https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c" rel="stylesheet">
    <!--ここまで-->
    <link rel="stylesheet"  href="css/main.css">
  </head>
  <body>
    <div id="container">

     <h1>令和元年6月のカレンダー</h1>
     <img src="images/june.jpg" alt="6月の画像" />
     <table border="1">
       <tr>
         <th>日</th>
         <th>月</th>
         <th>火</th>
         <th>水</th>
         <th>木</th>
         <th>金</th>
         <th>土</th>
       </tr>
       <tr>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td>1</td>
       </tr>
       <tr>
         <td>2</td>
         <td>3</td>
         <td>4</td>
         <td>5</td>
         <td>6</td>
         <td>7</td>
         <td>8</td>
       </tr>
       <tr>
         <td>9</td>
         <td>10</td>
         <td>11</td>
         <td>12</td>
         <td>13</td>
         <td>14</td>
         <td>15</td>
       </tr>
       <tr>
         <td>16</td>
         <td>17</td>
         <td>18</td>
         <td>19</td>
         <td>20</td>
         <td>21</td>
         <td>22</td>
       </tr>
       <tr>
         <td>23</td>
         <td>24</td>
         <td>25</td>
         <td>26</td>
         <td>27</td>
         <td>28</td>
         <td>29</td>
       </tr>
       <tr>
         <td>30</td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
       </tr>
     </table>

    </div><!-- end container-->
  </body>
</html>

12.webフォントを使う準備ができたのでcssに記述していこう。その他に背景色、パディングなどを設定した

#container{
  width:1000px;
  margin:0 auto;
  font-family: "M PLUS Rounded 1c";
  background-color:#7ce2d9;
  padding:20px 0 40px;
}

paddingは15px 0 40pxと３つ指定すると上15px 左右0 下が40pxという意味になる。
13.h1タグの装飾
続いてh1を以下のように装飾しよう。

h1{
  width:800px;
  margin:0 auto 20px;
  text-align:center;
  font-size:67px;
  border:5px solid #fff00f;
  border-radius: 20px;
  padding:0 10px;
  background-color:#00ff76;
  color:#ff69b4;
  text-shadow: 1px 1px 0 #333;
}

以下のように装飾されれば成功だ。

14.カレンダー部分を装飾していこう。

table{
  width:90%;
  margin:20px auto 0;
}
td,th{
  border:5px solid #fff00f;
  text-align: center;
  background-color:#ffffff;
  font-size:50px;
  padding:5px 0;
}
th{
  color:white;
  background-color:#00ff76;
  text-shadow: 1px 1px 0 #333;
}

以下のようになったであろうか

14.土日の設定
土曜日は青、日曜は赤で表示したい。
cssに以下のように追記しよう。

tr *:first-child{
  color:#ff69b4;
}
tr *:last-child{
  color:#0ba9ea;
}

tr *:first-child
この記述でtr要素の中の最初の要素（つまり日曜)を指定することができる。
これは擬似クラスといって少し応用的な範囲だがこういったことも覚えていくとよいだろう。

完成


以上で完成だ。画像や色や装飾を変えてあなたオリジナルなカレンダーを作成してみほしい。

全ソースコード

●index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>6月カレンダー</title>
  <link rel="stylesheet"  href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
  <link href="https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c" rel="stylesheet">
  <link rel="stylesheet"  href="css/main.css">
</head>
<body>
  <div id="container">
    <h1>令和元年6月のカレンダー</h1>
    <img src="images/june.jpg" alt="6月の画像" />
    <table border="1">
      <tr>
        <th>日</th>
        <th>月</th>
        <th>火</th>
        <th>水</th>
        <th>木</th>
        <th>金</th>
        <th>土</th>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td>1</td>
      </tr>
      <tr>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
      </tr>
      <tr>
        <td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
        <td>13</td>
        <td>14</td>
        <td>15</td>
      </tr>
      <tr>
        <td>16</td>
        <td>17</td>
        <td>18</td>
        <td>19</td>
        <td>20</td>
        <td>21</td>
        <td>22</td>
      </tr>
      <tr>
        <td>23</td>
        <td>24</td>
        <td>25</td>
        <td>26</td>
        <td>27</td>
        <td>28</td>
        <td>29</td>
      </tr>
      <tr>
        <td>30</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
  </div><!-- end container-->
</body>
</html>

●main.css

#container{
  width:1000px;
  margin:0 auto;
  font-family: "M PLUS Rounded 1c";
  background-color:#7ce2d9;
  padding:20px 0 40px;
}
h1{
  width:800px;
  margin:0 auto 20px;
  text-align:center;
  font-size:67px;
  border:5px solid #fff00f;
  border-radius: 20px;
  padding:0 10px;
  background-color:#00ff76;
  color:#ff69b4;
  text-shadow: 1px 1px 0 #333;
}
table{
  width:90%;
  margin:20px auto 0;
}
td,th{
  border:5px solid #fff00f;
  text-align: center;
  background-color:#ffffff;
  font-size:50px;
  padding:5px 0;
}
th{
  color:white;
  background-color:#00ff76;
  text-shadow: 1px 1px 0 #333;
}
tr *:first-child{
  color:#ff69b4;
}
tr *:last-child{
  color:#0ba9ea;
}
スポンサーリンク

コメント

タイトルとURLをコピーしました