Web制作学習６ヶ月目
- WordPress構築
- Sass(Darts Sass)
- レスポンシブ
- 修了式
WordPress構築
- WordPressのインストール
- WordPress用のデータベース領域作成
- WordPressファイルを配置
- データベース情報の設定
- オリジナルテーマ作成
- オリジナルテーマ作成
- オリジナルテーマ作成用プラグイン
- オリジナルテーマの構成
- テンプレート
- 専用テンプレートと優先度
- 表示用テンプレート
- テンプレートコーディングっとセキュリティ
- 外部ファイルの読み込み
- XSS(クロスサイトスクリプティング)対策
- サイト情報を取得・表示
- メニュー機能
- サイト内検索
- CSSファイルの読み込み
- JavaScriptファイルの読み込み
- 共通パーツをモジュール化
- 表示用メインループ
- アイキャッチ機能
- 専用テンプレート
- 条件分岐に使用する関数
- 専用テンプレート作成
- 専用テンプレートコーディング
- 投稿にカテゴリーリンク・タグリンクを表示
- アーカイブタイトルを表示
- 一覧ページの総件数を表示
- 一覧にページネーションを表示
- 表示用サブループと条件
- 表示用サブループ設置
- メインループの条件を変更
- 投稿抜粋文のカスタマイズ
- ウィジェット
- コメント
- 編集画面
- 管理画面用CSSファイルの読み込み
- カラーパレットのカスタマイズ
- ブロックデザイン
- バックアップとサイト移行
- WordPressサイトをバックアップ
- 新しい環境の作成と移行準備
- データベースファイル内のサイトURL変更
- WordPressサイトの移行
いよいよ大詰めのWordPress化。講義でやっっている時は置き換えているだけでそんなに難しく感じなかったが、いざじぶんでやってみるとなるとわけがわからなくなる。5回やれば覚えると講師の方も言ってたので、場数を踏んでマスターできるのを目標としたい。
Sass
- SassをVSCodeで使用する方法
- Sassとは
- SASS記法とSCSS記法
- VSCodeにSassを導入する
- Sass利用準備
- Sassコンパイラを起動
- コンパイルによって生成されるファイル
- Sass(SCSS)の基本記法
- SASS記法
- SCSS記法
- 子孫セレクタ：セレクタをネスト
- 親の参照：「＆」
- 変数：「$変数名」
- インターポレーション
- 計算
- コメント
- Sassの設定
- 設定方法
- liveSassComplie.settings.formats
- format：出力するCSSファイルフォーマットを指定
- extensionNmae：出力するCSSファイル拡張子を指定
- savePath：出力する場所を指定
- ファイルを分割管理
- CSSファイルのインポート
- よく使うスタイルの定義と呼出
- @mixin：よく使うスタイルを定義
- @include：よく使うスタイルを呼び出す
- 本体ファイルで定義ファイルと呼出ファイルを読み込む
- @mixinで引数を使う
- @contentで追加定義を渡す
- メディアクエリをmixinで作成
- SassとBEMを組み合わせる
- CSS用クラス名の命名規則例
- フォルダ構成例
- ワークスペースの設定
- baseフォルダ：ResetCSSを変数定義ファイル
- mixinフォルダ：Sass内でよく使う記述を定義
- moduleフォルダ：パーツを超えて利用するデザイン
- 書き出し用CSS
- BEMブロック(パーツ)のデザイン定義
- ブロック名：Boxデザイン
- ブロック名：Cardデザイン
- ブロック名：Headerデザイン
- ブロック名：FooterNavデザイン
- ブロック名：Footerデザイン
- ブロック名：Paginationデザイン
習得したかったSassにも触れられて良かった。これからはDarts Sassに切り替わるということで、個人的に講師の方に教えてもらった。講師の方もまだ曖昧な感じでしたが調べて教えていただけて有難かったです。
レスポンシブ
- ユーザエイジェントの振り分け
- レスポンシブWebデザイン
- 画面幅を基準にCSSを変更
- ブレイクポイント：区切りとなる画面幅の値
- レスポンシブデザインで必要なこと
- viewportでスマホ表示領域設定
- meta要素でviewport設定
- メディアクエリで画面幅に応じたCSS定義
- HTMLのlink要素属性として定義する方法：media属性
- CSS内に@mediaを使って定義する方法：@media
- スマホサイトのCSS対応
- デバイス固有パーツを表示・非表示
- スマホサイトの基本ルール：横スクロールバーを表示させない
- 検証ツールで横スクロールバーが表示される状態になってないか確認
- 文章の周り込みを解除
- 画面を横方向中央揃えで表示
- flexを使った複数の段組みを１段組にする
- 文字サイズや左右余白を画面幅を基準とした「vw」で指定
- スマホサイトの画像対応
- Retinaディスプレイとは
- Retinaディスプレイ対応
- アートディレクションとは
- アートディレクション：別画像切り替えレガシー
- アートディレクション：別画像切り替えモダン
こちらも習得したかったレスポンシブ化。Sassもレスポンシブ化もCSSを学ぶタイミングで一度に教えてもらった方が、使いこなす時間があったのになと思いました。
レスポンシブ化はコーディングが倍になる感じだけど、Sassと組み合わせることより簡単にコーディングできる気がします。WordPress化と同時に使い慣れていないSassとレスポンシブ化を進めていくと、頭がパンクして大変だったので同時進行はお勧めしません。
修了式
修了式は10:00から12:00の予定でしたが、11時過ぎには終わってました。
修了式では、修了証書や職業能力証明シート、雇用保険受給資格者証、就職状況報告書など受け取ります。
職業能力証明シートはなんか成績表みたいな感じで、全員A評価なのかと思ったらそういうわけでもないみたい。（各項目ABC評価）この成績表が誰が評価・コメントして、どう活かせるのかよくわかりませんが貰います。
その後、その日のうちにハローワークへ行き手続きをします。
就職が決まってなければ1ヶ月延長で給付金がもらえますが、各ハローワークによって申請方法は少し違うみたいなのでお気をつけてください。
また、クラスメイトで希望職種をwebエンジニア以外のエンジニアにしたり、有効求人倍率が基準より高い求人(ex. インフラエンジニア)を希望した場合、該当者に当てはまらなくなり延長給付金がもらえないという事態になりそうだった人もいるので、延長給付金を受け取りたい方は気をつけてください。
さらにハローワークで受講証明書を渡さないといつまで経っても入金されないので気をつけてください。提出する書類がわからなければ、とりあえずそれっぽいものを全てファイルに入れて提出しちゃいましょう！修了式で受講証明書なんかもらってないと勘違いして、提出しなかったためずっと給付金が振り込まれなくて、再度ハロワへ出戻ったクラスメイトもいたので。笑
