Web制作の学習内容まとめ【個人用リファレンス】
本記事はWeb制作を行う中で学んだことをまとめています。自身が業務中に参考するリファレンス用ですので、利用方法を1からまとめるのではなく、不明だったことの解決法を箇条書きで紹介しています。同じ悩みを持つ方にとっては参考になるかと…。
私自身、初学者ですのでよろしければ参考になる情報をコメントで教えて頂けますと幸いです！
Web制作に関する書籍レビュー
下記、私が読んだWeb制作に関する書籍をレビューした記事です。気になっている書籍がありましたら、参考としてご一読ください。
Web制作に関するまとめ記事
下記、私がWeb制作に関して学習した内容の詳細な説明、思考整理で作成した記事を紹介しております。こちらは本記事よりもタイトルの内容を詳しくまとめているので、気になるトピックがあればご一読ください。
Webデザインの学習内容
この章ではWebデザインを行う上で有用な情報（参考サイト、ツール操作、デザインの知識、etc…）をまとめております。
便利なWebツール
chrome拡張機能
WhatFont(利用フォントの確認)
ColorZilla（サイトの色取得）
The QR Code Extension（WebサイトのURLをQRコードで表示）
Save image as Type(画像をいろんなフォーマットで保存)
Webデザインギャラリーサイト
Webバナーギャラリーサイト
無料素材サイト
その他Webデザイン参考
Photoshopの利用方法
Photoshopの利用中プラグイン
初期設定時の備忘録
環境設定で「定規」「文字」をPixelに設定する。
カラー設定を使用中のモニター、グレーは「Gray Gamma 2.2(Windows初期値)」プロファイルの不一致は開くときに確認。
校正設定は「モニターRGB」。
環境設定のツールで「ベクトルツールと変形をピクセルグリッドにスナップ」をオン（小数点が出なくなる）。
シェイプを作成するときは「エッジを整列」にチェック（小数点が出なくなる）。
環境設定→テキスト→フォント名を英語表記にして直接入力。
よく使うフォントをお気に入り登録。
レイヤーの詳細→パネルオプション→サムネイル非表示。
レイヤーの詳細→パネルオプション→「コピーしたレイヤーとグループに「コピー」を追加」のチェックを外す。
東アジアの言語機能で禁則処理を「強い禁則」にする。
設定・覚えておくべきショートカット
編集→書式なしでペースト
レイヤー→レイヤースタイルをコピー
Ctrl＋Shift＋Alt＋T→複製して移動
加工方法備忘録
Photoshopのレイヤースタイルで作るデボス加工の作成方法をまとめました。
— コネクリ (@connecre_) January 7, 2023
デボス加工は紙などのテクスチャ背景にイラストや文字をのせるモックアップや、ゲームやイラストのアートなど幅広く活用できるのでぜひご覧ください！ pic.twitter.com/i2u79UmkgI
Illustratorの利用方法
Illustratorの利用中プラグイン・スクリプト
XDの利用方法
XDの作成フォーマット
https://helpx.adobe.com/jp/xd/help/access-ui-kits.html
XDの利用中プラグイン
Artboard Plus
アートボードの整列。Arrange for XD
図形をいい感じに並び替える。Resize Artboard to Fit Content
アートボードをオブジェクトの高さに合わせる。Rename It
選択したオブジェクトの一括名前返還。Lorem ipsum
ダミーテキスト作成。Unsplash Random Image
サンプル画像の自動挿入。Placeholder Image
ダミー画像の自動挿入。Remove Decimal Numbers
小数点の削除。Trimit
テキストエリアの余白を消す。Tategaki
文字を縦書きにする。Confetti
図形をバラバラに散らす。Sprit Rows
複数行の文字を１行ずつに分割する。Swap Fill and Border
線と塗りの入れ替え。MaskText
文字の余白を０にする。Line Height
文字間をCSSチックに変換。Complex Gradients
任意の色でグラデーションする。Singari
オブジェクトの整列・移動。swap possition
オブジェクトの入れ替え。Transform session
オブジェクトのサイズ変更の際に起点を決めて行える。Select menu
共通項があるものを一括選択。Mixed FontType
一つの行の中で英文字、日本語に利用するフォントを決めれる。Image Optimizer
画像サイズの縮小。Calender
カレンダーの作成。Ratio Changer
画像の比率を変更する。
Webコーディング学習内容
この章ではWebコーディングを行う上で有用な情報（参考サイト、ツール操作、ユニスペット、etc…）をまとめております。
コードペンアカウント
下記、私が実務で利用したHTML・CSS・JavaScriptをコードペンアカウントで実際に動きを確認できるようにまとめております。
https://codepen.io/sakodakatsuki
便利なWebツール
chrome拡張機能
OGraph Previewer（OGPの確認）
モバイルシミュレーター-レスポンシブテストツール
Alt & Meta viewer（metaタグ、altタグの確認）
Webコーディング参考記事
その他Webコーディング参考サイト
Dreamweaverの利用方法
画像に幅と高さを付与する
プロパティ→鍵マークをクリック
クリッカブルマップの作り方
Visual Studio Codeの利用方法
利用しているプラグイン
Auto Rename Tag
閉じタグ自動変更。CSS Peek
HTMLから適用されているCSSを調べる。CSSTree validator
CSSのエラーチェック。DartJS Sass Compiler and Sass Watcher
SASSの導入。ESLint
javascriptのエラーチェック。Highlight Matching Tag
閉じタグのハイライト。HTML CSS Support
HTMLのクラス名入力補完。Image preview
対象画像のプレビュー。Japanese Language Pack for Visual Studio Code
vsの日本語化。Path Autocomplete
ファイルパスの候補を表示。PHP Intelephense
PHPファイルの整形。Prettier - Code formatter
コードの整形。WordPress Snippets
WPのテンプレートタグ補完。Autoprefixer
ベンダープレフィックスの自動付与。
導入方法
忘れがちなエメット
番号順に同じクラスを複数作成する
プロパティ名.class名$*3
フォーム作成時の注意点
16px以下の文字サイズの場合、iosでは入力した項目に対して自動的にズームされてしまう。
type=’tel’は「-」の入力ができない。
type=’number’は文字列としての数字「0004」などの入力は好ましくない（この場合4になってしまう）。文字列としての数字を入力したい場合はtype=’text’、input=’numeric’が好ましい。
input要素は疑似要素が使えない。特別な理由がない場合はbuttonタグを使う。
select要素の選択肢部分についてはcssでカスタマイズできない。変更する場合はul/liで見た目を作り、javascriptで同様の動きを再現する必要があるので工数がかかる。
正規表現（pattern属性）
半角英数字：^[0-9A-Za-z]+$
半角英字8文字：[A-Za-z]{8}
半角英数字6文字以上：^([0-9A-Za-z]{6,})$
電話番号（ハイフン必須）：\d{2,4}-\{2,4}-\d{3,4}
郵便番号（ハイフン必須）：\d{3}-\{4}
全角カタカナ：^[ア-ンヴー]+$
全角ひらがな：^[あ-ん]+$
アクセシビリティに配慮したマークアップ方法
サイドバーなどがある場合は、メインコンテンツを先に記述する。
サムネイル画像が先に来る場合も、見出しの商品タイトルを先に記述したほうが望ましい。
単語の文字間を広げるために空白を使わない。ひとつの単語として読み上げられてしまう。
すべて大文字の時はcssで対応。
画像の内容を文字で説明している場合は、alt属性不要。二重になる。
キーボード操作を可能にするために、自動で当たらない要素（divなど）はtabindex="0"をつける。
buttonやinputなどクリック時のアウトラインを消したい場合は
:focus { outline: none; }
:focus-visible { 任意のスタイル }
SwiperとSlickの違い
Slickの特徴
jQueryに依存する。
スマホ時にほぼ真横にスワイプしないとスライドが切り替わらない
日本語訳ページがある
Swiperの特徴
jQueryに依存しない
オプションが多く、複雑なスライダーも実装しやすい
複雑な設定ができる分、容量が少し大きい