あーる学習帳

自分が勉強したことや気になることなど、99%自分用です。コードを書いてるのでPCから閲覧を推奨。

CSS入門：divタグ、左右均等のmargin、サンプルページの総仕上げ

プログラミング HTML CSS

先日からやっているHTMLとCSSで作っているページを仕上げていこうと思います！

ドットインストールの「CSS入門」、続きから。

 

#13

完成版ではゲーム紹介の画像と文章のスペースの幅が揃っており、なおかつ中央ぞろいになっている。

作品紹介の領域を透明な枠で囲み、そこに幅などを設定していく。

index.html側に<div> </div>というタグを使って、ゲーム紹介のsectionをその中に入れていく。今回は<div class="works"> </div>と書き、このdivタグに対してworksというクラスをつける。

styles.css側でwidthを画像と同じ400pxとすると…

.works{

  width : 400px;

}

f:id:R_de_aru:20180605204332p:plain

幅は揃ったが、全体が左揃えになってしまっている。

cssではsectionの設定を以下のようにしていたが、これはdivに適用されない。

 section{

  text-align : center;

}

あくまでもsectionだけの話だからである。

とりあえず、お手本と同じようにh1とpは左揃えにしたいので…

.works h1{
  text-align: left;
}

.works p{
  text-align: left;
}

 しかし、複数のセレクタに同じ設定をするには以下のように書くことができる。

.works h1,
.works p{
text-align: left;
} 

 コードはなるべくシンプルに、これ基本なり。そうすると以下のようになる。

f:id:R_de_aru:20180605205148p:plain

div全体を中央寄せにする手法については別の機会に。

 

#14

さっそくdivを中央寄せにする話です(もっと後かと思ってた)。

中央寄せ=左右のmarginを均等にするという手法をよく使うとのこと。

試しにworksクラスを以下のように書く(太字をつけ足した)。

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

すると…

f:id:R_de_aru:20180605205709p:plain

これだと余白を左に全振りするということになるので、右寄せになる。やりすぎ。

ということは、

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

 とすれば、余白を左右均等に割り振ることができるのでは…

f:id:R_de_aru:20180605211403p:plain

ほらこの通り。

また、div(works)の上下に余白が少しほしいのでそちらも設定する。

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

 ※paddingと同じような書き方もできるので、それと同じように書く。

作品紹介欄について、作品と作品の間にも余白が欲しい。

ということで、以下のように書く。

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

「.works h1」と「.works > section」の違いを説明できる?  

worksとフッターの間について、今回は境目に薄く線を入れたいので以下のように書く(太字部分を加筆)。

.works{
  width: 400px;
  margin: 60px auto;
  border-bottom: 1px solid gray;
}

すると、worksとフッターの境目にグレーの線が入ったことが分かる。

 

#15

フッターのリンクを仕上げていく。

とりあえず表示をbody部と揃えたいので以下のように書く。

footer{
  width: 400px;
  margin: 0 auto;
} 

下にも余白が欲しい…。marginもpaddingもそうだが、3つ目の引数を渡すとそれが下方向の値となる。なので以下のように修正。

footer{
  width: 400px;
  margin: 0 auto 60px;
} 

このmarginの設定ならば「上方向に0、左右はauto、下方向に60px」となる。

次にリンク部にとりかかる。

ヘッダーのリンクの設定を流用するので、header liやheader ulの設定をコピペしてheaderをfooterに書き換える。今回はテキストではなく画像をクリックすることで別ページへ移動するので、font-sizeやtext-decorationは消しておく。

hoverのときには画像の透明度を変えたいので、opacityというプロパティを操作する。

これらの設定をまとめて書くと以下のようになる。

footer ul {
  margin: 0;
  list-style-type: none;
  padding-left: 0;
}

footer li {
  display: inline-block;
  padding: 4px 8px;
}

footer li > a:hover {
  opacity: 0.6;
}

これらを適用すると以下のようになる。

f:id:R_de_aru:20180605213910p:plain

 わかりづらいんだけど、吹き出しマークにマウスのポインタがある状態。

 

#16

フッターのコピーライトの文字についていじっていく。

とりあえずは文字の色を薄く、少し小さめに。そして右寄せにしたいので…

footer p{
  color:lightgray;
  font-size: 14px;
  text-align:right;
} 

 その結果がこれ。

f:id:R_de_aru:20180605221442p:plain

おしゃれ。

しかし、お手本ではリンクの画像と上が揃っていた(リンク画像の行の右端にコピーライトが来るような形)。

今回はul要素にfloatというプロパティを設定する。仕事柄、float=倍精度浮動小数点数のイメージがある…。

floatとは、「通常の要素よりも浮かせて配置する」というイメージ。

footer ulのセレクタについて、以下のように加筆(太字部分)。

footer ul {
  margin: 0;
  list-style-type: none;
  padding-left: 0;
  float: left;
} 

こうすることでfooter ulは左側に浮いた状態(footrt ulがなかったもののように扱われる)となり、それ以降の要素はfooter ulのスペースを空けずに詰めて配置されるようになる。

f:id:R_de_aru:20180605222151p:plain

floatはもっと奥が深いらしい…。

#17

いよいよ最終回。

いままでのレッスンでサイトそのものはほぼ完成しているが、まだ手を付けていない箇所がある。

その1つがヘッダーのリンク部分。自分が現在どこのページにいるかをわかりやすくするため、「HOME」や「ABOUT」に下線をつけていく。

index.htmlで今いるページ(index.htmlならHOME)のところに識別子をつける(今回はcurrentとする)。

<header>
  <nav>
    <ul>
      <li class="current">
        <a href="index.html">
          HOME
        </a>
      </li>
      <li>
        <a href="about.html">
          ABOUT
        </a>
      </li>
    </ul>
  </nav>
</header>

styles.cssには以下のように設定。

.current{
  border-bottom: 4px solid royalblue;
}  

すると以下のようになる。

f:id:R_de_aru:20180605223107p:plain

おしゃれ！！

これでindex.htmlは完成かと思われます。

 

 

 

 

index.htmlだけは完成かと思われます。忘れていないか、about.htmlさんを…。

彼にはいろいろやってあげないといけない。復習がてらやっていこう。

01.styles.cssを読み込むようにする

cssを読み込むための以下のコードをheadに書く。

<link rel="stylesheet" href="css/styles.css">

02.ヘッダーの「ABOUT」に下線をつける

styles.cssを利用するので、これはABOUTのところに「current」というクラスをつけてあげればいいのでは…?(太字部分を加筆)

<li class="current">
  <a href="about.html">
    ABOUT
  </a>
</li> 

03.背景画像

CSSで背景画像を設定しているので、html側でヘッダー画像を示すために書いていた部分は消す。

04.アイコンにクラスをつける

以下のように加筆すればOK(太字部分)。

<section>
　<img src="img/taro.png" width="140" height="140"
　　alt="太郎のアイコン"
　　class="icon">
　<h1>山田太郎</h1>
　　<p>
　　　山田太郎の紹介です。山田太郎の紹介です。山田太郎の紹介です。
　　　山田太郎の紹介です。山田太郎の紹介です。山田太郎の紹介です。
　　　山田太郎の紹介です。山田太郎の紹介です。山田太郎の紹介です。
　　　山田太郎の紹介です。山田太郎の紹介です。山田太郎の紹介です。
　　　山田太郎の紹介です。山田太郎の紹介です。山田太郎の紹介です。
　　　山田太郎の紹介です。山田太郎の紹介です。山田太郎の紹介です。
　　</p>
</section> 

 復習となるところは以上。

この状態でAboutページは以下のようになる。

f:id:R_de_aru:20180605224421p:plain

ほぼほぼ完成だが、「山田太郎の紹介です。」が延々と続く部分がやたらと横に長い。

そこで、about.htmlでその部分を作っているsectionにaboutというクラスをつけ、styles.cssでまたまた設定をしていく。

about.html側は以下のように加筆(太字部分)。

<section class="about">
　<img src="img/taro.png" width="140" height="140"
　alt="太郎のアイコン"
　class="icon">
　<h1>山田太郎</h1>
　<p>
　　山田太郎の紹介です。山田太郎の紹介です。山田太郎の紹介です。
　　山田太郎の紹介です。山田太郎の紹介です。山田太郎の紹介です。
　　山田太郎の紹介です。山田太郎の紹介です。山田太郎の紹介です。
　　山田太郎の紹介です。山田太郎の紹介です。山田太郎の紹介です。
　　山田太郎の紹介です。山田太郎の紹介です。山田太郎の紹介です。
　　山田太郎の紹介です。山田太郎の紹介です。山田太郎の紹介です。
　</p>
</section> 

styles.css側は以下の設定を追加。

.about {
　width: 400px;
　margin: 0 auto 60px;
}

.about p {
　text-align: left;
}

 すると以下のようになる。

f:id:R_de_aru:20180605225212p:plain

これでレッスン内で扱ったすべてのページが完成です！！！！

 

長いような短いような、でも楽しかった。

以下は完成したページのスクショになります。

f:id:R_de_aru:20180605225620p:plain

f:id:R_de_aru:20180605225633p:plain

f:id:R_de_aru:20180605225719p:plain

f:id:R_de_aru:20180605225735p:plain

 

ジャンルや言語は違えどこれを仕事にしているし、最近は仕事もあまりよろしくない状況なので忘れがちなんだけど、プログラミングって楽しい、ものを作るのって楽しい。

そう思えた数日間のページ制作でした。

 

ヘッダーとフッターの表示固定(スクロールしても画面の上下に絶対ヘッダーやフッターがある)とかもできそうと思って検索してみたら、今回やったCSSとはだいぶ違う書き方をしているページばっかりだったのでPHPと組み合わせた時にチャレンジしてみようと思います。

 

それでは、これにてHTMLとCSSの勉強はひと段落！お疲れ様でした！