2016-11-04

フルスクリーンレイアウト　その１

HTML5+CSS3

最近、よく見かける「１枚画像」を画面全体に表示させているようなフルスクリーンレイアウト。
こういったレイアウトを作る際の１番のポイントは、用意する画像の大きさです。
自分のPCでは綺麗にフルスクリーンで表示されるけど、別のPCでは写真が見切れてしまっていたり、逆に余白が出てしまったり、という事が起こります。

ビットマップのデータをすべてのディスプレイでピッタリの大きさに合わせるという事は基本的に無理なので、ある大きさで書き出した画像をCSSで拡大・縮小していきます。

img要素の場合は前回やったようにフルードイメージ化する事で画像を可変にしましたが、background画像の場合は「background-size」というプロパティを使って、拡大・縮小していきます。

画像を可変にする方法は二通りのみ

img要素ならフルードイメージ

フルードイメージの場合、基本的に拡大はさせない為、想定される範囲の中で最大サイズで書き出す。
拡大はNGなので、綺麗に見せたい商品画像などに使用

background画像なら「background-size」

「background-size」の場合、拡大・縮小ともに自由に出来る為、想定される範囲の中間付近のサイズで書き出す。
拡大・縮小を自由に出来る為、ディテールに拘らない、背景などの画像に使用

今回のようにフルスクリーンで画像を表示したい場合、絶対的に決まった大きさはありませんが、一番シェアの多いモニターの解像度で作るのが無難です。
モニター解像度のシェア（2016年6月現在）
f:id:yachin29:20161104183617p:plain

さらにフルスクリーンのように大きなサイズの画像をwebで使う時は必ず下記のようなサービスを使ってデータを軽くし、ユーザビリティーの向上に努めましょう。
tinypng.com

background-sizeプロパティの指定方法

background-sizeプロパティは、背景画像のサイズを指定する際に使用します。これまで使ってきたようなピクセルやパーセンテージの他に「contain」「cover」といった値でも設定出来ます。

「contain」

縦横比は保持して、背景領域に収まる最大サイズになるように背景画像を拡大縮小する

「cover」

縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する

background-sizeのサンプル

background-sizeプロパティは、スマホサイト制作でよく使用されるプロパティなので、各値の違いをしっかり覚えて使えるようにしていきましょう。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>background-sizeの基本</title>
<style>
html,body {
  margin: 0;
  padding: 0;
}
body {
  width:100%;
  height:100vh;
  background-image: url(../img/bg.jpg);

  /* 画像を常に天地左右の中央に配置 */
  background-position: center center;
  /* 画像を繰り返し表示しない */
  background-repeat: no-repeat;
  /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
  background-attachment: fixed;
  /* 表示するコンテナの大きさに基づいて、背景画像を調整 */
  background-size: cover;
  /* 背景画像が読み込まれる前に表示される背景のカラー */
  background-color: #464646;
}
</style>
</head>

<body>
</body>
</html>

2016-10-23

グリッドレイアウト

HTML+CSS

グリッドレイアウトとは

グリッドとは「格子状の」という意味がありますが、画面をいくつかのサイズのブロックを組み合わせて、コンテンツを配置していく画面設計手法のひとつです。元々紙媒体でよく使われたレイアウト方法ですが、Webでもレスポンシブデザインとの親和性が高く、最近よく見かけるレイアウトの1つです。

f:id:yachin29:20150612111556p:plain

素材画像

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>グリッドレイアウト</title>
<link rel="stylesheet" href="css/style.css">

</head>
<body id="top">
<div id="container">
<div class="column">
<header>
<h1><img src="img/logo01.png" alt=""></h1>
<nav>
<ul>
<li><a href="#"><img src="img/nav01_01.png" alt="CONCEPT"></a></li>
<li><a href="#"><img src="img/nav02_01.png" alt="MENU"></a></li>
<li><a href="#"><img src="img/nav03_01.png" alt="ACCESS"></a></li>
<li><a href="#"><img src="img/nav04_01.png" alt="NEWS"></a></li>
</ul>
</nav>
</header>
<ul>
<li><img src="img/ph01_l.jpg" alt=""></li>
</ul>

<ul>
<li><img src="img/ph02_mt.jpg" alt=""></li>
<li><img src="img/ph03_s.jpg" alt=""></li>
<li><img src="img/ph04_s.jpg" alt=""></li>
</ul>

<ul>
<li><img src="img/ph05_my.jpg" alt=""></li>
<li><img src="img/ph06_s.jpg" alt=""></li>
<li><img src="img/ph07_s.jpg" alt=""></li>
</ul>
</div><!-- /.column -->


<div class="column">
<ul>
<li><img src="img/ph08_my.jpg" alt=""></li>
<li><img src="img/ph09_s.jpg" alt=""></li>
<li><img src="img/ph10_s.jpg" alt=""></li>
</ul>

<ul>
<li><img src="img/ph11_l.jpg" alt=""></li>
</ul>

<ul>
<li><img src="img/ph12_s.jpg" alt=""></li>
<li class="right"><img src="img/ph13_mt.jpg" alt=""></li>
<li><img src="img/ph14_s.jpg" alt=""></li>
</ul>

<ul>
<li><img src="img/ph15_l.jpg" alt=""></li>
</ul>

<ul>
<li><img src="img/ph16_s.jpg" alt=""></li>
<li><img src="img/ph17_s.jpg" alt=""></li>
<li><img src="img/ph18_my.jpg" alt=""></li>
</ul>
</div><!-- /.column -->

<div class="column three">
<ul>
<li><img src="img/ph19_l.jpg" alt=""></li>
</ul>

<ul>
<li><img src="img/ph20_s.jpg" alt=""></li>
<li class="right"><img src="img/ph21_mt.jpg" alt=""></li>
<li><img src="img/ph22_s.jpg" alt=""></li>
</ul>

<ul>
<li><img src="img/ph23_s.jpg" alt=""></li>
<li><img src="img/ph24_s.jpg" alt=""></li>
<li><img src="img/ph25_my.jpg" alt=""></li>
</ul>

<ul>
<li><img src="img/ph26_s.jpg" alt=""></li>
<li><img src="img/ph27_s.jpg" alt=""></li>
<li><img src="img/ph28_s.jpg" alt=""></li>
<li><img src="img/ph29_s.jpg" alt=""></li>
</ul>

<ul>
<li><img src="img/ph30_l.jpg" alt=""></li>
</ul>
</div><!-- /.column -->
</div><!-- /#container -->

<footer id="pc">
<p>
<small>Copyright &copy; 2016 ○○○ All Rights Reserved.</small>
</p>
</footer>
</body>
</html>

/*====reset======*/
html, body, header, nav, h1, ul, li, img, p, small, a, section, footer {
  margin: 0;
  padding: 0;
  line-height: 1.0;
}
ul {
  list-style: none;
}
a {
	text-decoration: none;
}
img {
  border: none;
  vertical-align: bottom;
}

/*IE8用リセット*/
 article, aside, dialog, figure, footer, header,
  hgroup, menu, main, nav, section { display: block; }


/* layout
=========================*/
#container {
  width: 960px;
  margin: 10px auto;
  overflow: hidden;
}
.column {
  float: left;
}
header {
  width: 320px;
  overflow: hidden;
}
h1 {
  margin: 10px;
}
ul {
  width: 320px;
  overflow: hidden;
}
.column ul li{
  margin: 10px;
  float: left;
}
.column ul li.right {
  float: right;
}
footer#pc {
  width: 100%;
  height: 50px;
  background: #281605;
}
footer#pc p {
  text-align: center;
  color: #FFF;
  font-size: 18px;
  line-height: 50px;
}

2016-10-16

ブロックレベル要素とインライン要素

HTML+CSS

HTMLには色々な要素（h1とかp）がありますが、その要素は大きく分けて「ブロックレベル要素」と「インライン要素」の2つに分かれます。
この「ブロックレベル要素」と「インライン要素」の違いと特性をしっかりと理解する事で、実際に制作する際によく生じてしまう、意図しないズレや空きを無くす事が出来ます。

インライン要素

インライン要素は、主にブロックレベル要素の内容として用いられる要素で、文章の一部として扱われます。例えば、p要素の中のspan要素のように、段落のなかの一部を修飾・強調するような使われ方をする要素です。一般的なブラウザでは改行されず、横に並びます。

<a>、<abbr>、<br>、<em>、<img>、<input>、<label>、<select>、
<small>、<span>、<strong>　など

ブロックレベル要素

ブロックレベル要素は、見出し・段落・表など、HTMLを構成する基本となる要素で、一つのブロック（かたまり）として認識されます。ブラウザでの表示も一つのかたまりとして扱われることが多く、一般的なブラウザでは改行されます。

<div>、<h1>-<h6>、<ol>、<ul>、<li>、<p>、<table>　など

配置ルール

ブロックレベル要素の中には、他のブロックレベル要素やインライン要素を配置することができます。一方、インライン要素の中には、他のインライン要素を配置することができますが、インライン要素の中にブロックレベル要素を配置することはできません。

正しい配置方法

<p><span>段落となります。</span></p>

間違った配置方法

<span><p>段落となります。</p></span>

インライン要素の特性
width – 効かない
height – 効かない
margin – 左右は効くけど、上下は効きません。
padding – 一応上下左右効くけど、上下は不安定 …。

特別なインライン要素 img、input、textarea

同じインライン要素でも img タグ、input タグ、textarea タグなどは特別です。インライン要素なので、他のインライン要素と同じように、続けて書くと横に並びます。
しかし、他のインライン要素との大きな違いは、margin や padding、width や height も指定できるところです。

width – 効く
height – 効く
margin – 効く
padding – 効く

インライン要素をブロックレベル化する「display: block 」

width や heightを指定できないインライン要素に対し、
「display: block 」を指定する事でa要素などをブロックレベル化する事が出来、width や heightを指定する事が出来ます。

a {
  display: block;
}

2016-10-15

1カラムレイアウトの演習

HTML+CSS

f:id:yachin29:20160203184948p:plain

使用するテキスト

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
Net Smart

よりスマートなインターネットライフを。

Concept

すべてのインターネットユーザーに快適でよりスマートさを。ネットスマートはデジタルのチカラを持って、皆様とそんな未来を創造していきます。

Service

低価格&高機能なCMS導入。充実の管理画面でサイト運用を効率的に。

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>1カラムレイアウト</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div id="container">
<div id="header">
<h1>Net Smart</h1>
<p>よりスマートなインターネットライフを。</p>
</div>
<div id="content">
<div id="top">
<h2>Concept</h2>
<p>すべてのインターネットユーザーに快適でよりスマートさを。ネットスマートはデジタルのチカラを持って、皆様とそんな未来を創造していきます。</p>
</div>
<div id="bottom">
<h2>Service</h2>
<p>低価格&amp;高機能なCMS導入。充実の管理画面でサイト運用を効率的に。</p>
</div>
</div>
<div id="footer"><p><small>Copyright 2016 Net Smart All Rights Reserved.</small></p></div>
</div>
</body>
</html>

style.css

@charset "utf-8";
/* CSS Document */

/* reset */
html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre, 
address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
ul, ol {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
}
img {
  border: 0;
}
img, input {
  vertical-align: bottom;
}

/*ページレイアウト*/
body {
  background: #CCC;
}
#container {
  width: 800px;
  margin: 0 auto;
}
header {
  background: url(img/header.png) no-repeat left top;
  width: 800px;
  height: 300px;
}
h1 {
  color: #FFF;
  padding: 20px 0 0 20px;
  width: 300px;
  white-space: nowrap;
  text-indent: 100%;
  overflow: hidden;
}
header p {
  color: #FFF;
  padding: 20px 0 0 20px;
  width: 300px;
  white-space: nowrap;
  text-indent: 100%;
  overflow: hidden;
}
#content {
  text-align: center;
}
h2 {
  font-size: 32px;
  padding: 40px 0 10px;
  width: 200px;
  margin: 0 auto;
}
#content p {
  padding: 30px 100px 0;
  line-height: 2;
}
#top {
  background: #FFF;
  width: 800px;
  height: 300px;
}
#top h2 {
  color: #09F;
  border-bottom: 5px solid #09F;
}
#bottom {
  background: #09F;
  width: 800px;
  height: 300px;
}
#bottom h2 {
  color: #FFF;
  border-bottom: 5px solid #FFF;
}
#bottom p{
  color: #FFF;
}
footer {
  background: #333;
}
footer p {
  text-align: center;
  color: #FFF;
  padding: 20px 0;
}

2016-10-08

3カラムレイアウト

3カラムレイアウトを作る場合も基本的には2カラムレイアウトと考え方は一緒です。
まずは大きいカラムと小さいカラムを左右にフロートさせ、大きなカラムの中にさらに2つの箱を左右にフロートさせていく、という考え方です。

f:id:yachin29:20161008210041p:plain

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>3カラムレイアウト</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<div id="header">#header</div>
<div id="wrapper">
<div id="content">
<div id="main">#main</div>
<div id="sub">#sub</div>
</div>
<div id="third">#third</div>
</div>
<div id="footer">#footer</div>
</div>
</body>
</html>

@charset "utf-8";
/* CSS Document */

html,body {
  margin:0;
  padding:0;
}

/*レイアウト部分*/
#container {
  width:800px;
  margin:0 auto;
}
#header {
  width:800px;
  height:300px;
  background:#069;
}
#wrapper {
  overflow:hidden;
}
#content {
  width:600px;
  float:left;
  overflow:hidden;
}
#main {
  width:400px;
  height:400px;
  float:right;
  background:#C66;
}
#sub {
  width:200px;
  height:400px;
  float:left;
  background:#999;
}
#third {
  width:200px;
  height:400px;
  float:right;
  background:#99FF99;
}
#footer {
  width:800px;
  height:50px;
  background: #F93;
}

2016-10-07

ナビゲーションボタンの作成

HTML+CSS

今回はボタンを1つ1つ画像にして背景画像で指定します。hover時の画像も別に制作してみましょう。

home.png
f:id:yachin29:20161007210802p:plain

home_h.png
f:id:yachin29:20161007210752p:plain

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ナビゲーションの作成</title>
<style>
html,body,ul,li {
margin:0;
padding:0;
line-height:1.0;
}
a {
text-decoration:none;
color:#FFFFFF;
}
ul {
list-style:none;
}

/*レイアウト部分*/

ul {
width:800px;
height:50px;
overflow:hidden;
}
li {
width:200px;
height:50px;
float:left;

}
li a {
display:block;
text-align:center;
line-height:50px;
background: #06F;
border-right: 1px solid #000;
text-indent:100%; /*要素の外の右隣に移動させる*/
white-space:nowrap; /*改行を無効にする*/
overflow:hidden; /*はみ出した文字を隠す*/
}
li#home a {
background:url(img/home.png) no-repeat;
} 
li#food a {
background:url(img/food.png) no-repeat;
} 
li#access a {
background:url(img/access.png) no-repeat;
} 
li#info a {
background:url(img/info.png) no-repeat;
} 

li#home a:hover {
background:url(img/home_h.png) no-repeat;
} 
li#food a:hover {
background:url(img/food_h.png) no-repeat;
} 
li#access a:hover {
background:url(img/access_h.png) no-repeat;
} 
li#info a:hover {
background:url(img/info_h.png) no-repeat;
} 

li:last-child a {
border-right:none;
}

li a:hover {
background:#000033;
color:#EEE;
}
</style>
</head>

<body>
<ul>
<li id="home"><a href="#">home</a></li>
<li id="food"><a href="#">food</a></li>
<li id="access"><a href="#">access</a></li>
<li id="info"><a href="#">info</a></li>
</ul>
</body>
</html>

2016-10-07

隠し文字

HTML+CSS

ナビゲーションを画像にする場合、気をつけたいのがliに記述している文字の扱いです。今回は文字も含めて画像にしているので、このままでは画像の文字とliに記述している文字がダブってしまい、画像の文字が読めなくなってしまいます。

ここで絶対にやってはいけなのが画像の文字を見せる為にliに記述している文字を消すという行為です。表示的にはダブっている文字が消えて綺麗に見えますが、文章構造上liの中身が空という事になってしまうので、絶対にNG

文章構造上liの中身は必須なので、CSSの方で文字を見えなくさせる記述をします。
方法はいくつかあります。以前は「text-indent: -999em;」と指定し、ものすごく左の方に文字を移動させる、という方法もありましたが、
現在最も使われている方法は、文字を右にずらし見えなくさせるという方法です。

右にずらす方法

#nav li a {
  display: block;
  width: ボタン幅;
  height: ボタン高さ;
  background: url(背景画像のパス) no-repeat;
  white-space: nowrap;
  text-indent: 100%;
  overflow: hidden;
}

white-spaceプロパティは、ソース中の半角スペース・タブ・改行の表示の仕方を指定する際に使用します。
「 nowrap」はソース中の連続する半角スペース・タブ・改行を、1つの半角スペースとして表示し、ボックスの大きさが指定されている場合にも、自動的に改行されません。

WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フルスクリーンレイアウト　その１

画像を可変にする方法は二通りのみ

background-sizeプロパティの指定方法

「contain」

「cover」

background-sizeのサンプル

グリッドレイアウト

グリッドレイアウトとは

素材画像

index.html

ブロックレベル要素とインライン要素

インライン要素

ブロックレベル要素

配置ルール

特別なインライン要素 img、input、textarea

インライン要素をブロックレベル化する「display: block 」

1カラムレイアウトの演習

使用するテキスト

3カラムレイアウト

ナビゲーションボタンの作成

隠し文字

右にずらす方法