道具の使い方を覚える

PCの使い方

物を作るうえで、その物を作る為の道具の使い方を覚える、という事が非常に大事になってきます。web制作者にとってパーソナルコンピューター（PC）は料理人にとっての包丁や美容師にとってのハサミと同様に、非常に大事な道具です。
今までのようにユーザーとしての使い方では無く、制作者としての使い方を覚えていきましょう。

ブラウザーの使い方

ブラウザーとは？

ウェブブラウザ（インターネットブラウザ、web browser）とは、 World Wide Web (WWW) の利用に供するブラウザであり、ユーザエージェント (UA) である。具体的には、ウェブページを画面や印刷機に出力したり、ハイパーリンクをたどったりするなどの機能がある。単にブラウザ（ブラウザー）と呼んだ場合、多くはウェブブラウザのことを指す。

授業ではFirefoxとGoogle Chromeの2つのブラウザーを主に使用していきます。

Mozilla Firefox

非営利団体である「Mozilla Foundation」が開発したブラウザー。
Web開発に適したアドオンと呼ばれる追加機能が豊富。最新のHTML5とCSS3による表示が可能。

www.mozilla.org

Google Chrome

Googleが開発しているブラウザーでGoogleアカウントと同期する事で様々な拡張が可能。
世界的に見るとシェアNo1ブラウザー。最新のHTML5とCSS3による表示が可能。

www.google.co.jp

Web制作におけるIE(Internet Explorer)

日本では長年ダントツのシェアを占めていたが、以前から不具合が多くweb制作者にとって悩みのタネでした。
最近は事情も変わって場合によってはIE未対応でOKの場合も出て来ています。

japanese.engadget.com

「2009年1月から2018年8月まで」デスクトップでのブラウザーのシェア推移

2019年1月現在の日本国内のブラウザーシェア

◆ 2019/01期の国内シェアランキング

1位 Chrome 58.46% 　2位 IE 15.19% 　3位 Firefox 9.47% 　4位 Safari 8.3% 　5位 Edge 6.69% 　6位 Opera 0.84% 　7位 Vivaldi 0.19% 　8位 QQ Browser 0.16% 　9位 Sleipnir 0.16% 　10位 その他 0.54% 　

gs.statcounter.com

検索の仕方を覚える

検索の仕方を覚える、というのもサイト制作の習得の為に必要なスキルです。

「AND」検索

例（池袋　カフェ）
一番使われている方法で２つ以上のキーワードを入力して検索精度を上げることができます。
キーワード間に一文字分のスペース　（半角、全角どちらでも可）　を入れる。

「OR」検索

例（マイケル・ジャクソン OR Michael Jackson）
たとえばマイケル・ジャクソンを調べるときに日本語で「マイケル・ジャクソン」と表記したサイトと英語で「Michael　Jackson」と表記した２種類があり場合に、そのどちらも検索結果に出したい場合などに使うのが「OR」検索です。
キーワードを半角大文字「OR」、もしくはパイプ「|」で区切り、その前後には半角スペースを入れます。

「マイナス」検索

「キーワード1」で検索したいが「キーワード2」の情報は除きたい場合、「-」の後ろに書いたキーワードを除外して検索することができます。
例：英会話　-教室

関連サイト検索

そのWebサイトと似たようなサイト（類似性の高いサイト）を見つけたい場合、related:を使ってみましょう。
同業種の競合サイトを見つけたい、類似サイトを探して参考にしたい時などに役立ちます。

例：related:http://toyota.jp/（※トヨタ自動車の公式HPです）
結果：日産、ホンダ、マツダ、スズキ等の公式HPがヒット

タイトル検索

タイトル名をキーワードで検索したい場合は「intitle:」「allintitle:」がおすすめです。 「intitle:」は単一のキーワードを、「allintitle:」は複数のキーワードを検索する時に使用します。

例：intitle:Web制作
結果：ページタイトルに「Web制作」を含むページがヒット

例：allintitle:Web制作　おすすめ
結果：ページタイトルに「Web制作」「おすすめ」を含むページがヒット

画像検索

• 写真の場所はどこでしょう

• 写真の人物は誰でしょう

Chromeのデベロッパーツールを使う

Google Chromeのデベロッパーツールは、サイト制作において欠かせないツールです。
他のブラウザにも同様のツールはありますが、Chromeのものが最も使いやすいと感じる人が多いのではないでしょうか。

saruwakakun.com

Gメールアカウントを作る

Googleアカウントはweb制作者にとって、もはや必須の物といえます。
また授業内でのデータのやり取りなどでもGメールを使う事が多いので、必ず取得しておきましょう。

www.google.co.jp

www.google.com

タイピングスキルを身に付ける

必ずしもブラインドタッチを習得しなければいけない訳では無いですが、早くタイピング出来ると沢山のメリットがあります。授業でも入力作業はもちろんあります。入力作業にストレスを感じてしまうと授業全体にストレスを感じてしまうので、まずは入力作業にストレスを感じなくなる程度に慣れましょう。

www.code-drill.com

フォントサイズremについて

emを使ったフォントサイズ

emは親要素のフォントサイズをそのまま継承します。一見すると判りやすいですが構造が複雑になってくると、複利計算されてしまい判り難くなってしまいます。

remを使ったフォントサイズ

次にremを使ったフォントサイズの指定です。
「rem」とは、「em」や「%」の場合、親要素（が基準）に対して相対的に指定する単位になりますが、「rem」は「root em」の略の通り、root要素（最上位の要素）に対して相対的に指定する単位の事です。

remを使う時の注意点

remをそのまま使うと計算式が非常に複雑になるので、注意が必要です。
主要ブラウザーのデフォルトの文字サイズである16pxを基準値として使い回せるように、まずはベースフォントサイズを作ります。htmlに「%」を使って、基準値サイズの「16px」を「10px」になるように記述します。こうすることで、フォントのサイズを「16px」にするためには「1.6rem」、「20px」にするには「2rem」という風にわかりやすい値で指定できるようになります。
また、bodyl要素に「font-size: 1.6rem;」を指定しないとfont-sizeを指定していない箇所のfont-sizeが全て10pxになってしまうので注意が必要です。

html { font-size: 62.5%; } /* 10px */
body { font-size: 1.6rem; } /* 16px */


h1 {
font-size:4.0rem; /* 40px */
}

html要素に62.5%を入れずに変数を使って指定する方法

mixin用ファイルに

@mixin font-size($size) {
  font-size: ($size / 16) + rem;
}

各スタイルに

h1{
@include font-size(40);
}

スマホ時にフォントサイズを画面幅に応じて可変にする

フォントサイズを可変にするには上記のremにvwとcalcを合わせて使用します。
ルート（html）のfont-sizeをcalc(100vw / 32)とすることで、iPhoneSEなどの画面幅320pxのときは基準のフォントサイズを10pxとし、ルートより下ではremを使っていくという方法です。

@media (max-width:640px){
html{
font-size: calc(100vw / 32);/*iPhoneの最小サイズ320pxの時に10px*/
}
h1 {
font-size:3.2rem;/*320pxの時32pxに*/
}
p {
font-size: 1.4rem;/*320pxの時14pxに*/
}
}

最新のcssについて

ユーザーのアンケート結果からその年のCSSの流行りや動向がわかるThe State of CSS 2020というサイトの中で、今後さらに利用頻度が増していくであろう、新しいプロパティをいくつか試してみましょう。
ただ、新しいプロパティはブラウザごとに対応状況が違うので、必ずcan I use 等で対応状況を確認しましょう。

backdrop-filter

backdrop-filterは要素の背景をぼかす事が出来ます。filterプロパティと似ていますが、filterは適用した要素自体がボケますが、backdrop-filterは適用した要素の背後の領域の色味やぼけ具合が変化します。なので、基本的にはRBGAとセットで使う事がほとんどです。

使用例

monomode.co.jp

対応ブラウザ状況

Edge：OK
Firefox：要設定変更
Chrome：OK
Safari：要ベンダープレフィックス

scroll-snap

scroll-snapを使うと、画面をスクロールしたときに特定の画面領域で止まるように制御できます。縦スクロールだけでなく横スクロールにも対応しています。

対応ブラウザ

scroll-snapはすべてのモダンブラウザで対応しています。

alvarotrigo.com

aspect-ratio

例えば、要素の幅に対してアスペクト比を使って高さを設定したい場合、今までは1:1ならpadding-top: 100%、16:9ならpadding-top: 56.25%というようにpaddingを使う方法が一般的でした。その計算や記述が不要になり、CSSで基準のwidthを指定し、aspect-ratioに比率を指定するだけでheightが自動的に算出され、アスペクト比を保つことができます。

See the Pen
aspect-ratio by yachin29 (@yachin29)
on CodePen.

対応ブラウザ状況

Edge：OK
Firefox：要設定変更
Chrome：OK
Safari：NG

2020.stateofcss.com

www.mitsue.co.jp

新しいリセットcss

リセットcssも対象ブラウザが変わる度に変わっていきます。

/* Box sizing rules */
/* Box sizingの定義 */
*,
*::before,
*::after {
  box-sizing: border-box;
}
 
/* Remove default padding */
/* デフォルトのpaddingを削除 */
ul[class],
ol[class] {
  padding: 0;
}
 
/* Remove default margin */
/* デフォルトのmarginを削除 */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}
 
/* Set core body defaults */
/* bodyのデフォルトを定義 */
body {
  min-height: 100vh;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}
 
/* Remove list styles on ul, ol elements with a class attribute */
/* class属性を持つul、ol要素のリストスタイルを削除 */
ul[class],
ol[class] {
  list-style: none;
}
 
/* A elements that don't have a class get default styles */
/* classを持たない要素はデフォルトのスタイルを取得 */
a:not([class]) {
  text-decoration-skip-ink: auto;
}
 
/* Make images easier to work with */
/* img要素の扱いを簡単にする */
img {
  max-width: 100%;
  display: block;
}
 
/* Natural flow and rhythm in articles by default */
/* article要素内の要素に自然な流れとリズムを定義 */
article > * + * {
  margin-top: 1em;
}
 
/* Inherit fonts for inputs and buttons */
/* inputやbuttonなどのフォントは継承を定義 */
input,
button,
textarea,
select {
  font: inherit;
}
 
/* Remove all animations and transitions for people that prefer not to see them */
/* 見たくない人用に、すべてのアニメーションとトランジションを削除 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

coliss.com

IE11のサポートが切れれば使用出来るHTMLやCSSの便利な機能

Windows OSのサポートには期限があり、各OSの期限は、Windows 7は2020年1月14日で終了済みで、Windows 8.1は2023年1月10日に終了となります。
Windows 7のサポート期限が過ぎた事で、今後IE11のサポートを切るという選択が一層増えてきます。
HTML5やCSS3にはIE11がサポートしていない為、使えない便利な機能が多くあります。そういった便利な機能が今後は使えるようになって来るので、知っておきましょう。

HTML

rel=“noopener"

target="_blank"を使用するとリンク先を別のタブで開く事が出来ますが、セキュリティ上の脆弱性があり、リンク先のページで負荷の高い JavaScript が実行されていると、リンク元のページのパフォーマンスが低下するおそれがあります。それを避ける事が出来るのがこの「rel=“noopener"」属性です。

<a href="http://example.com" rel=“noopener" target="_blank">アンカー</a>

input type="color"

16進数表記のテキストフィールド。カラーピッカーのUIが用意されている。

<input type="color" value="#f6b73c">

meter要素

<p>オーブンの温度: <meter min="200" max="500"
  value="350">350 degrees</meter></p>

details, summary要素

CSS、JavaScriptを使用せずにアコーディオンが実装できる。

<details>
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>

button form Attribute

送信ボタン(button submit)をform要素の外からでも利用できるようになる。

<form action="outout.php" method="post" id="form1">
  <input type="text" id="name" name="name">
</form>

<button type="submit" form="form1" value="Submit">Submit</button>

picture要素

srcset属性

CSS

flow-root

clearfixを利用しなくてもfloatを解除できる。overflow:hiddenも必要ありません。

div {
  display: flow-root;
}

all

すべてのプロパティを一括して指定する。

button {
  all: unset;
}

unset

プロパティをリセットし、親からの継承された場合は継承値、そうでなければ初期値を設定します。

<style>
.box{
color: green;
}
p {
color: red;
font-size: 20px;
}
.bar{
all: unset;
}
</style>
</head>
<body>
<div class="box">
<p>このテキストは赤です。</p>
<p>このテキストも赤です。</p>
<p class="bar">このテキストです。</p>
</div>
</body>

それ以外にも便利なものがたくさんあります

qiita.com

vs codeのdiff機能を使う

diff機能を使ってvs codeで差分をチェック

vs codeのcompare機能を使って、ファイルの差分を簡単にチェック出来ます。

shift+control(command)+pでコマンドパレットを出し「Compare」と入力すると、下の画面のように選択できるので実行する。

この中の「クリップボードとアクティブファイルを比較」を使って見本となるコードをコピーして、差分チェックをしてみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
<h1>クリップボードのデータ</h1>
</body>
</html>

githubでreadmeファイルを作成する

READMEというのは、GitHub等で公開されるソフトウェア（リポジトリ）の説明書きのことです。
そのリポジトリーがどういった趣旨の物なのか、しっかりと説明しましょう。

readmeに記載する物

• プロジェクトのタイトル
• プロジェクトの概要説明
• プロジェクトのURL
• サイトのスクリーンショット画像
• 使用言語
• 使用している機能
• 目次
• 過去の経歴など

https://github.com/0918nobita/Portfolio

マークダウン記法（md）
githubのreadmeはmd記法なので、md記法を使って書いていきましょう。
qiita.com

ブランチモデル

masterブランチ
メインブランチ。基本的には現在サーバーで運用されているデータ。このブランチに直接コミットはせずに下のdevelopブランチをマージするだけ。

developブランチ
開発用メインブランチ。細かい修正がコミットされる

featureブランチ
機能追加・改修などを行う作業ブランチ。完了後はdevelopブランチにマージされて、featureブランチは削除される

いきなり、未経験者が3つのブランチを使い分けるのは難しいので、まずはなんでもかんでもmasterブランチにコミットする、1本道のブランチモデルで作業を進め、慣れてきたら、開発開始時点でmasterブランチからdevelopブランチを作成し、作業内容は全て自身の作成したブランチにコミットし、最終的にmasterからマージしましょう。

1. masterブランチのクローンを作成
2. developブランチを作成しdevelopブランチに移動後プッシュ
3. developブランチ上で作業を進める
4. developブランチ上での作業終了後、masterブランチに移動し、developブランチをマージし、プッシュ
5. マージした不要なブランチを削除

backlog.com

qiita.com

Sassを@importから@useや@forwardに置き換える

Sassの公式サイトで今後はDartSassを使うことが推奨とされると発表がありました。それに伴ってSassの初期の方から実装されていた@importが廃止予定になりました。とても便利な機能ですが、CSSの@importと重複しているため、SassなのかCSSなのか一見してわかりにくい側面などがありSassでの@importは廃止予定になりました。

その代わりに@useや@forwardといった新しいモジュールが使えるようになりました。大きな違いは「変数や関数などの有効範囲」です。

@importではこれらの有効範囲はグローバル（ファイル間を横断出来る）ですが、@useでは有効範囲がローカル（指定したファイルのみに適用）になってしまいます。
有効範囲が広い方が一見便利なように思えますが、有効範囲が広い分、変数が上書きされてしまうという危険性があります。

vs codeでDartSassを使う

marketplace.visualstudio.com

arrown-blog.com

@importと@useの記述の違い

これまでの@importの場合

_color.scss

$red:#F00;

style.scss

@import "color" 

h1{
color:.$red;
}
}

@useの場合

_color.scss

$red:#F00;

style.scss

@use "color" 

h1{
color:.color.$red;
}
}

@useの場合、他のファイルで設定された変数を呼び出すには、変数名だけで無く、呼び出したい変数が登録されているファイル名を変数の前に付ける必要がなります。

_color.scssに$redという変数が登録されている場合は以下の形で呼び出す事が出来ます。

「color.$red」

@forward

変数に別々の名前を付けるのはとても大変なので、変数などを_import.scssにまとめて、@useではなく@forwardで読み込むようにする事で変数の前に付ける名前を1つにまとめる事が出来ます。

@forward "color";
@forward "mixin";

@use "reset";
@use "import" as f;

h1{
color:f.$red;
@include f.tablet{
color:f.$green;
}
}