HTML＋CSSのこと

【HTML+CSS3】1カラムレイアウト【実践編】

CSS3

前回（準備編）の続き。準備したパーツを使って実際にレイアウト開始！
まずはCSSはこちら▽

body { 
 background: #1C1C1C;
 color: #FFFFFB; 
 font-family: 'Lobster', cursive;
} 
#header,
#footer { 
 width: 100%;
 height: 30px; 
 background-image: url(./Header_FooterImage.png); 
} 
 
#logo, 
#sub{ 
 text-align: center; 
} 
#logo {
  position: relative;
}
#logo img { 
 width: 80%; 
 margin: 10px;
 height: 250px;
 
}
#logo p {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
  color: #1C1C1C;
  font-weight: bold;
  font-size: 6em;
}
.main-contents, 
.sub { 
  width: 100%; 
  height:auto; 
  margin: 10px; 
} 
 
h1 { 
  position: relative; 
  padding: 0.25em 0;
  font-family: 'Lobster','Hannari','Yu Mincho Light','YuMincho','Yu Mincho','游明朝体',sans-serif; 
} 
h1:first-letter{ 
    font-size: 3em; 
} 
h1:after { 
  content: ""; 
  display: block; 
  height: 4px; 
} 
h1:after { 
  background: -webkit-linear-gradient(to right, rgb(255, 255, 251 ), transparent); 
  background: linear-gradient(to right, rgb(255, 255, 251), transparent); 
} 

@media screen and (min-width :768px){ 
 #main { 
  max-width:1000px; 
  margin:0 auto; 
 }
}

@media screen and (min-width :1300px){ 
#logo p {
  font-size: 8em;/*サイズ8倍*/
}
}

解説

body { 
 background: #1C1C1C;
 color: #FFFFFB; 
 font-family: 'Lobster', cursive;
}

ページ全体の背景色、文字色、フォントフェイスを指定。

#header,
#footer { 
 width: 100%;
 height: 30px; 
 background-image: url(./Header_FooterImage.png); 
}

headerとfooterいう名前のid属性をもつ２つのブロックに対する設定。準備編の構想にあるレイアウト図でいうヘッダー領域とフッター領域の部分の設定。
ウインドウズサイズに対して横幅いっぱい、縦幅は30pxで、cssが置いてあるファイルと同じフォルダに入っている「Header_FooterImage.png」という名前の画像ファイルを表示する

#logo, 
#sub{ 
 text-align: center; 
}

logoという名前のid属性を持つブロックと、subという名前のid属性をもつブロックはウインドウズ領域の中央に配置する。準備編の構想にあるレイアウト図でいうTitle画像っぽいやつとフッター領域の部分の設定。

#logo {
  position: relative;
}

logoというid属性を持つブロックを親属性と定める。準備編の構想にあるレイアウト図でいうTitle画像っぽいやつの設定①

#logo img { 
 width: 80%; 
 margin: 10px;
 height: 250px;
}

logoというid属性を持つブロックの中にある画像はウインドウサイズに対して80%の横幅、250pxの縦幅で上下左右に10pxの余白をあける。準備編の構想にあるレイアウト図でいうTitle画像っぽいやつの設定②

#logo p {
/* １ */
  position: absolute;
/* ２ */
  top: 50%;
  left: 50%;
/* ３ */
  -moz-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
/* ４ */
  margin:0;
  padding:0;
/* ５ */
  color: #1C1C1C;
  font-weight: bold;
  font-size: 6em;
}

■/* １ */について
logoというid属性を持つブロックの中にある<p>タグは子属性と定める
■/* ２ */について
<p>タグはlogoというid属性を持つブロックの中で上から50%、左から50%の位置に配置する
■/*３*/について
<p>タグの中に表示する文字の位置はX方向左に50%、Y方向左に50%の距離で2D移動させる
※-webkit-transform：Safari 3.1以上とGoogle Chromeのための指定
※-moz-transform：Firefox 3.1（ベータ版）のための指定
■/*４*/について
文字の周りに余白はとらない
■/*５*/について
文字色と文字の太さ、サイズを指定。
フォントサイズをemで指定したのは文字の標準の大きさにたいして〇倍という指定の仕方で文字の大きさをウインドウズサイズを基準に一定にしたかったため（この場合は６倍の大きさを指定している。ここで使われている文字の種類は’Lobster’であり、この文字は準備編で入手した時に30pxの大きさで入手しているため、ここでは30pxに対して6倍を指定していることになる。
準備編の構想にあるレイアウト図でいうTitle画像っぽいやつの設定③
※画像と文字を重ねて表示、というテクニック。

.main-contents, 
.sub { 
  width: 100%; 
  height:auto; 
  margin: 10px; 
}

コンテンツ領域とサブコンテンツ領域は横幅をウインドウサイズいっぱい、縦は可変で表示し、さらに上下左右に10pxの余白をとる

h1 { 
  position: relative; 
  padding: 0.25em 0;
  font-family: 'Lobster','Hannari','Yu Mincho Light','YuMincho','Yu Mincho','游明朝体',sans-serif; 
}

見出しタグ<h1>の装飾を設定。
親要素として定め、ブロックの内側上下に0.25emの余白を指定、ブロックの内側左右の余白はなしにする。
字体は優先度の高い方から「’Lobster’,’Hannari’,’Yu Mincho Light’,’YuMincho’,’Yu Mincho’,’游明朝体’,sans-serif」を指定。
この並びで表記することで、英語はLobsterが、日本語ははんなり明朝が優先的に表示される。

h1:first-letter{ 
    font-size: 3em; 
}

h1タグの頭文字を3倍にする

h1:after { 
  content: ""; 
  display: block; 
  height: 4px; 
} 
h1:after { 
  background: -webkit-linear-gradient(to right, rgb(255, 255, 251 ), transparent); 
  background: linear-gradient(to right, rgb(255, 255, 251), transparent); 
}

<h1>タグにRGB「255, 255, 251」の色の4pxの下線をグラデーションで表示する

@media screen and (min-width :768px){ 
 #main { 
  max-width:1000px; 
  margin:0 auto; 
 }
}

ウインドウサイズが768px以上になった場合はmainというid属性を持つブロックの表示最大幅を1000pxにし、ブロックを中央寄せにする

@media screen and (min-width :1300px){ 
#logo p {
  font-size: 8em;/*サイズ8倍*/
}
}

ウインドウサイズが1300px以上になった場合は、Title画像に重ね合わせた文字の大きさを8倍にする

HTMLはこちら▽

<!DOCTYPE HTML> 
<html lang="ja"> 
<head>
<meta http-equiv="content-type" charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,user-scalable=yes"> 
<link rel="stylesheet" href="style_1column.css">
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/earlyaccess/hannari.css" rel="stylesheet">
</head> 
  <body class="top"> 
  
    <div id="header"> 
    </div> 
    <div id="logo"> 
    <img src="./LogoImage.png">
    <p>Logo Image</p>
    </div> 
    <div id="main"> 
     <div id="main-contents"> 
        <h1 class="top">たいとる－Title</h1> 
        ここに文字を書く長い文字列は折り返す。<br>
　　　　画面が縮小されれば自動折り返す。
      </div> 
     <div id="sub"> 
        <img src="./SubImage.png"> 
      </div> 
    </div> 
    <div id="footer"> 
    </div> 
 </body> 
</html>

解説

<!DOCTYPE HTML> 
<html lang="ja">

HTML文書であることの宣言と、htmlの言語が日本語であることの宣言

<head>
/*１*/
<meta http-equiv="content-type" charset="utf-8">
/*２*/
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,user-scalable=yes"> 
/*３*/
<link rel="stylesheet" href="style_1column.css">
/*４*/
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/earlyaccess/hannari.css" rel="stylesheet">
</head>

■/* １ */について
utf-8の文字コードを使う宣言
■/*２*/について
画面サイズによってコンテンツがはみでたりしないよう、縮尺自由にする宣言
user-scalable=yes”を記述することでユーザーが任意に拡大縮小することを許容する
■/*３*/について
読み込むCSSの宣言。ここでは同じフォルダにある「style_1column.css」というファイル名のCSSを読み込んでいる
■/*４*/について
Google Fontsで得た文字と、Google Fonts+Japanegeで得た文字の両方が使えるようにする宣言

▽サンプルページ

https://dowaki.biz/test/Sample/1column_test.html


おすすめ

CSS3
HTML＋CSSのこと

【HTML+CSS】葉っぱっぽい画像をCSSのみで描く

CSS3
HTML＋CSSのこと

【CSS】要素の最初の文字を装飾するには【first-letter】

CSS3
HTML＋CSSのこと

【HTML+CSS】フォントサイズ指定方法：pxとemの違い、ビューポートとは【ex、vh、vw、%】