2020-05-09

Emmetについて

HTML CSS その他

Emmetとは

主にHTMLやCSSなどの記述・編集を支援するプラグインです。
- DreamweaverやBracketsなど多くのエディタに対応しています。
独自の省略記法によるコーディングの高速化が可能となります。
- 省略記法を入力した後、tabを押します。

各種記号

#：ID：IDの指定
.：CLASS：クラスの指定
[]：attr：属性の指定
>：Child：階層
+：Sibiling：隣接する要素
()：Grouping：グループ
*：Multiplication：要素の複製
$：Item numbering：要素の繰り返し番号
{}：text：テキストを挿入

▽よく使用するメモ▽

HTML

head内のcssリンク

link:css
▼
<link rel="stylesheet" href="style.css">

head内のfaviconリンク

favicon
▼
<link href="/YOUR_PATH/favicon.ico" rel="icon" type="image/x-icon" />

head内のtouch iconリンク

link:touch
▼
<link rel="apple-touch-icon" href="favicon.png">

head内のビューポートの設置

meta:vp
▼
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

body内のナビゲーション

nav>ul>li.item*4>a[#]{Item$}
▼
<nav>
  <ul>
    <li class="item"><a href="#">Item1</a></li>
    <li class="item"><a href="#">Item2</a></li>
    <li class="item"><a href="#">Item3</a></li>
    <li class="item"><a href="#">Item4</a></li>
  </ul>
</nav>

body内の定義リスト

div>dl>(dt+dd)*3
▼
<div>
  <dl>
    <dt></dt>
    <dd></dd>
    <dt></dt>
    <dd></dd>
    <dt></dt>
    <dd></dd>
  </dl>
</div>

CSS

レイアウト系

pos ▶︎ position: relative;
ov ▶︎ overflow: hidden;
fl:r ▶︎ float: right;
cl ▶︎ clear: both;
d ▶︎ display:block;
d:f ▶︎ display:flex;

余白

mb ▶︎ margin-bottom: ;
p ▶︎ padding: ;

文字

fw:b ▶︎ font-weight: bold;
fz ▶︎ font-size: ;
ff ▶︎ font-family: ;
ta:c ▶︎ text-align: center;
lh ▶︎ line-height: ;
lts ▶︎ letter-spacing:;

その他

bxz ▶︎ box-sizing: border-box;
maw ▶︎ max-width: ;
bg ▶︎ background: #000;
c:ra ▶︎ color: rgba(0, 0, 0, .5);
op ▶︎ opacity: ;
cnt:a ▶︎ content: attr();
bd+ ▶︎ border: 1px solid #000;
lis ▶︎ ist-style: ;
! ▶︎ !important

@m
▼
@media screen {
    
}

＜参考サイト＞
docs.emmet.io
odnax.hatenablog.com
blogs.adobe.com

2020-05-07

Flexboxを使ったレイアウト - 実践

HTML CSS レスポンシブWebデザイン Flexbox

店舗サイトをつくる

コンテンツ幅（960px）固定値で設定
レスポンシブWebデザインで作成
デザインは今風に改変
画像は個別に用意

実践

例

f:id:hak00810:20200507162120p:plain
f:id:hak00810:20200507161737p:plain

テキスト

IKEBUKURO
COFFEE池袋珈琲

トップ
メニュー
店舗
こだわり

IKEBUKURO COFFEE

ドリップコーヒーの2倍コーヒーを使い、丁寧に入れたアイスコーヒーをご提供しています。


おすすめメニュー

カフェラテとスイーツ
好評のカフェラテとスイーツのセット。アフタヌーンティーにいかがでしょうか？

厳選した豆を深煎り
厳選した豆を深煎りで。ご自宅でお楽しみいただけるコーヒー豆、店頭で販売しています。

アイスコーヒー
アイスコーヒー、夏はもちろん冬にもご提供します。深煎りをさらに2倍利用して深みを出しています。


★おいしいコーヒーの特徴と入れ方★

コーヒー豆の種類と特徴

おいしいドリップ珈琲の入れ方入門

トップ
メニュー
店舗
こだわり
お問い合わせ
企業情報
採用情報

(c) 2020 IkebukuroCoffee

解答

＜HTML＞

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link href="https://fonts.googleapis.com/css2?family=Averia+Serif+Libre:wght@700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style2.css">
<title>IKEBUKURO COFFEE | 池袋珈琲</title>
</head>

<body>
<div class="container">
<header>
<h1><a href="#">IKEBUKURO<br>
COFFEE<span class="shop_jp">池袋珈琲</span></a></h1>

<nav>
<ul class="nav">
  <li><a href="#">トップ</a></li>
  <li><a href="#">メニュー</a></li>
  <li><a href="#">店舗</a></li>
  <li><a href="#">こだわり</a></li>
</ul>
</nav>
</header>

<div class="billboard">
<a href="#"><img src="img/coffeehouse-2600877.jpg" alt="IKEBUKURO COFFEE"></a>
<p class="caption">ドリップコーヒーの2倍コーヒーを使い、丁寧に入れたアイスコーヒーをご提供しています。</p>
</div>

<section class="recommend">
<h2>おすすめメニュー</h2>

<div class="menu">
<a href="#">
<p class="comment"><img src="img/coffee-sweets-4542944.jpg" alt="カフェラテとスイーツ"></p>
<div class="menu_copy">
<h3>カフェラテとスイーツ</h3>
<p>好評のカフェラテとスイーツのセット。アフタヌーンティーにいかがでしょうか？</p>
</div>
</a>

<a href="#">
<p class="comment"><img src="img/coffee-beans-167001.jpg" alt="厳選した豆を深煎り"></p>
<div class="menu_copy">
<h3>厳選した豆を深煎り</h3>
<p>厳選した豆を深煎りで。ご自宅でお楽しみいただけるコーヒー豆、店頭で販売しています。</p>
</div>
</a>

<a href="#">
<p class="comment"><img src="img/iced-coffee-3908006.jpg" alt="アイスコーヒー"></p>
<div class="menu_copy">
<h3>アイスコーヒー</h3>
<p>アイスコーヒー、夏はもちろん冬にもご提供します。深煎りをさらに2倍利用して深みを出しています。</p>
</div>
</a>
</div>
</section>

<section class="howto">
<h2><span class="browngray">★</span>おいしいコーヒーの特徴と入れ方<span class="browngray">★</span></h2>
<div class="content">
<a href="#">
  <p class="comment"><img src="img/coffee-steel-2595828.jpg" alt="画像1"></p>
  <p class="comment">コーヒー豆の種類と特徴</p>
</a>

<a href="#">
  <p class="comment"><img src="img/coffee-drip-3908007.jpg" alt="画像2"></p>
  <p class="comment">おいしいドリップ珈琲の入れ方入門</p>
</a>
</div>
</section>

</div><!-- .container -->

  
<footer>
<div class="footer">
<nav>
  <ul class="nav">
    <li><a href="#">トップ</a></li>
    <li><a href="#">メニュー</a></li>
    <li><a href="#">店舗</a></li>
    <li><a href="#">こだわり</a></li>
    <li><a href="#">お問い合わせ</a></li>
    <li><a href="#">企業情報</a></li>
    <li><a href="#">採用情報</a></li>
  </ul>
</nav>

<p class="copyright">&copy; 2020 IkebukuroCoffee</p>
</div>
</footer>
</body>
</html>

＜CSS＞

@charset "UTF-8";

/* reset */
html,body,header,footer,nav,div,h1,h2,h3,p,ul,li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
  color: inherit;
}
img {
  border: none;
  vertical-align: bottom;
}

/* body */
body {
  font-size: 16px;
  color: #333;
  background: #C6D2D7;
}
/* layout */
.container {
  width: 900px;
  margin: 0 auto;
  background: #FFF;
  padding: 20px 30px 30px;
}

/* header */
header {
  display: flex;
  justify-content: space-between;/* 水平方向 */
  align-items: flex-end;/* 垂直方向 */
  height: 100px;
  margin-bottom: 20px;
}
h1 a {
  display:block;
  font-size: 48px;
  font-family: 'Averia Serif Libre', cursive;
  line-height: .9;
}
.shop_jp {
  font-size: 20px;
  margin-left: 22px;
  color: #795247;
}
.nav {
  display: flex;
  justify-content: flex-end;/* 水平方向 */
}
.nav li a {
  display: block;
  width: 100px;
  text-align: center;
  border-left: 1px solid #2C1E1A;
  line-height: 2.0;
}
.nav li:last-child a {
  border-right: 1px solid #2C1E1A;
}
.nav li a:hover {
  color: #FFF;
  background: #9E817A;
}

/* billborad */
.billboard {
  position: relative;
  margin: 0 0 30px;
}
.caption {
  background: rgba(255,255,255,0.85);
  padding: 15px;
  width: 306px;
  line-height: 1.6;
  position: absolute;
  right: 15px;
  top: 110px;
}

/* recommend */
.recommend h2 {
  border: 1px solid #9E817A;
  border-left: 12px solid #9E817A;
  padding: 8px 10px 8px 12px;
  margin: 0 0 15px;
}
.menu {
  display: flex;
  justify-content: space-between;/* 水平方向 */
}
.menu a {
  flex-basis: calc(98% / 3);
  padding: 20px;
  margin-right: 1.7%;
  margin-bottom: 30px;
  background-color: #EFF2F4;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, transparent), color-stop(.5, #E1E6EB), to(#ffffff)),
  -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, transparent), color-stop(.5, #E1E6EB), to(#ffffff));
  -webkit-background-size: 5px 5px;
}
.menu a:last-child {
  margin-right: 0;
}
.menu h3 {
  color: #795247;
  padding: 10px 0 5px;
  margin-bottom: 8px;
  border-bottom: 1px solid #795247;
}
.menu p {
  line-height: 1.4;
  letter-spacing: -.85px;
}

/* content */
.howto h2 {
  color: #795247;
  font-size: 22px;
  margin-bottom: 10px;
}
.content {
  display: flex;
  justify-content: space-between;
}
.content a {
  width: calc(98% / 2);
  padding: 1.35%;
  border: 1px solid #9E817A;
  margin-right: 1.5%;
}
.content img {
  margin-bottom: 10px;
}

/* footer */
footer {
  background: #3D2924;
  padding: 20px 0 50px;
}
.footer {
  width: 960px;
  margin: 0 auto;
  font-size: 14px;
  color: #FFF;
  display: flex;
  justify-content: space-between;
}
footer .nav li a {
  width: inherit;
  padding: 0 13px;
  border-left: 1px solid #FFF;
  line-height: 1.6;
}
footer .nav li:last-child a {
  border-right: 1px solid #FFF;
}
.copyright {
  align-self: center;
}

/* item */
a:hover, img:hover {
  opacity: 0.5;
}
.comment {
  text-align: center;
}
.bluegray {
  color: #E1E6EB;
}
.browngray {
  color:#9E817A;
}

@media screen and (max-width: 480px) {
  /* font-size */
  html { font-size: 62.5%; }/*スマホはremのみ*/
  body { font-size: 1.4rem; }

  /* images */
  img {
    max-width: 100%;
    height: auto;
  }

  /* layout */
  .container {
    width: 94%;
    padding: 3%;
  }
  
  /* header */
  header {
    display: block;
    text-align: center;
    margin-bottom: 9%;
  }
  h1 {
    font-size: 4rem;
    margin-bottom: 2%;
    max-width: 100%;
  }
  .shop_jp {
    font-size: 1.8rem;
    margin-left: 3.5%;
  }
  .nav {
    justify-content: space-between;
  }
  .nav li {
    flex-basis: calc(100% / 4);
  }
  .nav li a {
    width: inherit;
    font-size: 1.6rem;
    line-height: 2;
    box-sizing: border-box;
  }

  /* billborad */
  .billboard {
    position: static;
    margin: 0 0 3%;
  }
  .caption {
    background: none;
    width: 96%;
    padding: 2% 4%;
    font-size: 1.65rem;
    line-height: 1.3;
    position: static;
  }

  /* recommend */
  .menu {
    display: block;
    margin-bottom: 6%;
  }
  .menu a {
    display: flex;
    padding: 0;
    margin-right: 0%;
    margin-bottom: 4%;
    background: none;
  }
  .menu_copy {
    margin-left: 3%;
  }
  .menu h3 {
    color: #795247;
    padding: 0 0 2%;
    margin-bottom: 3%;
  }
  .menu p {
    font-size: 1.45rem;
  }
  
  .menu_copy {
    flex-basis: 50%;
  }

  /* content */
  .howto h2 {
    font-size: 1.8rem;
  }
  .content {
    display:block;
  }
  .content a {
    display: block;
    width: 96%;
    padding: 2%;
    margin-right: 0;
    margin-bottom: 3%;
  }

  /* footer */
  footer {
    padding: 0;
  }
  .footer {
    width: 100%;
    display: block;
  }
  .footer .nav {
    display: block;
    text-align: center;
  }
  footer .nav li a {
    display: block;
    padding: 0 0;
    border-left: none;
    border-bottom: 1px solid #FFF;
    line-height: 2.6;
  }
  footer .nav li:last-child a {
    border-right: none;
  }
  .copyright {
    text-align: center;
    line-height: 5.0;
  }

  /* item */
  .comment {
    text-align: left;
  }
  .howto .comment {
    text-align: center;
  }
}

＜参考サイト＞

odnax.hatenablog.com
odnax.hatenablog.com
www.clarenet.co.jp

2020-05-01

Flexboxについて

HTML CSS Flexbox

Flexboxとは

CSS3 Flexible Box (可変ボックス)
ボックスのレイアウト方法を定めるCSSの機能
ボックスを任意の方向にレイアウトしたり、ボックスの大きさを伸縮可能（flex）にします
- flex：融通のきく、柔軟なという意味

フレックスボックスの基本概念

developer.mozilla.org

Flexboxで可能なボックスの操作

Flexコンテナー（親要素）の中にFlexアイテム（子要素）入れて以下の操作ができます。

横並び
縦並び
拡大
縮小
左揃え / 中央揃え / 右揃え
上揃え / 中央揃え / 下揃え
均等配置
複数行のレイアウト
並び方向の変更
並び順の変更

レイアウトの指定方法

Flexコンテナー（親要素）の直下にFlexアイテム（子要素）を記述します。
- ※ナビゲーションなどでulliで記述する場合もあります。

＜HTML＞

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
</div>

f:id:hak00810:20200508151022p:plain

＜CSS＞
以下の指定で、子要素のdiv.itemが横並びになります。
インライン要素の場合はdisplay: inline-flex;を使用します。

.container {
  display: flex;
}

f:id:hak00810:20200508151049p:plain

▽よく使用するもののメモ▽

Flexコンテナー（親要素）に指定するプロパティ

flex-direction ：子要素の並びの指定

.container {
  display: flex;
  flex-direction: row;
}

row（初期値）：横並び
column：縦並び

※　-reverseは逆順
※RTL（右から左に流れる言語など）のときは逆向き

flex-wrap：子要素の折り返しの指定

子要素を一行か複数行に並べる指定をできます。
複数行の場合は、子要素が親要素の幅を超えた場合に折り返して複数行になります。

nowrap（初期値）：子要素を折り返さず、一行に並べる
wrap：子要素を折り返し、複数行に上から下へ並べる

※　-reverseは逆順

flex-flow：flex-directionとflex-wrapをまとめて指定（ショートハンド）

＜CSS＞

.container {
  display: flex;
  flex-flow: row wrap;
}

justify-content：水平方向の指定

flex-start（初期値）：左揃え
flex-end：右揃え
center：中央揃え
space-between：均等配置（左右の隙間なし）
space-around：均等配置（左右の隙間あり）

※RTL（右から左に流れる言語など）のときは逆向き

align-items：垂直方向の指定

stretch（初期値）：親要素の高さ、またはコンテンツの一番多い子要素の高さに合わせて広げて配置
flex-start：上揃え
flex-end：下揃え
center：中央揃え
baseline：ベースライン揃え

align-content：複数行のときの指定

＜CSS＞

.container {
  display: flex;
  flex-wrap: wrap;/* 1行で折り返しが効いていない場合は、nowrap（初期値）でalign-contentが無効になるので入れる */
  align-content: space-between;/* 垂直方向 均等配置（左右の隙間なし） */
}

stretch（初期値）：親要素の高さに合わせて広げて配置
flex-start：上揃え
flex-end：下揃え
center：中央揃え
space-between：均等配置（上下の隙間なし）
space-around ：均等配置（上下の隙間あり）

ポイント

left/topはflex-start、right/bottomはflex-endを使用します。

右下揃えの場合

＜CSS＞

.container {
  display: flex;
  justify-content: flex-end;/* 水平方向 右揃え */
  align-items: flex-end;/* 垂直方向 下揃え */
}

Flexアイテム（子要素）に指定するプロパティ

※Flexアイテム内で個別の指定をする場合は、クラス名を個別につける必要があります。
＜HTML＞

<div class="container">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
</div>

flex-basis：子要素のベースとなる幅の指定

auto（初期値）
widthのように、パーセンテージやピクセル値で指定できる

align-self：子要素の垂直方向の指定

auto（初期値）：親要素の align-items の値を継承
stretch：親要素の高さ、またはコンテンツの一番多い子要素の高さに合わせて広げて配置
flex-start：（親要素の開始位置から）上揃え
flex-end：（親要素の終点から）下揃え
center：中央揃え
baseline：ベースライン揃え

応用

ヘッダー部分の右上にロゴ、左下にナビゲーションのレイアウト

PC表示：全体を左右均等下揃え、ロゴを左上揃えにします。
SP表示：画面全体に広げます。

＜PC表示＞
f:id:hak00810:20200508172812p:plain
＜SP表示＞
f:id:hak00810:20200508222203p:plain

＜HTML＞

<div class="container">
  <h1 class="logo">logo</h1>
  <nav>
    <ul>
      <li>Item1</li>
      <li>Item2</li>
      <li>Item3</li>
      <li>Item4</li>
    </ul>
  </nav>
</div>

＜CSS＞

.container {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 250px;/* 任意 */
}
.logo {
  justify-content: flex-start;
  align-self: flex-start;
}
ul {
  display: flex;
}
@media screen and (max-width: 480px) {
  .container  {
    display: block;
    justify-content: center;
    align-items: flex-start;
    text-align: center;
  }
  li {
    width: calc(100% / 4);
  }
}

３カラムレイアウト

PC表示：３カラム
SP表示：１カラム

＜PC表示＞
f:id:hak00810:20200508225305p:plain
＜SP表示＞
f:id:hak00810:20200508225356p:plain

＜HTML＞

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

＜CSS＞

.container  {
  display: flex;
  justify-content: space-between;
  height: 250px;/* 任意 */
}
.item {
  flex-basis: calc(100% / 3);
}
@media screen and (max-width: 480px) {
  .container {
    display: block;
  }
  .item {
    flex-basis: 100%;
  }
}

＜参考サイト＞

odnax.hatenablog.com
developer.mozilla.org
www.webcreatorbox.com
mamewaza.com

2020-04-30

マルチデバイス対応 - レスポンシブWebデザイン

HTML CSS レスポンシブWebデザイン

マルチデバイス

f:id:hak00810:20200513155250p:plain
現在、Webページは様々なデバイスで閲覧されています。ここでのデバイスとは、パソコン、スマートフォンやタブレットなどのモバイルなどを指します。
特にスマートフォンは画面が小さいため、パソコン用のデザインをそのまま閲覧しようとすると、画像や文字が小さいためズームやピンチなどの操作をします。この操作が多いほどユーザーのストレスになり、ページの離脱に繋がります。そのため、デバイスごとに最適な見栄えを意識しなければならなくなりました。

＜参照＞

Googleデベロッパーガイド＞サイトをモバイル対応にする

developers.google.com

レスポンシブWebデザイン

ブラウザのウィンドウ幅に合わせてCSSでWebページのレイアウトを変更する手法のこと。
CSS内で、複数のデバイスに対応させていきます。

＜デメリット＞

CSSの記述が複雑
無駄な処理が生じる恐れあり。
PCサイトに切り替えられない。

３つの技術的な要素で構成

1. Fluid Grid（フルードグリッド）

以下２つを合わせたもののことを指します。

Grid Design（グリッドデザイン）：Webページの要素を罫線や升目に沿って配置するデザイン
Fluid Design（フルードデザイン）：ブラウザーの横幅が変わってもレイアウトを維持したまま要素のサイズを調整するデザイン

レスポンシブWebデザインでは、最初にグリッドデザインによって部品や表示領域をpx単位で配置していき、レイアウトが整った後に、値を％に変換してフルードデザインに変更します。

2. Fluid Image（フルードイメージ）

画像のサイズが、レイアウトの大きさに準じて拡大・縮小する手法のことです。CSSでのみ実装できます。

Fluid=流動的な=ブラウザの横幅が変化しても、指定したレイアウトを維持したまま要素のサイズが拡大・縮小します。

3. Media Queries（メディアクエリ）

画像解像度、ウィンドウの幅、デバイスの向きなどの指定条件にあわせて別々のCSSを適用する技術です。
レスポンシブWebデザインではメディアクエリーを使ってスクリーンサイズに応じたCSSに切り替えます。

ブレイクポイント：デバイスサイズによってCSSを個別に適用させるために指定した画面サイズの値のことです。メディアクエリで指定します。

HTMLのhead内にビューポートを設置

<head>
〜
<meta name="viewport" content="width=device-width">
〜
</head>

設定しない場合は、デフォルトの「980px」に設定されます。
デスクトップ（パソコン）の場合、「width」はブラウザの横幅、「device-width」はモニタの画面解像度
スマートフォン、タブレットの場合、「width」はビューポートの横幅、「device-width」はOSによって処理が変化

CSSにメディアクエリを設置

ブレイクポイントに決まった数値はないので、そのとき多く使用されているデバイスに準じます。

ケース１

デバイス	width
デスクトップ/パソコン（PC）	768px以上
タブレット（TB）	768px
スマートフォン（SP）	480px / 568pxなど

※「768px以上」はPC用、「767px以下」はモバイル用のCSSに切り替えます。（PC用のデザインは、画面の横幅がNexus7の600px以下になるとメニューの配置が崩れたり、読みづらくなるため）

ケース２

デバイス	width
デスクトップ/パソコン（PC）	960px以上
タブレット（TB）	768〜959px
スマートフォン（SP）	767px以下

マルチデバイスの場合

＜CSS＞

@charset "UTF-8";

/* reset */
〜

/* 767pxより上のPC用表示を記述 */
〜

/* 767px以下のTB用表示を記述 */
@media screen and (max-width: 767px) {
  〜
}

/* 480px以下のSP用表示を記述 */
@media screen and (max-width: 480px) {
  〜
}

モバイルファーストの場合

＜CSS＞

@charset "UTF-8";

/* reset */
〜

/* 480px未満のSP用表示を記述 */
〜

/* 480px以上のTB用表示を記述 */
@media screen and (min-width: 480px) {
  〜
}

/* 768px以上のPC用表示を記述 */
@media screen and (min-width: 768px) {
  〜
}

画像がある場合の設定

主にスマートフォンのメディアクエリ内に追加します。
＜CSS＞

img {
  max-width: 100%;
  height: auto;
}

フォントサイズの設定

スマートフォンはremを使用します。
HTMLで使用している要素のみを記述します。

マルチデバイスの場合

＜CSS＞

@charset "UTF-8";
/* reset */
〜

/* body */
body {
  font-size: 16px;
}

@media only screen and (max-width: 480px) {
  〜
  /* font-size */
  html { font-size: 62.5% }/* ≒16px */
  h1 { font-size: 3.2rem }/* ≒32px */
  h2 { font-size: 2.8rem }/* ≒28px */ 
  h3 { font-size: 2.4rem }/* ≒24px */
  h4 { font-size: 2.0rem }/* ≒20px */
  p { font-size: 1.6rem }/* ≒16px */
  〜
}

モバイルファーストの場合

＜CSS＞

@charset "UTF-8";

/* reset */
〜

/* html */
html {
  font-size: 62.5%;
}

/* body */
body {
  font-size: 1.6rem;
}
〜

/* 480px以上のTB用表示を記述 */
@media screen and (min-width: 480px) {
  〜
}

/* 768px以上のPC用表示を記述 */
@media screen and (min-width: 768px) {
  html {
    font-size: 100%;
/* あまりないケースですが、レスポンシブ化されていないWebサイト（PC表示のみ作成）をモバイルファーストにする場合、上の62.5%を100％にリセットして、各要素の既存フォントサイズを記述します。 */
  }
  body {
    font-size: 16px;
  }
}

モバイルフレンドリーテストでチェック

制作したWebサイトがマルチデバイス対応しているかをチェックできます。
search.google.com

ポイント

ビューポートの設置
コンテンツの横幅が画面の横幅を超えないように
テキストが小さすぎないように（可読性）
隣り合うリンクが近すぎないように（指でタップすることを念頭に置く）
マルチデバイスに対応したプラグインを使用する

メディアクエリ内の記述の注意点

メディアクエリの上に記述したものをデフォルトに戻したい（解除/リセット）場合は、デフォルトに戻す記述が必要です。
ショートハンドとそうでないものは、各々対応したもので記述します。

＜よく使用するデフォルト＞

background: #AAA;　▶︎　background: none;
border: 1px solid #CCC;　▶︎　border: none;
margin: 5px;　▶︎　margin: 0;
margin-left: 5px;　▶︎　margin-left: 0;
text-align: center;　▶︎　text-align: left;
position: absolute;　▶︎　position: static;
float: left;　▶︎　float: none;
display: flex;　▶︎　display: block;
max-width: 999px;　▶︎　max-width: initial;
max-height: 999px;　▶︎　max-height: auto;

＜参考サイト＞

odnax.hatenablog.com
odnax.hatenablog.com
odnax.hatenablog.com
odnax.hatenablog.com
yachin29.hatenablog.com

2020-04-27

Google Chrome ページ全体のスクリーンショット

その他

Google Chrome スクリーンショット

Webページ全体（スクロール）のスクリーンショットを撮るのに、長らくブラウザGoogle Chromeの拡張機能「Full Page Screen Capture」や「FireShot」などを使用していましたが、徐々に機能が怪しくなってきたので別の機能を使用することにします。

右上縦３点＞その他のツール＞デベロッパーツールcommand＋option＋i
「Toggle device toolbar」アイコンをクリック

f:id:hak00810:20200427212810j:plain

上部バー＞「Responsive」＞1920（PC表示）＞右上縦３点の下の縦３点＞Capture full size screenshot

f:id:hak00810:20200427213350p:plain

上部バー＞「確認したいモバイル」＞右上縦３点の下の縦３点＞Capture full size screenshot

f:id:hak00810:20200427213413p:plain

PCのダウンロードフォルダに自動で保存されます。

（別手順：デベロッパーツールを開く＞command＋shift＋pで開いたバーに「full」と入力＞...＞Capture full size screenshotを選んでreturn）

フルページで取れない場合の対処法

見たままの箇所しかスクリーンショットできない場合は、以下の手順を行うとうまくいきました。

「確認したいモバイル」を設定した状態で、リロード＞...＞Capture full size screenshot
上部バー＞「Responsive」＞375×2000（SP表示）：2000など実際よりも長い高さを入力＞キャプチャ画面の右と下に出てくるメジャーのようなものの上にカーソルをあわせ、↔︎で高さを合わせる＞...＞Capture full size screenshotを選んでreturn

フルスクリーンレイアウトの場合の対処法

（もっと良い方法が他にあると思います！）
背景画像がフルスクリーンのせいか、うまくスクリーンショットがとれないです。
その場合は下のサイズにあわせて、１ページずつCapture screenshotを取り、Photoshopなどでつなげるというアナログな方法をとっています。

- PC表示：Responsive：1920×1080px
- SP表示：iPhone 6/7/8

＜参考サイト＞

47ossan.com
blanche-toile.com

2020-04-25

TOPへ戻るボタンをつくる２

HTML CSS jQuery レスポンシブWebデザイン

「TOPへ戻る」ボタン

Font Awesome Iconsで設置
- 過去の記事の際のIllutratorでボタンをつくる手間がなくなります。
jQueryで動作設定
- 初期画面ではマークがでず、ある程度スクロールするとボタンが出ます。
- SP表示でボタンが表示されます。（PC表示ではボタン非表示）
- スクロールがぬるっと動く「スムーススクロール」を設定します。

例

＜PC表示＞
f:id:hak00810:20200427210235p:plain
＜SP表示＞
f:id:hak00810:20200427210018p:plain

実践

＜HTML＞

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<title>トップへ戻るボタン２</title>
</head>
<body>
<header>
<div class="container">
  <h1>見出し</h1>
</div><!-- container -->
</header>

<main>
<div class="container">
</div><!-- container -->
</main>

<footer>
<div class="container">
</div><!-- container -->
</footer>
  
<p id="to-top"><a href="#"><i class="fa fa-chevron-circle-up" aria-hidden="true"></i></a></p>
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function(){
  var topBtn = $('#to-top');
  topBtn.hide();
  //スクロールが100に達したらボタン表示
  $(window).scroll(function(){
    if($(this).scrollTop() > 100) {
      topBtn.fadeIn();
    } else {
      topBtn.fadeOut();
    }
  });
  //スムーススクロール
  $('a[href^="#"]').click(function(){
    var speed = 500;
    var href= $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top;
    $("html, body").animate({scrollTop:position}, speed, "swing");
    return false;
  });
});
</script>
</body>
</html>

＜CSS＞

@charset "UTF-8";

/* reset */
html,body,header,footer,div,h1 {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
a {
  text-decoration: none;
  color: inherit;
}

/* layout */
.container {
  width: 960px;
  margin: 0 auto;
  height: 300px;/*要素がないので高さを確保*/
}

header {
  background: #FF0;
  padding: 5%;
}
main {
  background: #DDD;
}
footer {
  background: #0FF;
}
#to-top a {
  display: none;
}

@media screen and (max-width: 768px){
  /* layout */
  html {
    font-size: 62.5%;/* =10px */
  }
  body {
    font-size: 1.6rem;/* =16px */
    color: #797979;
  }
  .container {
    width: 100%;
  }
  /* to-top */
  #to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
  }
  #to-top a {
    display: block;
    color: #000;
    background: #FFF;
    text-align: center;
    border-radius: 50%;
    box-sizing: border-box;
  }
  #to-top a:hover {
    color: #666;
  }
  .fa-chevron-circle-up {
    font-size: 4rem;
  }
}

＜参考サイト＞

cotodama.co
techacademy.jp

2020-04-24

HTML＋CSS＋スライド - モバイルファースト - 実践

HTML CSS jQuery レスポンシブWebデザイン

店舗サイトをつくるモバイルファースト

前回の実践のHTMLを利用して、CSSをモバイルファーストで作成します。

モバイルファーストとは

主にスマートフォンでストレスなく利用できるデザインにすること。
- モバイル：スマートフォン、タブレットなど
主にスマートフォン向けサイトを優先的に制作・公開すること。 *この意味解釈には、否定的な意見もあります。

インターネットはパソコンから始まったため、Webサイト制作（CSS/見栄え）は、パソコンから始めて、後からモバイルにも対応させていくのが基本的な流れです。
しかし、モバイルは、画面の大きさや通信速度などの制限があるため、パソコンの機能を全て詰め込んだままモバイル対応させると、サイトが重いなどの問題が起こります。その改善のため「モバイルファースト」という手法が生まれました。

ポイント

「TOPへ戻る」ボタンをjQuery / Font Awesome Iconsで設置
- スクリプトが長くなったので、読み込み時間の軽減のためbody内の最下部へ移動
前回のPCプレビューではうまく作動していたbxSliderが、SPプレビューでは不具合があるためスクリプトを変更

実践

例

出典：02/25 モバイルファースト - 課題 - 求職者支援訓練12月19日開講Webサイト制作科白描

解答

＜HTML＞

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link href="css/jquery.bxslider.css" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Sawarabi+Gothic" rel="stylesheet">
<link href="css/style_mbfirst.css" rel="stylesheet">
<title>タイ料理のお店 | THAI-NAMA</title>
</head>
<body>
<header>
<div class="container">
<h1><a href="#"><img src="img/logo.jpg" alt="タイ料理のお店 THAI-NAMA"></a></h1>
<ul class="nav">
<li><a href="#">CONCEPT</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">ACCESS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
</header>

<main>
<div class="container">
<div class="mainimg">
<ul class="bxslider">
<li><img src="img/mainImage01.jpg" alt="生春巻き" title="生春巻き"></li>
<li><img src="img/mainImage02.jpg" alt="鯛" title="鯛"></li>
</ul>
</div>
<p class="intro">THAI-NAMAは<br>
タイ風の家庭的な料理をご提供しているお店です。<br>
季節感を大切に、旬のものを使いつつ、楽しんで貰えるメニューを揃えています。</p>

<div class="recommend">
<h2 class="red wf-sawarabigothic">おすすめメニュー</h2>
<ul class="subimg">
<li><a href="#"><img src="img/subimage01.jpg" alt="フォー">フォー</a></li>
<li><a href="#"><img src="img/subimage02.jpg" alt="カオソーイ">カオソーイ</a></li>
<li><a href="#"><img src="img/subimage03.jpg" alt="ヤムウンセン">ヤムウンセン</a></li>
</ul>
</div>
	
<div class="news">
<h2 class="wf-sawarabigothic">NEWS</h2>
<dl>
<dt><i class="fa fa-square red" aria-hidden="true"></i>2019/12/15</dt>
<dd>冬のメニューを追加しました</dd>
<dt><i class="fa fa-square red" aria-hidden="true"></i>2019/02/01</dt>
<dd>春の新作メニューを追加しました</dd>
</dl>
</div>
</div><!-- container -->
</main>

<footer>
<div class="container">
<ul class="nav">
<li><a href="#">CONCEPT</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">ACCESS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
<div class="wrapper">
<div class="info">
<p class="tel">03-1234-4567</p>
<p class="email">reservation@thai-nama.net</p>
</div>
<div class="axs">
<p>〒150-0001 東京都渋谷区神宮前3-4-5 タイ生ビル1F<br>
JR渋谷駅徒歩5分<br>
JR原宿駅徒歩6分<br>
副都心線、千代田線明治神宮前徒歩7分</p>
</div>
</div>
<p class="copy"><small>&copy; 2019 タイ料理のお店 THAI-NAMA</small></p>
</div><!-- container -->
</footer>
  
<p id="to-top"><a href="#"><i class="fa fa-chevron-circle-up" aria-hidden="true"></i></a></p>
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function(){
  var topBtn = $('#to-top');
  topBtn.hide();
  //スクロールが100に達したらボタン表示
  $(window).scroll(function(){
     if($(this).scrollTop() > 100) {
       topBtn.fadeIn();
      } else {
       topBtn.fadeOut();
      }
  });
  //スムーススクロール
  $('a[href^="#"]').click(function(){
    var speed = 500;
    var href= $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top;
    $("html, body").animate({scrollTop:position}, speed, "swing");
    return false;
  });
});
</script>
<script src="js/jquery.bxslider.js"></script>
<script>
$(function(){
  $('.bxslider').bxSlider({
    auto: true,
    pager: false,//スライダー下の点を消す
    captions: true,
  });
});
</script>
</body>
</html>

＜CSS＞

@charset "UTF-8";

/* reset */
html,body,header,footer,div,h1,h2,h3,p,ul,li,dl,dt,dd {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
  color: inherit;
}
img {
  border: none;
  vertical-align: bottom;
  max-width: 100%;/*フルードデザイン*/
}

/* layout */
html {
  font-size: 62.5%;/* =10px */
}
body {
  font-size: 1.6rem;/* =16px */
  color: #797979;
}
.container {
  padding: 0 5%;
}

/* nav */
header {
  border-bottom: 3px solid #a40000;
  text-align: center;
  margin: 4% 0 2%;
}
h1 {
  margin-bottom: 2%;
}
.nav {
  display: flex;
  letter-spacing: .1rem;
}
.nav a {
  display: block;
  line-height: 2.4;
}
header .nav {
  justify-content: space-around;
  font-size: 1.6rem;
  margin: 0 6% 0 6%;
}
footer {
  background: #8fc31f;
  color: #FFF;
  padding: 0 0 3%;
}
footer .nav {
  display: block;
  line-height: 2.6;
}
footer .container {
  padding: 0;
}
footer .nav a {
  font-size: 1.6rem;
  text-align: center;
  border-bottom: 1px solid #FFF;
}

/* slider */
.bx-wrapper {
  border: none;
  margin-bottom: 5%;
}
.bx-wrapper .bx-prev {
  background: url(../img/controls.png)
}
.bx-wrapper .bx-next {
  background: url(../img/controls.png) -43px -32px no-repeat;
}
.bx-wrapper .bx-loading {
  background: url('../img/bx_loader.gif') center center no-repeat #ffffff;
}
.bx-wrapper .bx-caption {
  background: none;
  left: 3%;
  top: 24%;
}
.bx-wrapper .bx-caption span {
  color: rgba(80, 80, 80, 0.75);
  font-size: 2.2rem;
}/* captions-titleを画像名として使用 */

/* item */
.intro {
  text-align: center;
  line-height: 1.6;
  margin-bottom: 40px;
}
.recommend {
  text-align: center;
}
.recommend h2 {
  margin-bottom: 10px;
}
.wf-sawarabigothic {
  font-family: "Sawarabi Gothic";
}
.red {
  color: #a40000;
}
.subimg {
  display: block;
  justify-content: space-between;
}
.subimg li {
  width: 300px;
  padding: 6px;
  border: 1px solid #797979;
  margin: 4px auto 26px;
}
.subimg img {
  margin-bottom: 6px;
}
.news {
  margin-bottom: 26px;
}
.news h2 {
  margin: 20px 0 10px;
}
.fa-square {
  margin-right: 5px;
}
.news dt {
  float: left;
  margin-right: 10px;
}
.news dt, .news dd {
  line-height: 1.6;
}

/* footer */
.wrapper {
  padding: 5%;
}
.info {
  margin: 0 0 5%;
}
.axs {
  font-size: 1.4rem;
}
.axs p {
  line-height: 1.6;
}
.tel {
  font-size: 2.4rem;
  margin-bottom: 1%;
}
.email {
  font-size: 2rem;
}
.copy {
  text-align: center;
}

/* to-top */
#to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
}
#to-top a {
  display: block;
  color: #000;
  background: #FFF;
  text-align: center;
  border-radius: 50%;
  box-sizing: border-box;
}
#to-top a:hover {
  color: #666;
}
.fa-chevron-circle-up {
  font-size: 4rem;
}

@media screen and (min-width: 768px){
  /* layout */
  html {
    font-size: 100%;
  }
  body {
    font-size: 16px;
  }
  .container {
    width: 960px;
    margin: 0 auto;
  }

  /* nav */
  header {
    overflow: hidden;
    margin: 0;
  }
  h1 {
    float: left;
    margin: 52px 0 0;
  }
  .nav {
    letter-spacing: 2px;
  }
  header .nav {
    justify-content: flex-end;
    align-items: flex-end;
    padding-top: 70px;
    margin: 0;
  }
  header .nav a {
    font-size: 14px;
    line-height: 3.0;
    padding-left: 42px;
  }
  footer {
    padding: 20px 0;
  }
  footer .nav {
    display: flex;
    justify-content: space-around;
    width: 700px;
    margin: 0 auto 30px;
  }
  footer .nav a {
    border: none;
    font-size: 18px;
  }

  
  /* item */
  .intro {
    line-height: 2.0;
  }
  .subimg {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #797979;
  }
  .subimg li {
    margin: 4px 4px 26px;
  }

  /* footer */
  .wrapper {
    overflow: hidden;
    margin-bottom: 26px;
    padding: 0;
  }
  .info {
    float: left;
    width: 400px;
    height: 90px;
    margin: 0 20px;
  }
  .axs {
    float: right;
    width: 500px;
    font-size: 14px;
  }
  .tel {
    font-size: 24px;
  }
  .email {
    font-size: 20px;
  }
  #to-top a {
    display: none;
  }
}

＜参考サイト＞

odnax.hatenablog.com
conta.tokyo
webtan.impress.co.jp

Emmetとは

各種記号

HTML

head内のcssリンク

head内のfaviconリンク

head内のtouch iconリンク

head内のビューポートの設置

body内のナビゲーション

body内の定義リスト

レイアウト系

余白

文字

その他

店舗サイトをつくる

実践

例

テキスト

解答

Flexboxとは

フレックスボックスの基本概念

Flexboxで可能なボックスの操作

レイアウトの指定方法

Flexコンテナー（親要素）に指定するプロパティ

flex-direction ：子要素の並びの指定

flex-wrap：子要素の折り返しの指定

flex-flow：flex-directionとflex-wrapをまとめて指定（ショートハンド）

justify-content：水平方向の指定

align-items：垂直方向の指定

align-content：複数行のときの指定

ポイント

Flexアイテム（子要素）に指定するプロパティ

flex-basis：子要素のベースとなる幅の指定

align-self：子要素の垂直方向の指定

応用

ヘッダー部分の右上にロゴ、左下にナビゲーションのレイアウト

３カラムレイアウト

マルチデバイス

レスポンシブWebデザイン

３つの技術的な要素で構成

1. Fluid Grid（フルードグリッド）

2. Fluid Image（フルードイメージ）

3. Media Queries（メディアクエリ）

HTMLのhead内にビューポートを設置

CSSにメディアクエリを設置

ケース１

ケース２

マルチデバイスの場合

モバイルファーストの場合

画像がある場合の設定

フォントサイズの設定

マルチデバイスの場合

モバイルファーストの場合

モバイルフレンドリーテストでチェック

ポイント

メディアクエリ内の記述の注意点

フルページで取れない場合の対処法

フルスクリーンレイアウトの場合の対処法

「TOPへ戻る」ボタン

例

実践

店舗サイトをつくる モバイルファースト

モバイルファーストとは

ポイント

実践

例

解答

店舗サイトをつくるモバイルファースト