Web
HTMLの基本
■ Web作成に必要なもの
テキストエディタ
Visual Studio Code (Microsoft)
Atom
SublimeText
秀丸・サクラエディタ・Terapad
DreamWeaver (Adobe)
ブラウザ（ホームページ閲覧ソフト）
GoogleChrome
Edge
FireFox
InternetExplorer
Safari
Opera
ブラウザシェア
FTPソフト
FileZilla
FFFTP
■ Visual Studio Codeの設定
・日本語化
・タブサイズ
・折り返し
・テーマ変更
VScodeとChromeでの確認作業
ファイル名は半角英数
■ ショートカットについて
コピー ctrl + c
貼り付け ctrl + v
元に戻す ctrl + z
保存 ctrl + s
新規ファイル ctrl + n
更新 F5
画面の切り替え Alt + tab
■ HTMLとCSS
HTML (Hyper Text Markup Language)
印をつける言語
構造・枠組みを担当
CSS（カスケーディングスタイルシート）
デザイン・レイアウトを担当
HTMLの歴史
HTML4.01
↓
XHTML1.0
↓
HTML5（2014.10 勧告）
↓
HTML5.2（2017.12 勧告）
↓
HTML5（2021.1 廃止）
↓
HTML Living Standard（2021.1 勧告）
■ HTMLの書き方
■ HTMLの構造
<!DOCTYPE html>
文書型宣言。1行目には必ず書く。
<html lang="ja"></html>
すべての要素を囲む。lang属性は書いておく。
<head></head>
ページの情報を入れる。
基本、headタグの中は、画面に表示されない。
<body></body>
ページに表示する内容を入れる。
<title>
headタグ内に書く。
タブに表示される。
検索結果のタイトルにも使われる。
SEO対策では重要。
<meta charset="utf-8">
headタグ内に書く。
UTF-8 文字コードの宣言。
※練習 出席番号.html
タイトルタグ 夏目漱石全集
大見出し h1
吾輩は猫である
中見出し h2
夏目漱石
■ ブロックレベル要素とインライン要素
ブロック要素
ひとかたまりで独立したもの。前後で改行される。
ブロックはブロックとインライン、両方囲める。※例外あり
<div>
<h1>lll</h1>
<strong>aaa</strong>
</div>
インライン要素
文字と同じ扱い。前後で改行されない。
インラインは原則、インラインしか囲めない。
【 NG例 】
<strong>
<h1>aaa</h1>
</strong>
HTMLタグ
HTMLタグ ①
見出しタグ（ブロック）
<h1>～<h6>
h1 大見出し
h2 中見出し
※インラインのみ囲める。ブロックは囲めない。
※h1タグは1ページに一回の方がまだよいかも・・・
段落（文章）タグ（ブロック）
<p></p>
※インラインのみ囲める。ブロックは囲めない。
改行タグ（インライン）
<br>
※空要素。改行のために使用する。
意味的にも重要なタグ（インライン）
<strong></strong>
※SEO対策的な意味合いが強いかも
ルビタグ（インライン）
<ruby>漢字<rt>かんじ</rt></ruby>
但し書きに使用するタグ（インライン）
<small></small>
※著作権表示など細目表示に使用。
リストタグ（ブロック）
順番の関係ないリスト
<ul>
<li>01</li>
<li>02</li>
</ul>
順番の関係あるリスト
<ol>
<li>01</li>
<li>02</li>
</ol>
※ul,olの直下に置けるのは <li> だけ。
赤いもの３つリストで表示。
朝起きてからの行動、順番通りに３つ表示。
recipe.htmlを見本に、自分で作成。
画像タグ（※インライン/置換要素）
<img src="画像のURL(パス)" alt="画像の説明文章">
※altは必須。省略する場合 alt="" で書く。
※width="400" height="200"
幅と高さを指定してもOK。単位はなし。
絶対パスと相対パス
絶対パス（フルパス）
目的ファイルまでの道筋（経路）を全て記述する
（例）http://abc.com/neko.jpg
（例）C:\Users\image\neko.jpg
相対パス
現在位置（作業ファイル）から目的ファイルまでの道筋（経路）を記述
HTMLは基本、相対パスを使用する
★ 同じ場所にある
ファイル名.jpg
★ 同じ場所にあるフォルダの中のファイル
フォルダ名/ファイル名.jpg
★ 一階層上にある
../ファイル名.jpg
★ 二階層上にある
../../ファイル名.jpg
HTMLタグ ②
リンクタグ（インライン）
<a href="URL（パス）">リンクテキスト</a>
<a href="http://yahoo.co.jp">Yahoo</a>
新しいタブで開く時は
<a href="URL" target="_blank">リンクテキスト</a>
※外部サイトへのリンクに使用する
テーブル（表）関連タグ
<table></table> -- 表全体を囲む（ブロック）
<tr></tr> -- 行を囲む（ブロック）
<td></td> -- セルを囲む（インライン）
<th></th> -- 見出しセルを囲む（インライン）
td,thに有効な属性
※colspan="2"
横方向に2つのセルを結合
※rowspan="3"
縦方向に3つのセルを結合
video タグ
<video src="video/01.mp4"></video>
使用できる属性
controls：コントロールパネルを表示
autoplay：自動再生
loop：繰り返し再生
muted：動画再生時ミュート
poster：開始画面の画像を設定
playsinline：インライン再生
width：横幅
height：高さ
GoogleMapの導入
1. GoogleMapのサイトにアクセス
2. 表示したい住所で検索する
3. 左上の三本線（ハンバーガーメニュー）をクリックして、「地図を共有または埋め込む」をクリック
4. 地図を共有のメニューを選択して、HTMLタグをコピーする
5. HTMLの表示したい場所に貼り付け
6. 貼り付けた地図については、「div」などで囲み、そのボックスにボーダーなど加工する
CSS基礎とテキスト系プロパティ
CSSの導入
CSS（Cascading Style Sheets）
・レイアウト・デザイン部分担当
・拡張子は「.css」
・ファイル名は、 style.css とするのが一般的
・cssフォルダを作り、その中に保存する（推奨）
・1行目には @charset "utf-8"; を必ず書く
外部ファイルとして読み込ませる
<head> 内に
<link rel="stylesheet" href="css/style.css">
※ href 以下は相対パス。CSSフォルダの中の style.css という意味。
01フォルダ、02フォルダにスタイルシートを適用させる。
・条件
Penguin Lessonの文字色を赤にする。
ページ全体の文字色を薄い黒、フォントサイズを18pxにする。
クラスセレクタ
特定の要素を指定する（名前を付ける）
【HTML】
要素に対して、class属性を付ける（名前を付ける）
<h2 class="text01">.....</h2>
【CSS】
ドット ＋ クラス名で命令
.text01 {
color: blue;
}
※特定の箇所にスタイルを適用したい。でも、タグで囲まれていない。
<span class="text02">.....</span>
<div class="text03">.....</div>
span,divともに意味を持たず、囲む（グルーピング）するタグ
<span> （インライン要素）
<div> （ブロック要素）
CSSプロパティ ①
文字色
E { color: #000; }
基本、RGBカラーコードを使用
※6桁を3桁に
#ffffff → #fff
#00ff00 → #0f0
※練習（文字色）
PenguinLesson → オレンジ色
ページ全体の文字色 → 薄い黒
copyrightの一文 → グレー
「最初の世界一周航海記」 → 赤色
Yahoo!Japan → 緑色
文字の大きさ
E { font-size: 16px; }
ブラウザの標準サイズは、16px
単位は、px, %, rem, em, vw, vhなど
※1rem = 基準となる1文字の大きさ(16px)
※練習
ページ全体 → 14px
1.MagellanicPenguin → 32px
Penguin Lesson → 48px
行間
E { line-height: 1.5; }
単位なしの実数で指定する。
フォントサイズ16px、line-height:1.5 であれば、
16px * 1.5 = 24pxが行間
書体
E { font-family: 英語フォント①, 日本語フォント①, 日本語フォント②, フォントファミリー; }
※英語フォントは、先頭で指定する。
フォントファミリー名
明朝系 → serif
ゴシック系 → sans-serif
e.g. font-family: "Verdana","Yu Gothic Medium","Yu Gothic","Meiryo",sans-serif;
2020年版 font-familyのおすすめの指定はコレ！
太字
E { font-weight : bold;（太字）}
: normal;（標準）}
斜体
E｛ font-style: italic;（斜体）}
: normal;（標準）}
※練習
copyright → 太字・斜体
PenguinLesson → 太字解除
「最初の世界一周航海記」 → 太字
2. Rockhopper Penguin → 斜体・太字解除
文字間隔
E { letter-spacing: 2px; }
下線
E { text-decoration: none;（線なし）}
: underline;（下線）}
: line-through;（取り消し線）}
: overline;（上線）}
行ぞろえ
E { text-align: center;（中央ぞろえ）}
: right;（右ぞろえ）}
: left;（左ぞろえ）}
: justify;（両端ぞろえ）}
※ブロック要素に対して指定（インライン不可）
background系プロパティ
セレクタ ②
子孫結合子（子孫セレクタ）
<ul>
<li>test</li>
</ul>
<ol>
<li>sample</li>
</ol>
testの文字にだけスタイルを指定したい！
ul li {
color: #f00;
}
※ 親要素と子要素の間を半角スペースで区切る
CSSプロパティ ②
背景色
E { background-color: #000; }
背景画像
E { background-image: url(画像のパス); }
背景画像の繰り返し
E { background-repeat: no-repeat; 1回だけ表示 }
： repeat-x ; 横方向にのみ繰り返し }
： repeat-y; 縦方向にのみ繰り返し }
： space; 背景画像が見切れないように余白で調整 } ★
背景画像の位置
① PX指定
E { background-position: 10px 50px; }
※左から10px,上から50pxの位置に表示
② キーワード指定
E { background-position: right bottom; }
※指定ボックスの右下に表示
※①と②を混合した指定もOK e.g. : center 10px;
③ 各辺からのオフセット指定
E { background-position: bottom 10px right 20px; }
※下から10px、右から20px
背景画像の固定
E { background-attachment: fixed; 固定 }
ショートハンド（一括指定）
※上記、背景画像の命令は一括で指定することも可能
E { background: 色 画像 繰り返し 位置 固定; }
※順不同・省略可能
e.g.
background: #aaa url(image/bg01.gif) no-repeat top left fixed;
背景画像の拡大
E { background-size: cover; } 背景領域を画像で埋める
E { background-size: contain; } 画像を背景領域にきっちり収める
背景画像の複数設定
E { background: url(image/bg01.gif) no-repeat, #aaa url(image/bg02.gif) no-repeat; }
※ color は最後でのみ指定可能
ボックスレイアウト
テーブルの線を１本にする
E { border-collapse: collapse; }
リスト記号を変更する
E { list-style-type: none; 記号なし
list-style-type: disc; 黒丸
list-style-type: circle; 白丸
list-style-type: square; 四角
list-style-type: decimal; 数字
}
セレクタ ③
IDセレクタ
特定の要素を指定する（名前を付ける）
【HTML】
要素に対して、id属性を付ける（名前を付ける）
<h2 id="text01">.....</h2>
【CSS】
# ＋ ID名で命令
#text01 {
color: blue;
}
※狭い範囲はclass名を使用。レイアウト目的のボックスにID名を使用する。
ボックスレイアウト
<div id="wrapper">
<div id="header">
</div>
<div id="main">
</div>
<div id="footer"></div>
</div>
CSSプロパティ ③
ボーダー
E { border: 1px solid #000; 四辺全部
border-top: 1px solid #fff; 上だけ
border-right: 1px solid #fff; 右だけ
border-left: 左だけ
border-bottom: 下だけ
}
※ border: 太さ 線種 色;
※ 線種
solid 直線
dotted 点線
dashed 破線
double 二重線
幅と高さ
E { width: 200px; } 幅
E { height: 400px; } 高さ
E { min-width: 200px; } 最小幅
E { min-height: 400px; } 最小の高さ
E { max-width: 200px; } 最大幅
E { mam-height: 400px; } 最大の高さ
※単位は px % vh vw など
余白
内余白が padding
外余白が margin
E { margin: 20px; 四方向全部
margin-top: 10px; 上だけ
margin-right: 10px; 右だけ
margin-left:
margin-bottom:
margin: 10px 20px; 上下10px 左右20px
margin: 10px 5px 0 20px; 上 右 下 左
margin 10px 0 20px; 上 左右 下
}
※paddingの指定も同様
要素を中央にする
ブロック要素の場合
中央に寄せたいブロック要素に width を設定して、 margin の左右に auto を設定。
E { width: 400px;
margin: 0 auto;
}
インライン要素の場合
中央に寄せたいインラインを囲んでいるブロックに対して、 text-align: center;
リンク関連
説明リスト
説明リストタグ（ブロック）
<dl>
<dt>用語</dt>
<dd>その説明</dd>
<dt>用語２</dt>
<dd>その説明２</dd>
<dd>その説明の補足２</dd>
</dl>
★ dl の直下には dt, dd, div のみOK
id名とクラス名について
キャメルケース
class="gNav" (区切りで大文字)
スネークケース
class="g_nav"（区切りをアンダースコアで）
ハイフン
class="g-nav"（区切りをハイフンで）
リンク関連
疑似クラス
a { } リンク全般
a:link { color: #f00; } 未訪問リンク
a:visited { color: #000; } 訪問済みリンク
a:hover { } カーソルを乗せたとき
a:active { } クリックしたとき
※書く順番に注意する。
特定の場所への移動
1. 移動先に id="〇〇" で名前を付ける。
2. 移動元に <a href="#〇〇">テキスト</a> でリンクを作る。
GoogleMapの導入
1. GoogleMapのサイトにアクセス
2. 表示したい住所で検索する
3. 左上の三本線（ハンバーガーメニュー）をクリックして、「地図を共有または埋め込む」をクリック
4. 地図を共有のメニューを選択して、HTMLタグをコピーする
5. HTMLの表示したい場所に貼り付け
6. 貼り付けた地図については、「div」などで囲み、そのボックスにボーダーなど加工する
FlexBox
レイアウト（横並び）に使用されるCSSについて
1. Float
長く使われ続けてきたプロパティ。
古いブラウザにも対応可能。
解除の方法など複雑なこともあり、最近では経験されがち。
テキストの回り込みは、Floatでのみ可能。
2. Flex
柔軟なレイアウトが可能。
IE11にも対応しているが、一部バグあり。
シンプルでわかりやすい。
3. Grid
3つの中では一番新しいプロパティ。
IE11にも対応しているが、一部バグあり。
グリッドを活かすことのできるレイアウトに最適。
Flexbox
FlexboxとはFlexibleBoxLayoutModuleのこと
フレキシブルで簡単にレイアウトを組むことができる
Float よりも比較的簡単にレイアウト（横並び）を組める
IE11は、一部非対応
【参考サイト】
CSS Flexbox（WebCreatroBox)
FLEXBOX FROGGY
【チートシート】
FLexBoxチートシート
★ ダウンロードするにはWebクリエイターボックスの無料ニュースレターへのご登録が必要
FlexBoxプロパティ（親要素への命令）
FlexBoxの基本
Flexコンテナと呼ばれる親要素の中に、Flexアイテムと呼ばれる子要素を入れる
Flexレイアウト
E { display: flex; }
子要素の並ぶ向き
E { flex-direction: row-reverse; 子要素を右から左に配置
: column; 子要素を上から下に
: column-reverse; 子要素を下から上に
}
子要素の折り返し
E { flex-wrap: nowrap; (初期値)折り返さずに一行に並べる
: wrap; 折り返す
: wrap-reverse; 下から上に折り返す
}
水平方向の揃え
E { justify-content: flex-end; 行末から配置。右揃え
: center; 中央揃え
: space-between; 最初と最後の子要素を両端に。残りは均等に配置。
: space-evenly; 余白を均等に配置。
: space-around; 両端の子要素も含め、均等に配置。
}
垂直方向の揃え
E { align-items: stretch; (初期値) 親要素の高さ、またはコンテンツの一番多い子要素の高さに合わせて広げる
: center; 上下中央揃え
: flex-start; 上に揃える
: flex-end; 下に揃える
}
複数行にした時の垂直方向の揃え
E { align-content: stretch; (初期値) 親要素の高さに合わせて広げる
: center; 上下中央揃え
: flex-start; 上に揃える
: flex-end; 下に揃える
: space-between; 最初と最後の子要素を上下の端に配置し、残りの要素は均等に間隔をあけて配置
: space-around; 上下端にある子要素も含め、均等に間隔をあけて配置
}
子要素の行間・列間の余白を設定
E { gap: 30px 20px; }
★ 外側の余白は設定されない
FlexBoxプロパティ（子要素への命令）
順序の指定
E { order: 1; } 初期値は0。数字が小さい方が左。
伸びる比率
E { flex-grow: 1; } 子要素がどれぐらい伸びるか。
縮む比率
E { flex-shrink: 2; } 子要素がどれぐらい縮むか。
幅（高さ）の指定
E { flex-basis: 200px; }
※width（height）と基本同じ
一括指定
E { flex: 0 1 30%; }
★flex-grow、flex-shrink、flex-basis を一括指定
子要素の垂直方向の揃え
E { aling-self: auto; (親要素の align-items を継承)
: stretch;（親要素の高さ、もしくは一番高さのある子要素に合わせる）}
: flex-start;（上揃え）}
: flex-end;（下揃え）}
: center;（上下中央）}
: baseline;（ベースラインで揃える）}
★ 特定の子要素にのみ指定したい時
リセットCSS
CSSの優先度
1. !importantが最優先
E { color: #000 !important; }
2. インラインスタイルが優先
<p style="color: #000; font-size: 24px;">ネコ</p>
3. セレクタの指定が同じなら、後の命令が優先。
E { color: red; }
E { color: blue; }
↓
文字の色はblueになる
4. セレクタの指定が異なる場合は、セレクタの計算結果の高いほうが優先
インラインスタイル 1000点
id名 100点
class名 10点
要素 1点
Emmet
【チートシート付き】Emmetをまとめてみた！コーディング速度アップを目指そう！
Emmet cheat-sheet
CSS/HTML検証サービスの紹介
Markup Validation Service
CSS Validation Service
幅の考え方
Widthの新しい考え方
E { box-sizing: border-box; }
これまでのBoxの考え方
見た目の幅 = width + padding + border
box-sizing: border-box; でのBoxの考え方
見た目の幅 = width（padding,borderを含んでいる）
使い方
*, *::before, *::after {
box-sizing: border-box;
}
計算する
E { width: calc((100% ー 10px) / 3); }
※四則演算 + - * /
記号の前後は念のために半角スペース開ける
リセットCSS
「リセットCSS」とはブラウザ間での表示の差異を無くしたり、不要なスタイルを事前に打ち消しておくというもの。
・同じソースコードを見てもブラウザによって表示に違いが出てしまう
・スタイルシートに何も記載していない要素に覚えのないスタイルが適応される
・ブラウザ固有のバグ
このような問題を防ぐために各ブラウザのデフォルトCSSを打ち消すのがリセットCSSの役割
リセットCSSの使い方
★ 自身のスタイルシートの一番上に貼り付ける
★ 別途のスタイルシートとして作成、自身のスタイルシート(style.css)より上で読み込ませる
ユニバーサルセレクタによるリセット
* {
margin: 0;
padding: 0;
}
・全ての余白をリセット
・Webページの読み込み速度が遅くなると言われており、今はあまり使わない
Eric Meyer’s “Reset CSS”
→ URL
・全ての余白をリセット
・見出しや太字、文字のサイズもリセット
・一部、HTML5のタグに未対応
HTML5 Doctor Reset CSS
→ URL
・全ての余白をリセット
・見出しや太字、文字のサイズもリセット
・HTML5のタグに対応（Eric Meyerの改良版）
Normalize.css
→ URL
・ブラウザごとのCSSの違いを統一して、見た目を整えるCSS
・ブラウザ周りの余白はリセット
・見出しや文字の上下の余白はリセットされず、文字のサイズと太さもリセットされない
・有用なデフォルトのCSSはリセットしない（リストの余白など）
Sanitize.css
→ URL
・ノーマライズCSSにレスポンシブデザイン対応を追加
・box-sizing: border-box あり
ress.css
→ URL
・ブラウザ周り、各要素の上下の余白がすべてリセット
・見出しなどの文字のサイズと太さはリセットされない
・<input>のテキストボックスやボタンも全てリセット
・box-sizing: border-box あり
・ノーマライズCSS のアップデート版
destyle.css
→ URL
・ブラウザ周り、各要素の上下の余白すべてリセット
・見出しなどの文字のサイズと太さもリセット
・<input>のテキストボックスやボタンも全てリセット
・とにかくリセット
・box-sizing: border-box あり
Position
要素の配置
E { position: relative; 相対配置
: absolute; 絶対配置
: fixed; 固定配置
: sticky; スクロールに応じて固定配置
+
left: 100px; 左から100pxずらす ( right: 100px; 右から100pxずらす )
top: 100px; 上から100pxずらす ( bottom: 100px; 下から100pxずらす )
}
基準点の変更
標準では、配置の基準点となるのはブラウザ枠（画面表示枠）
基準点を変更したい場合は、positionを指示している要素を囲んでいる
親ボックスに対して position:relative; を命令する
※例外
position:fixed で、基準点を変更したい場合は、左右の設定を行わないこと
(left,rightを命令しない)
pisition: sticky についての落とし穴
stickyは、囲まれている直近の親要素が画面に表示されている限り固定される。
親要素が画面外に出れば、stickyも消える。
要素の重なり順
E { z-index: 1; }
※positionの命令が入っている要素のみ有効。
※数字の大きいほうが上になる。
HTML5
HTML5
HTML5が目指すのは、セマンティック・マークアップ
HTMLタグ自体に意味を持たせて、内容を分かりやすく検索エンジンやブラウザに伝える記述方法
□ ブロック・インラインの考え方を廃止
□ タグを7つのカテゴリに分類、子要素として入れられるものをコンテンツモデルとして定義
※ a要素
コンテンツモデル（中に何を囲めるか）は「トランスペアレントモデル」
ページ構造化要素
<header></header>
header要素（ページのヘッダー部分）
<div id="header"></div> の代わりに使用する。
<footer></footer>
footer要素（ページのフッター部分）
<div id="footer"></div> の代わりに使用する。
<main></main>
main要素
そのページ特有のコンテンツを囲む。（ロゴ・ナビは含まない）
同一ページ内に一回のみ使用可能。
<article>,<section>などでは囲めない。
セクション要素
sectionとarticle
<nav></nav>
nav要素
サイトの主要なナビゲーションを囲む。
<nav>
<ul>
<li></li>
</ul>
</nav>
<article></article>
article要素
単独で完結・成立するコンテンツ部分
その部分を取り出しても、独立したページとして成立する
見出しは必須(h1~h6)
<section></section>
section要素
意味のあるヒトカタマリを区切る。
見出しは必須(h1~h6)
<aside></aside>
aside要素
メインとは関連が薄く、切り離し可能。
広告や補足記事・サイドバーが該当
※section or article or div
意味のあるヒトカタマリ？ No → div
Yes↓
単独で成立する？ No → section
Yes↓
article
CSS3
CSS3
透明化
E { opacity: 0.5 }
0が透明。1が通常。
色の指定
E { background: rgba(255, 0, 0, 0.5); }
※10進数で色を指定。0~255
それぞれ、赤、緑、青、透明の値を指定
角を丸くする
E { border-radius: 10px; 四つ角全部
border-radius: 10px 20px 30px 40px; 左上 右上 右下 左下
ボックスに影をつける
E { box-shadow: 横方向へのずれ 縦方向のずれ ぼかし量 拡張範囲 色 }
※内側に影 → inset を追加
e.g.
box-shadow: 10px 10px 5px #aaa;
文字に影をつける
E { text-shadow: 横方向のずれ 縦方向のずれ ぼかし量 色 }
縦書き
E { writing-mode: vertical-rl; }
線形グラデーション
E { background-image: linear-gradient(to 方向,開始色,途中色,終了色); }
e.g.
linear-gradient(to bottom right, #000, #fff);
ストライプ
E { background: repeating-linear-gradient(角度, 色1 始点,色1 終点,色2 始点,色2 終点); }
e.g.
repeating-linear-gradient(-45deg, #ff8c00, #ff8c00 5px, #fff 5px, #fff 10px);
擬似クラス
E:nth-child(式){} 全ての要素の中でx番目にある指示要素を指定
:nth-child(3) 3番目の要素に対して
:nth-child(2n) 偶数番目
:nth-child(2n+1) 奇数番目
:nth-child(5n) 5の倍数
:first-child 初めの要素
:last-child 最後の要素
E:nth-of-type(式){} 全ての指示要素の中でx番目にある指示要素を指定
:nth-of-type(3) 3番目の要素に対して
:nth-of-type(2n) 偶数番目
:nth-of-type(2n+1) 奇数番目
:nth-of-type(5n) 5の倍数
:first-of-type 初めの要素
:last-of-type 最後の要素
※nth-of-type(n)は同じ要素のみ、nth-childは全てのセレクタをカウントする
表示形式を変更
E { display: block; インラインをブロックに変更
display: inline; ブロックをインラインに
display: inline-block; インラインではあるが、幅と高さが指定できる。
display: none; 表示を消す
※インライン要素は基本、幅と高さ指定できない
擬似要素
HTMLではなく、CSSで要素っぽいものを作ることができる
★指定した要素内のコンテンツの前後に配置されるイメージ
<div>(::before) コンテンツ (::after)</div>
【HTML】
<p class="text03">テキスト</p>
【CSS】
.text03::before {
content: "『";
color: #23cb99;
}
.text03::after {
content: "』";
color: #23cb99;
}
両端揃え
文章を両端揃えにする
E { text-align: justify; }
変形
E { transform : rotate(45deg); 回転
: translate(10px,20px); 移動
: scale(1.2); 拡大・縮小
※rotateX(45deg) X軸方向に回転
※rotateY(45deg) Y軸方向に回転
時間をかけて変化させる
E { transition: 変化にかかる時間 変化するプロパティ 変化の仕方 変化が始まる時間; }
e.g. transition: 1s all linear 1s;
※時間の単位は s を使用する。（second)
※プロパティは特に指定がなければ all。
背景だけ変化させたいなら、background と記入。
※変化の仕方
ease：開始時と終了時は緩やかに変化
linear：開始から終了まで一定に変化
ease-in：開始時は緩やかに変化、終了に近づくと早く変化
ease-out：開始時は早く変化し、終了時は緩やかに変化
ease-in-out：開始時と終了時は、かなり緩やかに変化
アニメーション
@keyframes 任意の名前 {
0% {
プロパティ: 値;
}
100% {
プロパティ: 値;
}
}
E {
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state;
}
※説明
E {
animation: 名前 変化の時間 変化の仕方 開始時間 繰り返し回数 再生方向 開始前・終了後のスタイル 再生・停止;
}
繰り返し回数
回数（1,2・・・） or infinite
再生方向
reverse 毎回、逆方向からのアニメーションが再生
alternate 順方向、逆方向のアニメーションを交互に繰り返し
alternate-reverse 逆方向、順方向のアニメーションを交互に繰り返し
animation-fill-mode
アニメーションの開始前と終了後のスタイルを指定。
none アニメーション終了時にスタイルを適用しません。
forwards アニメーション終了時にその状態のスタイルを適用します。
backwards アニメーション終了時にアニメーションする前のスタイルを適用します。
both forwardsとbackwardsが両方適応されます。
CSSの変数（カスタムプロパティ）
:root {
--main-color: #103187;
--sub-color: #046cb5;
}
h1 {
background-color: var(--main-color);
}
レスポンシブ
レスポンシブWebデザインとは
単一のWebページ(HTML)を使い、画面幅を基準にCSSを切り替えてレイアウトを調節するデザイン
レスポンシブWebデザインについて知っておきたいこと
RWDJP
パペティエール
RWD ー ４つのルール
1. Viewportの設定
<meta name="viewport" content="width=device-width,initial-scale=1.0">
2. フルードイメージ
画像を親要素の幅にフィットさせる。
下記コードをCSSに追加する。
img {
max-width: 100%;
height: auto;
}
3. フルードグリッド（フレキシブルレイアウト）
コンテンツ幅を相対値（%など）で指定し、可変レイアウトを作成
幅を相対値に変更する
PX → % (or max-widthなど)
※ max-width: 940px;
→ 最大幅940px,それ以下はウィンドウサイズに応じる。
4. メディアクエリ
デバイスの幅に応じてスタイルを切り替える
【デスクトップファースト】
@media screen and (max-width: 640px) {
/*ここに幅が 640px 以下で適用される CSS を入力*/
}
【モバイルファースト】
@media screen and (min-width: 640px) {
/*ここに幅が 640px 以上で適用される CSS を入力*/
}
※ スマホデザインからスタートするのがモバイルファースト
※ Googleはモバイルファーストを推奨
ブレイクポイントについて
レスポンシブデザインのブレイクポイントの細かすぎる新解釈
日本国内のデバイス別ディスプレイサイズ
Web制作会社のブレイクポイント調べてみた
ブレイクポイントとは、画面幅に合わせてCSSを切り替える時に使用する、切り替えポイントのこと。
→ 特定のデバイスに依存したブレイクポイントを設定するのではなく、サイトのコンテンツが最適に閲覧、
操作できるブレイクポイントを考えるべき
解像度について
解像度とRetina対応
picureタグについて
pictureタグを使えば、CSSやJavaScriptを使わずに画面幅に応じて画像を切り替えられる。
<picture>
<!-- ブラウザ幅最大～768pxまで pict01.jpg が表示 -->
<source srcset="images/pict01.jpg" media="(min-width: 768px)">
<!-- ブラウザ幅767px～から最小幅まで pict01-sp.jpg が表示 -->
<img src="images/pict01-sp.png" alt="代替テキスト" width="" height="">
</picture>
aspect-ratio
E {
aspect-ratio: 4 / 3;
}
要素の縦横の比率を決めることができる。その比率をキープしたまま拡大縮小される。
ハンバーガーメニュー
ハンバーガーメニューについて
【HTML】
<!-- ハンバーガーボタン -->
<button type="button" class="ham-btn">
<span class="ham-line"></span>
</button>
<!-- ハンバーガーボタン end -->
<nav class="pc-menu">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
<div class="sp-menu">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
【CSS】
header .pc-menu ul {
display: flex;
justify-content: flex-end;
gap: 0 1.5rem;
margin-top: 0.5rem;
}
header .sp-menu {
position: fixed;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100vh;
background: rgba(255,255,255,0.95);
visibility: hidden;
opacity: 0;
transition: .4s;
}
header .sp-menu ul {
width: fit-content;
margin: 100px auto;
}
header .sp-menu ul li {
margin-bottom: 20px;
}
header .sp-menu.is-active {
opacity: 1;
visibility: visible;
}
@media screen and (max-width: 640px) {
header .pc-menu {
display: none;
}
.ham-btn {
display: block;
position: fixed;
right: 20px;
top: 20px;
z-index: 10;
width: 40px;
height: 40px;
}
.ham-line {
display: block;
width: 100%;
height: 2px;
position: absolute;
left: 50%;
transform: translateX(-50%);
background-color: #333;
transition: 0.4s;
}
.ham-line::before,
.ham-line::after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
background-color: #333;
transition: inherit;
}
.ham-line:before {
top: -9px;
}
.ham-line:after {
top: 9px;
}
.ham-btn.is-active .ham-line {
background-color: transparent;
}
.ham-btn.is-active .ham-line::before {
top: 0;
transform: rotate(45deg);
}
.ham-btn.is-active .ham-line::after {
top: 0;
transform: rotate(-45deg);
}
}
【jQuery】
以下、jQueryのコード。jQUeryライブラリ（Google）を読み込んだのち、
外部ファイルで読み込むか、HTML内で読み込むか。
//ハンバーガーメニュー
$(function(){
$('.ham-btn,.sp-menu a').on('click', function() {
$('.ham-btn').toggleClass('is-active');
$('.sp-menu').toggleClass('is-active');
});
})
SEO
参考リンク
検索エンジンシェア
若者はブラウザ検索をしない？
SEOとは？
SEO内部対策で行うべき２０の事
Googleアルゴリズムとは？
Googleアルゴリズムアップデートの歴史
Core Web Vitalsとは
ランクブレイン
E-A-Tとは？
検索エンジン最適化（SEO）スターター ガイド
Webマーケティングとは
Webを中心に行うマーケティング活動。
Webサイトへの集客、販売やブランディングを促進するための活動。
Webマーケティング施策
集客施策
SEM（SearchEngineMarketing)
- SEO(SearchEngineOptimaization)
検索エンジン最適化
内部施策
外部施策
被リンクの獲得
サイテーションの獲得
- PPC（リスティング広告）
Google広告
Yahoo広告
- アドネットワーク広告
Google広告
Google AdSense
- アフィリエイト広告
ValueCommerce
A8.net
Amazonアソシエイト
- リターゲティング広告
- メールマーケティング
- SNS対策
SEO内部対策
HTMLタグの最適化
1. <title> タグについて
・各ページに固有のタイトルをつける
・キーワードは前半に入れる
・全角32文字前後にする
・ユーザーの興味を惹くタイトルにする
2. <meta name="description" content="">
・各ページに固有のディスクリプション
・全角80文字以内で設定する
・キーワードを必ず入れる
・ユーザーがクリックする文章にする
2-1. <meta name="keywords" content="川西市,パン">
・SEO対策としては、効果は薄い
・不要論もあり
3. <h1> , <h2>
・見出しタグにもキーワードを入れる
・見出しとして適切に使われているか
・見出しタグは数字の若い順から使用する（推奨）
4. 画像を最適化
・画像にわかりやすいファイル名をつける
・alt属性を使って、画像の内容を適切に説明する
5. <strong> / <em>
・1ページ内に2~3程度
・キーワードに使用する
・効果の程は微妙
リンクの最適化
1. <a href="URL">アンカーテキスト</a>
・リンク先を適切に表現したテキストにする
・「こちら」「ここ」など、極力重複するテキストは使用しない
・可能であれば、キーワードを入れる
2. 内部リンクの最適化
・パンくずリストは必ず設置する
・サイト内のすべてのページに遷移できるようにする
・リンク切れがないように注意する
・ユーザーが回遊しやすいリンクを設置する
3. SSLの適用
・暗号化された安全な接続にする（http:// → https://）
SSL証明書とは
さくらのSSL
さくらの無料SSL
コンテンツの最適化
1. 文字サイズ
・スマホ・PC共に 14px ~ 16px が適切。12px以下にはしない。
2. ページスピード
・ページの読み込み速度を確認する
PageSpeed Insights
・画像の軽量化を図る
Squoosh
TinyPng
Compressor
3. モバイルフレンドリー対応
・Webページをスマホ対応（レスポンシブ）にする
モバイルフレンドリーテスト
4. 適度に更新する
・新たなコンテンツページを追加する
・古いコンテンツを最新の情報やトピックを含めて修正する
5. ページの文字数
・ランキングに文字数は関係しない
・一定の文字数があるページ → ユーザーの評価が高くなる → 結果ランキング上昇
・よく言われるのは、1ページ2000文字以上ぐらい
SEO外部対策
・被リンクの獲得
・サテライトサイトの作成
・サイテーションの獲得
Googleの各種サービス
Google Analytics
Google Analytics
Googleアナリティクスの設定方法&使い方
デモアカウント
Google SearchConsole
Google SearchConsole
Google Search Consoleの登録・設定方法&使い方
Google Speed Insights
Google Speed Insights
モバイルフレンドリーテスト
モバイルフレンドリーテスト
Google マイビジネス
Google マイビジネス
SNSボタン
SNSボタンの設置
Twitter
公式サイトプラグイン
■ 独自スタイル
<a href="https://twitter.com/share?url={URL}&text={本文}&hashtags={ハッシュタグ}">ツイートする</a>
※{}は説明をわかりやすくするため、実際は不要
Facebook
公式サイトプラグイン
■ 独自スタイル
<a href="http://www.facebook.com/share.php?u={URL}">シェアする</a>
※{}は説明をわかりやすくするため、実際は不要
LINEで送る
公式サイトプラグイン
■ 独自スタイル
<a href="https://social-plugins.line.me/lineit/share?url={URL}">LINEで送る</a>
※{}は説明をわかりやすくするため、実際は不要
Instagram
Instagram基本表示APIで投稿一覧を表示する手順
Light Widget
ファビコン
ファビコン（favicon）のサイズ一覧と作り方
favicon generator
faviconについて
・favorite iconの略。スマホ画面のアイコンや、ブラウザのタブ、ブックマークに表示される。
・メインとなるサイズは、32 x 32 px
・作成方法は
イラストレーターやフォトショップで作成して、ファビコンジェネレーターで変換する
画像を持ってきて、ファビコンジェネレーターで作成する
・よく使われる拡張子は favicon.ico
・最近だと、svg 形式でもOKになってきている
・faivon.icoは index.htmlと同じ場所に保存することが多い。
・作成後は headタグ内で下記のように読み込む
<link rel="shortcut icon" href="favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="icon" type="image/png" href="images/android-chrome-192x192.png">
jQuery
JavaScriptとは
【超入門】JavaScriptとは？できること・基本をわかりやすく解説
JavaScriptとは、Webサイトを表示するためにブラウザ上で動くプログラミング言語
JavaScriptでできることは、基本的に以下のものになる
★ WEBページの動作
★ WEBアプリ開発
★ スマホアプリ開発
★ ゲーム開発
jQueryとは
jQueryでできること10選
そろそろなぜjQueryを使うのが難しいのかをちゃんとまとめようと思う。
jQueryは、JavaScriptを簡易的に使えるようにしたライブラリの一種。
javascriptの拡張子は .js
jQueryライブラリ(本体)の読み込み
Google Hosted Libraries
1. GoogleCDNから読み込む（google jqueryで検索）
3.x → 現状バージョン
2.x → 古いブラウザの対応なし
1.x → 古いブラウザにも対応
.min → 圧縮され軽量化されたファイル
</body>の直前で
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
2. ダウンロードして読みこむ
コードを入力する
1. HTMLファイル内に入力
<script> ~ </script> 内に入力する。
2. 外部ファイル(〇〇.js)を作成、読み込み、入力する。
<script src="js/main.js"></script>
※両方とも必ず、jQueryライブラリより後に記述する。
入力の基本
$(document).ready(function(){
//何かしらの処理
});
$(function(){
//何かしらの処理
});
どちらも同じ意味。HTMLの読み込みが終わった時点で 何かしらの処理 が実行される。
jQueryのコードは必ず上記 function 内に記述する。
セレクタとメソッド
$('セレクタ').メソッド();
セレクタが命令対象、メソッドが命令
セレクタは、CSSと同じ指定が可能
$('h1').メソッド();
$('#wrapper').メソッド();
$('#header .list').メソッド();
【メソッド例】
- CSSの命令を変更する
css('プロパティ','値');
- 属性値を変更する
attr('属性','値');
- テキストの書き換え
text('変更後の内容');
イベント
$('セレクタ').on('イベント',function(){
$('セレクタ').メソッド();
});
【イベント例】
scroll ドキュメントがスクロールした時に発生
click クリックされた時
dblclick ダブルクリックされた時
mousedown 要素上でマウスが押された時に発生
mouseup 要素上でマウスが押され、上がった時に発生
mousemove 要素上でマウスが移動している時に発生
mouseenter マウスが要素に入った時に発生。子孫要素に入った時には発生しない
mouseleave マウスが要素から外れた時に発生。子孫要素から外れた時には発生しない
keydown キーが押し下げられた時に発生
keypress キーが押された時に発生
keyup キーが上がった時に発生
jQueryプラグインの読み込み
1. jQueryライブラリ本体を読み込む
2. jQueryプラグインファイルをダウンロードする
3. 必要なファイルを作業フォルダに移動させる（必要であれば画像ファイルも）
4. 移動させたファイルをHTMLで読み込む
css は <link rel="stylesheet" href="ファイルパス">
js は <script src="ファイルパス"></script>
5. <script> 内で、プラグインのコードを実行させる
6. HTMLを適切な形で入力する
サーバーについて
Formタグ
Form
formタグ
<form action="送信先のURL" method="post（or get）" name="フォームの名前">
//フォームのパーツ
</form>
1行入力テキスト
<input type="text" name="氏名" size="20">
※nameはパーツの名前。sizeは入力欄の文字数（任意）。
※type属性いろいろ
inputの使い方
チェックボックス
<input type="checkbox" name="ch01" value="tv">TV
<input type="checkbox" name="ch01" value="internet">インターネット
※nameは同じにする。valueを変更する
ラジオボタン
<input type="radio" name="rad01" value="agree">同意する
<input type="radio" name="rad01" value="disagree">同意しない
送信ボタン
<input type="submit" value="ボタンに表示するテキスト">
<button type="submit">送信する</button>
リセットボタン
<input type="reset" value="ボタンに表示するテキスト">
<button type="reset">リセット</button>
テキストエリア
<textarea cols="文字数（ヨコ）" rows="行数(タテ)" name=""></textarea>
セレクトメニュー
<select name="">
<option value="01">select01</option>
<option value="02">select02</option>
</select>
ラベル
<label for="○○">ラベル</label>
<input type="" id="○○">
or
<label>ラベル名
<input type="">
</label>
required属性
入力内容を必須にする
<input type="text" required>
placeholder属性
任意の入力内容のサンプルを表示
<input type="text" placeholder="入力サンプル">
pattern属性
入力内容を正規表現に基づいて制限
<form>
<input type="text" pattern="\d{3}-\d{4}">
<input type="submit" value="郵便番号チェック">
</form>
※正規表現
HTML5におけるinput要素のpattern、type属性のおさらい
メールフォームについて
メールフォーム作成ツール
formrun
Google
PHPメールフォーム
PHP工房
アイコンフォント
アイコンフォントを使用する
Font Awesome
→ FontAwesome
【使い方】
1. 上記サイトにてメールアドレスを登録する
2. 登録後に発行される下記スクリプトを<head>タグ内で読み込む
<script src="https://kit.fontawesome.com/6728aaac59.js" crossorigin="anonymous"></script>
3. アイコンを選択して、HTMLファイル、CSSファイル内で使用する
e.g. <i class="fas fa-angle-double-right"></i>
e.g. .icon::before {
content: '\f35a';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
}
アイコンの種類
Solid → font-weight: 900;
Regular → font-weight: 400;
Brands → font-weight: 400;
ポートフォリオ他
履歴書・職務経歴書
参考URL
履歴書・職務経歴書の書き方（ハローワーク）
マネして作れる履歴書の書き方
初心者にもわかる「職務経歴書の書き方」
職務経歴書の書き方とテンプレート
転職サイト・転職エージェント
転職エージェント
いわゆる人材紹介会社。
キャリアアドバイザー（担当者）が付くのが一般的。
非公開求人の紹介もあり。
派遣だけではなく、紹介や紹介予定派遣もあり。
総合型エージェント
転職エージェント｜転職ならリクルートエージェント
転職エージェントならマイナビエージェント【公式】｜無料で業界のプロに相談
求人を紹介してもらう ｜転職ならdoda（デューダ）
派遣の求人・お仕事を探すなら人材派遣会社の【パソナ】
特化型エージェント
転職エージェント｜無料転職相談のワークポート
マイナビクリエイター | Web・ゲーム・IT業界専門の転職エージェント
株式会社Fittio | IT・Web業界専門の人材紹介・派遣・業務委託案件
株式会社フェローズ｜クリエイター専門の総合人材マネジメント
クリーク･アンド･リバー社 | C&Rグループ
求人サイト
転職ならdoda（デューダ） － 転職を成功に導く求人、転職情報が満載の転職サイト
転職ならリクナビNEXT｜希望の転職先が見つかる転職サイト
転職はマイナビ転職-豊富な転職情報で支援する転職サイト
IT/Web業界の求人・中途採用情報に強い転職サイトGreen(グリーン)
ハローワークインターネットサービス - トップページ
ネットショップ業界の求人探しは【楽天仕事紹介】
ポートフォリオの作成
作成にあたって
・可能であれば、紙媒体・Web両方で作成する
→ Webのみの場合は、面接時にタブレットなど持参する
・紙ポートフォリオの作成ソフトは、基本Illustrator
・表紙は表題（ポートフォリオ）と名前必須
・作品は、バナーやWebサイト、写真、イラストなどアピールできるモノ
・PSでの画像加工技術をアピールするのもあり（Before、After）
・制作したバナーやWebサイトは
・作品のスクリーンショット
・タイトル（授業課題 ではなく 〇〇のバナーなど案件名）
・コンセプト
何故この作品を作るに至ったのか、何故この色を使ったのか、誰に向けて発信したいと思ったのか
どういうものを売りたくて、どういう所を工夫したのか
ターゲットは誰で、アピールポイントはどこなのか
・制作期間
【以下任意】
・サイズ
・ターゲット
・使用ソフト（使用言語）
・AIで作成する際は、CMYKのカラーモード。出力はPDF。
・PDF出力時には、極力サイズダウンした設定にする。
イラレだけでできる軽いPDFを作る設定方法は？
・それでもサイズダウンできない場合は、下記サイトで圧縮する
I Love PDF
・ローカルで作成したWebページのスクリーンショットを撮るには（Chrome）
→ 右クリックで検証画面を表示
→ Ctrl + Shift + p を押す
→ screenshotの項目を探し、実行
・PDFデータなどのメールでの送信時には、DropBoxを使用する
参考URL
Lancers
CrowdWorks
新卒でWebデザイナーになる為のポートフォリオの作り方
Web業界に転職するなら知っておきたいポートフォリオ作成のコツ。作品例も紹介
Webデザインスクール卒業生のポートフォリオ作品例をご紹介！
イケてるWebデザインで作られたポートフォリオサイト20選まとめ
Webデザイナーのポートフォリオ作成4つの手順
Web業界で転職するなら知っておきたいポートフォリオのコツ。
GoogleAnalytics
GoogleAnalytics
Googleが提供するアクセス解析ツール
Googleアナリティクスとは？導入方法から設定・使い方まで解説
Analytics デモアカウント
★ ユーザー
期間内にサイトを訪れたユーザーの数
ブラウザとひも付くCookieによって判定
★ セッション
ユーザーのサイト流入から離脱までの一連の行動
サイトの訪問数とも言える
※セッションが切れるタイミング
・サイト内での行動が30分以上何もないとき
・日付けが変わるとき
・参照元が変わったとき
★ ページビュー
見られたページ数
★ 直帰率
ユーザーがサイト外へ移動 → 離脱
離脱の中でも、サイト内で1ページしか見ずに離脱 → 直帰
直帰率の目安は40%程とも言われているが、厳密に直帰率の目安というものは存在しない。
直帰率はサイトの流入状況やページの構造によって大きく異なるから。
※直帰率が高くなる原因
・読者の求めている情報がない
・次の行動喚起がない（導線が分かりにくい）
・ページの読み込みが遅い
Google Search Console
Googleがウェブサイトをどのように評価しているのかをチェックできるツール
★ サイトにアクセスする前のデータを確認できる
・具体的な検索キーワード
・Google検索でのクリック数・クリック率・平均掲載順位・表示回数
・他サイトからのリンク状況
・検索上でサイトが抱えている問題点
★ URL検査
Googleに登録（インデックス）されているデータの確認ができる
→ インデックス登録をリクエストで、Googleへリクエスト
★ 検索パフォーマンス
検索キーワードの分析
★ リンクレポート
被リンク状況の確認
★ カバレッジ
エラーページの確認
★ DMCAについて
URL
URL
URL
VScode拡張機能
★ LiveServer
リアルタイムプレビュー
★ HTML CSS Support
id名、Class名補完
★ Auto Rename Tag
開始タグ変更時、終了タグも同時に変更
★ zenkaku
全角スペース表示
★ Bracket Pair Colorizer 2
開始タグと閉じタグを色付きの線で結ぶ
★ CSS Peek
ホバーしたクラス名のcssを確認
Basic認証
Basic認証
Basic認証とはWeb上で利用できる認証システムのこと。
非常に簡単な認証機能のため、セキュリティレベルは低い。
Basic認証とは？
コアサーバーでのBasic認証
※基本、どのサーバーでも同じ方法になるが、設定が多少異なることもあるので、
必ず「サーバー名 BASIC認証」などの言葉で検索する
1 .htaccess というファイルを作成する
※作成できない場合は、一旦 htaccess.txt を作成する
【内容】
AuthUserFile /virtual/アカウント名/public_html/ディレクトリ名/.htpasswd
AuthGroupFile /dev/null
AuthName MembersOnly
AuthType Basic
<Limit GET POST>
require valid-user
</Limit>
2 .htpasswd というファイルを作成する
※作成できない場合は、 htpasswd.txt を作成する
パスワード暗号化ツール
上記サイトなどを使用し、テキストを生成する
3. 該当フォルダにアップロードする。
※htaccess.txt , htpasswd.txt で作成した場合は、サーバー上で名前を変更する
Float
フロート（浮動化）
フロート
E { float: left; }
命令対象は左に寄る。後続は右に回り込む。
E { float: right; }
命令対象は右に寄る。後続は左に回り込む。
フロートの解除 ①
E { clear: both; }
※ブロック要素にのみ有効
ブロック同士を横並びにする
1. 横並びにするすべてのボックスにFloatの命令を入れる
2. できる限り、widthを設定する
（フロートを命令すると、幅の概念がなくなる）
※shrink-to-fit
3. クリアを考える
フロートの解除 ②
E { overflow: hidden; }
1. フロートしている要素を囲む【直近】のブロック要素に命令する。
2. 命令することで、フロートしている要素の幅と高さが計算できるようになる。
同時に、フロートの命令を解除できる。
<div class="box00">
<div class="box"> ← ここで overflow:hidden;
<img src="neko.jpg" alt="neko"> ← ★フロート
<p>猫である</p>
</div>
</div>
<div class="box02"> ← clear:both はここで
srcsetとpicture
srcsetとpicture
srcsetとpicure
srcsetとsizesが理解できなかった人
etc
EC-CUBE
脆弱性リスト
EC-CUBEバージョンアップ移行のポイントを紹介
4.1 本体バージョンアップ
EC CUBE 4.0.1 から EC CUBE 4.0.3にバージョンアップしてみた。
料金プラン、配送手数料、料金シミュレーター | Amazon出品サービスの料金
月額コストと手数料の詳細｜楽天市場出店
Search Console
Googleサーチコンソールとは？使い方や設定など基本を初心者向けに解説！｜SEOラボ
301リダイレクトとは？必要な理由や設定方法、注意点など徹底解説！｜SEOラボ
【Googleサーチコンソール】サイト移転時のアドレス変更ツールの使い方 - SEO研究所サクラサクラボ
Google Analytics
GA4での分析はここから手を付けろ！ よく見られるレポートのトップ5をお教えします！ | GA4最前線コラム | Web担当者Forum
【活用事例】GA4のコホート分析とは？マーケティング戦略とやり方をわかりやすく解説 | LIFT
GA4の「探索」で分析するときのポイントはこれ！ 3つの代表的手法を徹底解説 | GA4最前線コラム | Web担当者Forum
インターネトマーケティングの活用
