【要参考】
・【STEP4】Webページの制作「Wordpress活用法の教科書⑧.pdf」参考
・WordPress テーマ作成入門 | HTML-CSS 入門講座 | 情報デザイン工房 濱屋
基本機能を持ったWordPressテーマを作成するためには、以下の機能を実装する必要があります。
・大浜先生より（WordPress テーマ作成入門 | HTML-CSS 入門講座 | 情報デザイン工房 濱屋 「A4.5 テーマのカスタマイズ」参照）
テーマのカスタマイズ方法は、複数ありますので以下の順でカスタマイズ可否を確認してください。
【要参考】
・【STEP4】Webページの制作「Wordpress活用法の教科書⑦.pdf」参考
・WordPress テーマ作成入門 | HTML-CSS 入門講座 | 情報デザイン工房 濱屋
WordPress（ワードプレス）は、ブログやサイト（ホームページ）を作成できるソフトです。今や、世界中のサイトの約3分の1はWordPressで作られていると言われています。日本国内でも、個人ブログだけでなく、企業や公共機関のサイトなどに幅広く利用されています。
【参考サイト】
WordPressのテーマは、Webサイトのデザインを決定するものですが、デザインに加えてサイト全体の構成や表示される機能にも影響します。単純に見た目のデザインだけで選ぶと操作がしにくかったりメンテナンスが大変だったりする場合もあります。
テーマの入手方法は、以下の種類があります。無料のテーマの中には、機能制限有りが無料で制限を解除する場合は、有料になる場合もあります。
【参考サイト】
WordPressのオリジナルテーマを作成する手順を理解しましょう。
【参考サイト】
・WordPressのテーマはPHPも関わってくるのでかなり難しいので、業務内容に応じて不要であればあまり覚えなくてもいい（けど、覚えられると幅が広がる）
【要参考】
・【STEP4】Webページの制作「JavaScript(jQuery)の教科書.pdf」参考
・JavaScript / jQuery で処理しましょう | HTML-CSS入門講座 | 情報デザイン工房 濱屋
【参考にしやすいWebパーツ】
・WebParts Web パーツ | HTML-CSS 入門講座 | 情報デザイン工房 濱屋 （WebパーツP1~P13まで参考例と、実装方法の紹介）
・動くWebデザインアイデア帳 | 動くWebデザインアイディア帳 （大浜先生も参考にしているサイトとのこと）
jQueryを利用する時の基本事項を理解しましょう。
【参考サイト】
jQueryを利用する時は実装するための参考サイトを検索し利用方法を理解しましょう。
検索は、「jQuery （実装したいキーワード）」で検索します。
良く使うキーワードの例は、以下の通りです。
・スライダー
・カルーセル
・ハンバーガーメニュー
・ライトボックス
・ドリルダウン
・フェード
・スクロール など
【参考サイト】
【ワンポイントアドバイス】
Webコンテンツは様々は状況や条件、目的に合わせて利用されています。
その様々な要件定義に合わせた「デザイン」ができる人を目指し、成長に努めましょう。
◆JavaScriptの実装は以下のような方法があるが、①→③（難しい→簡単）とのこと
①JavaScript呼び出し
②jQuery呼び出し
③個別ライブラリィ呼び出し
（+CS3以降はCSSで実装できるものもある（教科書pdf参照）ので、どちらも理解しておくと良いとのこと）
◆JavaScriptは、HTML・CSSがひと通り完成した後、最後に実装するのが良いとのこと
◆JavaScriptの実装は、色々なサイトから参考にして書くのが良いとのこと
↑の参照サイト【参考にしやすいWebパーツ】などで引っ張ってくるなど
◆JavaScriptとJavaは全く別物なので、絶対に混同しないこと
JavaScriptは「JS」と略すのが普通
◆サーバーにUPを数回して、変更部分等が反映されていないとき
→キャッシュが残っている可能性があるので、以下を試す
①スーパーリロード（Shift+F5）※FnキーロックされているPCの場合は（Shift+F5+Fn）
or
②Googleで検証ツールを開いた状態で、上部のリロードボタン（円の→の更新ボタン）を長押し
→「ハード再読み込み」、だめなら「キャッシュの消去とハード再読み込み」で試す
◆ページ全体のスクショの取り方（中間部分などで途切れず画像ファイルで保存できる）
検証ツールを開いた状態で、（Ctrl+Shift+P）→実行欄の右側に、日本語なら「フル」英語なら「FULL」でボタンを押すと保存できる
【要参考】
・【STEP4】Webページの制作「「デザインの考え方」の教科書⑧.pdf」参考
ユーザビリティは、一般的には「使いやすさ」を示す言葉だが、国際規格のISO 9241-11では、「ある製品を、特定の利用者が、特定の目的を達成しようとするにあたって、特定の状況で、いかに効果的に、効率的に、満足できるように使えるかの度合い」としている。
アクセシビリティは、英語では“Accessibility”で、「近づきやすさ」、「利用のしやすさ」、「便利であること」などと訳されています。 一般的には、「利用者が機器・サービスを円滑に利用できること」という場合に使われています。
【参考サイト】
【ワンポイントアドバイス】
Webコンテンツは様々は状況や条件、目的に合わせて利用されています。
その様々な要件定義に合わせた「デザイン」ができる人を目指し、成長に努めましょう。
【要参考】
・【STEP4】Webページの制作「各デバイス検証.pdf」参考
スマホによる実機検証は、新しく開発したアプリやWebサイトを利用者が実際に使う端末機を使ってテストを行うことで、問題や不具合を発見し、品質を向上させるもの。 世にWebサイトやアプリをリリースするための重要な作業の一つです。
【ワンポイントアドバイス】
サイトが出来たら、出来る限りの実機検証を行ってみましょう。
実機でしかないバグや見た目の違いが多くありますので、サイトが一通り形になったら実機検証を出来る範囲で行ってみましょう。
【参考サイト】
・デベロッパーツールを同じウィンドウに表示させた状態で、画面幅を上下左右にスクロールすると、画面上に現在のサイズが表示されるので、ブレイクポイントの確認をするのに便利
【要参考】
・【STEP4】Webページの制作「各ブラウザ検証.pdf」参考
ブラウザとは、インターネットを介してホームページ（Webサイト）をパソコンやスマートフォンで閲覧するためのソフトウェアのことです。 Webブラウザとも呼ばれ、Chromeやsafari、Internet Explorerなどが有名です。
【ワンポイントアドバイス】
サイトが一通り形になったら特に使用する可能性の高いブラウザは必ず確認しましょう。
【参考サイト】
各ブラウザでそれぞれ表示方法などが違う（＝ユーザーエージェントスタイル）ため、デザインが崩れることを防ぐために、サイト制作時には、各ブラウザでの表示やタグの対応状況を確認する（クロスブラウザ対応）が必要になる。
chromeとIEまたはFirefoxが主流で、受注する際には最初の契約時にどのブラウザに対応するようにするか決めて契約するとのこと。
・Can I use
ここでHTMLやCSSで非推奨タグを使用していないかをチェックできる。（mdn web docsもおすすめとのこと）
それぞれのブラウザーがバージョンごとに並んでいて、現行で主流のバージョンは中央段のベージュで囲まれたバージョン。
主流バージョンの1つ前のバージョンまで緑色（OKサイン）なら問題ないが、黄色になっていたら注意。
黄色のコメントで「with prefix」となっていたら、ベンダープレフィックスを付ければOK。
【ベンダープレフィックス】→先頭に付ける-moz-や-webkit-など
新しいCSSなど、採用予定の機能が各ブラウザで先行実装された際、それらの機能を動作させるには、 現状ではプロパティや値の先頭に-moz-（MozillaのFirefox向け）や-webkit-（Chrome、Safariなど向け）などのベンダープレフィックスを付ける必要がある。
ただし、ベンダープレフィックスは、 草案（Working Draft）が勧告候補（Candidate Recommendation）になったときには外すことが推奨されています。 すでにGoogle ChromeやFirefoxなどのブラウザでは、CSS3の機能の一部がベンダープレフィックス無しで動作するようになっています。 また、新しいブラウザではベンダープレフィックスが付いていると、逆に動作しなくなっている機能もあります。
ベンダープレフィックスを付けないと現状では動作しないプロパティや値を指定する際にも、 今後の仕様策定の進展やブラウザのバージョンアップに備えて、 ベンダープレフィックス無しの指定を併記しておくほうが良いでしょう。
（参照：https://www.htmq.com/csskihon/603.shtmlより）
・必ずバックアップをとる！
フォルダーごとコピーするとimagesフォルダーもコピーされ容量が圧迫されるので、以下の方法がおすすめとのこと
①フォルダー内で、html・cssファイルをコピペ
②コピペデータ名を前日日付「index_0405.html」など付けて別名保存
③「index.html」「style.css」などの名前はずらさないように（リンクされているので）して毎日バックアップ
※「以前のデザインが良かった」などの直しもあるので、日ごとに必ずバックアップをとる
・レイアウトシフトの回避
レイアウトシフトとは、Webページがロードされる時に画像のスペースが確保されず、画像が表示された時にその分レイアウトがずれてしまうこと
imgタグ使用時は注意し、imgが表示されるまでの枠を確保するように設定する
参考：imgタグのwidthとheightを省略したらダメ！ 画像によるレイアウトシフトを回避する最近登場した2つの優れた解決方法 | コリス
・【手順】
手書きラフ→ワイヤーフレーム→デザインカンプ作成→PC版作成
PC版の制作がひと通り出来たら、
・レイアウトシフト漏れがないかチェック
・クロスブラウザ対応（+非推奨タグチェック）
・レスポンシブデザイン対応 が必要になる。
【要参考】
・【STEP4】Webページの制作＞「WEB動画基礎20220818.pdf」参考
・SNSの埋め込み方 参考
Web動画とは、WebサイトやYouTubeチャンネルなど、オンラインでの視聴を想定した動画全般を指します。 「Webムービー」と呼ばれることもあり、目的はブランディングや商品・サービスのプロモーション、広告配信など多岐にわたります。
WEBサイトに動画を埋め込む方法は２つあります。
①iframeタグを使用する（youtubeなどの動画サイトから読み込む）
②videoタグを使用する（動画ファイルをアップロードして読み込む）
記述例 <iframe width="410" height="200" src="https://www.youtube.com/embed/9No-FiEInLA" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
記述例 <video src="sample.mp4"></video>
【参考サイト】
【SNSの埋め込み方】
【要参考】
・【STEP4】Webページの制作「SNS運用基礎20220817.pdf」参考
SNSとは、Social Networking Service（ソーシャル・ネットワーキング・サービス）の略で、インターネットを介して人間関係を構築できるスマホ・パソコン用のサービスの総称です。
【ワンポイントアドバイス】
Webを利用するポイントとして、「Webサイト」「ブログ」「SNS」はWeb運用として重要なコンテンツの３つです。役割と特徴をしっかりと把握して、Webに関わるお仕事に関われるようにしましょう。
【参考サイト】
【SNSの埋め込み方】
実務ではデザインラフの制作はお客様と、多くのやり取りが必要になるでしょう。
デザインは必ず複数パターンの提案（最低2パターン）をして、お客様とのイメージの共有を具現化して行けるよう進めましょう。
【参考サイト】
Web用画像には、 主に「jpg」「gif」「png」「svg」が昨今のWebサイトで使われます。 その特徴と違いを確認しておきましょう。
【ワンポイントアドバイス】
「jpg」「gif」「png」「svg」について、まず悩んだら「jpg」透過表現を必要とすなら「png」、「gif」はアニメーションが必要な時ぐらい、「svg」複雑な画像は重たくなるので、条件次第で使う。と良いでしょう。
【参考サイト】
・SVG→線やシェイプ等の組み合わせでできたベクターデータのため、jpg・gif・pngと違い拡大してもぼやけない。
デメリット：写真には使えないこと。また最近出始めた形式のため、使うサーバーによっては別で表示させるコードが必要になるとのこと。
ロゴなど簡単な色使いの物などは向いていそう。
・グラデーションなど情報量が多いものや写真、たくさんの色使いのイラストなどは向いていないが、簡単な色使いのものやロゴなどはJPGよりPNG-24が向いている（簡単なものであればPNGの方がデータ量が低い場合もある）
・（先生よりおすすめのサイト）TinyPNG
品質を下げすぎずに、適切なファイルサイズに圧縮してくれるサイト
【要参考】
・【STEP4】Webページの制作＞「WEBデザイン実習の教科書.pdf」参考
Adobe Dreamweaver（アドビドリームウィーバー）は、ひとことで言うとホームページ制作ソフトです。
編集機能やレイアウトの表示機能、ファイル管理機能など、制作や更新作業に必要な機能がひとまとめになっている、統合ソフトウェアとなります。
アドビシステムズのホームページでは、“Webデザインソフトウェア、HTMLエディター”となっています。“Webオーサリングツール”や“Webサイト作成ソフト”などとも呼ばれます。ホームページは基本的に「HTML＋画像」なので、頑張れば「メモ帳＋ペイント」でもなんとか作れます。しかし、作業効率などやミスの防止などを考えると、専用ソフトを利用した方が効果的です。
【ワンポイントアドバイス】
Dreamweaverの歴史は長いです。いま世にいるデザイナーのほとんどの方がDreamweaverを過去に使った又は習った事のあるケースが多いです。ただし、昨今ではDreamweaverの需要は落ちています。
その理由は、様々ですがこれからの希望職に合わせて、習得してみてください。
【参考サイト】
※最初のサイト定義が重要！しっかり決めておかないと後で大変になるので、フォルダの場所などしっかり決めておく
例：デスクトップに「○○○サイトの件名など」→「images」フォルダなどもできたら作っておく
【新規ファイルを一から作る場合】
右側ファイルウインドウ→デスクトップ▼横の「サイトの管理」→「新規サイト」
サイト名：（Dreamweaver上だけの名前なので、日本語でもOK。○○様とか○○サービスとか案件名など）
※その下の【ローカルサイトフォルダー】右側フォルダマーク「フォルダーの参照」デスクトップとか参照
「フォルダーの選択」→保存→完了
【元々TeraPadなどで作ったファイルを開く場合】
「開く」でhtml、CSSを開いて都度保存で上書き保存反映される
◆編集タブ→環境設定
・W3Cバリデーター：コードのエラーチェックはどのバージョンでやるかの設定
通常は現行のHTML5で、昔のサイトを触るときなどはそのサイトに合わせて選択
・コードヒント：終了タグ”</”がおすすめとのこと（好きなタイミングで閉じられる）
・コードフォーマット：インデント→2でも4でもOK、タブサイズ→4じゃなく2とかにするとタグの階層（親→子→孫）が深くなってタブが増えても見やすい
◆表示タブ→分割、左右表示・コード・コードだと見やすい
練習のためにもリアルビュー？は見ないで作業するようにとのこと
◆enter→<p>、shift+enter→<br>
◆ウィンドウ→プロパティでタグの細かい設定ができる
◆文字選択→【B】：太字、【🔗】：リンク
◆文字の上【≡ P ▼】の≡で「H2」等見出しや、クラス/ID指定とかもできる
クラスは「.～」、IDは「#～」で入力
◆下のDOMパネル→Pやsectionやdivなどタグで囲む
ドラッグで他のタグの下層に持っていける
◆右の挿入→画像も入れられる
※自動で末尾に入ってしまう”/”は消して、altの画像説明は必ず入力する（プロパティでもOK）
◆Table→表作れる
※先頭と末尾に「+body」が自動で付いてしまうけど消してOK
※width、borderも自動で付いてしまうが古い書き方で非推奨なので消すこと！
<table>～</table>にする
◆いったん一部分だけ消しとくとき
選択→コメントボタン
再表示するとき→コメントの削除でOK
◆「 」とか自動で入るのを消す方法
検索タブ→「現在の文書内を置換」→下段を空白（何も入れない）で「すべて置換」で消える
※「現在の文書内を置換」は、開いているファイル内のみ置換されるので、もし誤った場合でも戻せるが、
「ファイルを横断して検索/置換」だと、フォルダ内のDreamweaverで開いてないファイルも書き換えられてしまい、誤った場合戻す操作ができないので注意する！
◆右側【CSSデザイナー】→ソース→+「新規CSSファイルを作成」or作成済の場合「既存のCSSファイルを添付」（スタイルCSSやリセットCSS）
→「ファイル/URL」：「style」とか入れる、「リンクさせる」で追加
→htmlのhead内に自動リンクされる
◆【CSSデザイナー】htmlの<p>～</p>とか選択した状態で、+セレクタ→「CSSルールにフィルターを適用」に選択タグが表示されたらEnterで、CSSファイルに”P{ }”が記入される
◆左メニュー→…→「親タグを選択」をチェックして、表示させるように設定すると便利とのこと
◆Alt押しながら複数行選択で同時作業ができる
例：<td>～</td>
<td>～</td>
↓
<th>～</td>
<th>～</td> など始まりタグとかだけ同時変更できるが、末尾タグは手作業で修正が必要になる
◆（Dreamweaver内で？）ファイルタブでファイルを移動したときは自動でパスを書き替えてくれる
右上の≡ （メニュー）で新規フォルダー作れる
※（先生より）Dreamweaverのリアルタイムプレビューは使わないのがおすすめとのこと
(F12とかの）リアルタイムプレビューで見てしまうと、余計なコードが追加されてしまい見づらくなる→消すのが面倒になるので、編集はDreamweaver→直接ローカルのhtmlファイルをネット（chrome等）で表示させながら作業するのがベスト
★ネットで表示させたローカルhtmlを検証ツール（デベロッパーツール）で細かく調整して、CSSコードを表示させて【ctrl+A→ctrl+C】→Dreamweaverで【ctrl+A→ctrl+V】で全体コピペで上書き保存がやりやすいとのこと
（齋藤先生はhtmlだけ先に書いて、あとは全部検証ツール上でCSS書いているとのこと）
※リセットCSSについて
・リセットCSSは、style.cssに一緒に書くと読み込み速度が遅くならない（SEO対策になる？）ので、おすすめとのこと
・（先生より）リセットCSSは自分好みにカスタマイズしていく、サイトごとに毎回書かなくても、オリジナルのリセットCSSを持っておき、コピペして反映させるのがおすすめ
・湊先生は、style.cssの最初にリセットCSSを記載し、境目が分かるように「/*=====RESET=====*/」とかコメントでメモしているとのこと
・hp製PCはファンクションキーロックされているので、ロック解除するか、都度fnキー押しながらF7やF12を押せば反応する
・サーバー部分（FTP?）は、Dreamweaverのは使用せず、FFFTPなどを使った方がいいとのこと
・Webサイトは複数のブラウザで表示チェックするのが普通（各ブラウザで微妙に表示が違うので）なので、契約時にどのブラウザで見れるようにするかを決める
・chromeの拡張機能が便利（やるなら自分のPCで）
色スポイトとか、使用フォント、スクショ機能とかおすすめとのこと
