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

website

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

準備編

  • まずは任意の場所(デスクトップ等)に新規フォルダを作成する。名前はCalendarでいいだろう。
  • Calendarフォルダの中にcssフォルダ、imagesフォルダを作成する。
  • 画像をダウンロードしてimagesフォルダに格納する。(june.jpg)
  • cssフォルダの中にmain.cssを作成する。

マークアップ

  • Calendarフォルダの直下に以下のようにindex.htmlを文字コードutf-8で作成する。
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>6月カレンダー</title>
  </head>
  <body>

  </body>
</html>
  • cssをリセットするDestyle.cssとmain.cssをindex.htmlから読み込めるように2行追記する。
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>6月カレンダー</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@3.0.2/destyle.css">
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>

  </body>
</html>
  • コンテンツ全体をブラウザの中央に配置したい。そのためにコンテンツ全体を包むdiv要素を作ろう。今回はidとしてcontainerを付与している。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>6月カレンダー</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@3.0.2/destyle.css">
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <div id="container">
      
    </div><!--container-->
  </body>
</html>

12行目に注目してもらいたい、
</div><!--container-->
と後ろにコメントを付与しているが、これはこのdivの閉じタグがid containerのdivであることわかりやすくするための工夫だ。こういった工夫がメンテナンス性を上げるので活用するとよいだろう。

続いてコンテナの中に見出し、画像、カレンダーとなるテーブルを作成していく。テーブルは項目が多いがうまくコピペを利用して作成してほしい。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>6月カレンダー</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@3.0.2/destyle.css">
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <div id="container">
      <h1>令和5年6月のカレンダー</h1>
     <img src="images/june.jpg" alt="6月の画像" />
     <table>
       <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><!--container-->
  </body>
</html>

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

CSS

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

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

ブラウザで確認してみよう。コンテンツ全体がブラウザの中央に配置されたのがわかる。

ポイント解説

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

fontの設定

webサイトで表示される文字はパソコンやスマホにインストールしてあるフォントで表示される。なので、見る環境によってフォントが違うということをまず知っておこう。
では、どうやってフォントを指定するのだろうかそれは以下のように列挙しておく

2023年版 おすすめfont-family

html{
  font-family:'Roboto','Hiragino Sans','Meiryo','Hiragino Kaku Gothic ProN',sans-serif;
}

そして、先頭から見ていってシステムにイントールしてあるフォントが見つかればそれを採用するという仕組みだ。

Webフォント

通常は上記のfont-familyの設定をしておけばOKだが、ときにデザイン性にこだわりたいときがある。そういったときにはWebフォントを使用する。
今回はGoogleが提供してくれているWebフォント使ってみよう。
まずは以下のサイトにアクセスし、使用したいフォントを探す
Google Fonts + Japanese

今回は以下のフォントを利用することにする。
https://googlefonts.github.io/japanese/#roundedmplus1c
今回はM PLUS 1pの選択埋め込みリンク(以下画像部分)をコピーしてindex.htmlに貼り付ける

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>6月のカレンダー</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@3.0.2/destyle.css">
    <link href="https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c" rel="stylesheet">
    <link rel="stylesheet" href="css/main.css">
  </head>

webfontを使う準備ができたので以下のようにそのフォントを使いたい要素に記述する。それとあわせて背景色やpaddingの設定も以下のように行う。

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

paddingは20px 0 40pxと３つ指定すると上20px 左右0 下が40pxという意味になる。

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;
}

text-shadowの４つの並びは
offset-x/offset-y/blur/color
(x軸のずらし,y軸のずらし,ぼかし具合,影の色)
を表している。

実行してみよう。以下のように表示されれば成功だ。

カレンダー部分の装飾

カレンダー部分を装飾していこう。main.cssに以下の部分を追記する。

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

以下のようになれば成功だ。

いい感じだ！ただ日曜や土曜の文字の色を変えたい。どうすればよいだろうか？

classによる実装

~この部分は見ているだけでよい。~
まず思いつくのが文字色を赤や青にしたい要素にclassを付与し,そのクラスに対してスタイルを当てる方法だ。

<table>
        <tr>
          <th class="red">日</th>
          <th>月</th>
          <th>火</th>
          <th>水</th>
          <th>木</th>
          <th>金</th>
          <th class="blue">土</th>
        </tr>
        <tr>
          <td class="red"></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td class="blue">1</td>
        </tr>
        <tr>
          <td class="red">2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
          <td>6</td>
          <td>7</td>
          <td class="blue">8</td>
        </tr>
以下続く
.red{
  color:red;
}
.blue{
  color:blue;
}

確かにこの方法でも実現できる。ただ、classを付与していく作業がなかなかしんどい。

疑似クラスの活用

実はこのシコシコとclassを付与していく作業はcssの疑似クラスという仕組みを活用すると一発で解決できる。index.htmlに変更を加えることなくmain.cssに以下のような記述を加える。

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

こうすることで、「tr要素の中の最初の子要素」や「tr要素の中の最後の子要素」といった指定ができる。疑似クラスはやや応用的な内容だが、こういったこともできると知っておこう。

完成版ソースコード

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>6月のカレンダー</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@3.0.2/destyle.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>令和5年6月のカレンダー</h1>
      <img src="images/june.jpg" alt="6月の画像">
      <table>
        <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><!--container-->
  </body>
</html>
#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:5px 10px;
  background-color:#00ff76;
  color:#ff69b4;
  text-shadow:1px 1px 0px #555;
}
table{
  width:90%;
  margin:20px auto 0;
}
td,th{
  border:5px solid #fff00f;
  text-align:center;
  background-color:#fff;
  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をコピーしました