こんにちは！ハッサク（@hassaku_888）と申します。
2022年1月から休職し6月に退職。現在はデイトラでWeb制作を鋭意勉強中です。
前回まとめてから、あっとういう間の1ヶ月でした。
過去の学習記録もまとめていますので、興味がありましたら是非ご覧ください（＾＾）↓
上記を見ると、今のところ、1ヶ月ごとに初級→中級→上級と、学習は進んでいるみたいですね。
デイトラは初級〜上級編を完走するのに約３ヶ月かかるそうですが、その想定どおりに勉強が進んでいて驚きました。（やっている本人としては、つまるところはつまるし、理解するのにとても時間をかけていると感じているため😂）
では学習時間は増えてる？減っている？勉強時間を振り返ってみます。
１ヶ月の学習時間は？
総学習時間は175時間25分でした。
前回が153時間40分でしたので、22時間増えました。
今のところ、毎月の総学習時間は増える一方です。自分、本当にやりおる😳👏
この月は、中級編の最終課題提出がありました。納期に間に合わせるため時間がかかり、総学習時間も増えているのかなと思います。
最終課題はLP 1ページを制作しました。(レスポンシブ込み)
提出だけで、57時間50分(7日間)かかりました。
総学習時間は、2022年８月２０日〜９月２０日（計3１日）の記録です。
うち学習日は２９日、休んだ日は２日でした。
月初は忙しいので１日休み、もう１日は誕生日だったので出かけていました。
学習も４ヶ月目に差し掛かりましたが、ほぼ毎日地道に勉強を続けており、自分、素直にすごい👏✨
こんなに継続して努力しているのは、学生自体の部活以来かもしれません。
仕事でも確かに努力はしていましたが、「家に帰っても自主的に勉強する」というのは意志がないと出来ないなと。逆にいうと、意志があると人間こんなに出来るものなのですね。
人間のポテンシャルって分からないものですね。（しみじみ）
Web制作 学習内容は？
中級編の総復習のライブコーディングを終え、最終課題に7日間取り組みました。
その後はすぐ上級編へと進み、PHP、WordPressのオリジナルテーマ作成に奮闘する日々でした。
今月は、WordPressにめちゃくちゃヒィヒィ言わされてます・・・😭
| 学習○日目 | 日付 | 学習時間 | 学習内容 |
| 8/20 | 休み | ブログ執筆。勉強はお休み。 | |
| 91 | 8/21 | 2:40:00 | #デイトラ中級編DAY32途中 中級総復習編(見本動画CSS) |
| 92 | 8/22 | 7:00:00 | #デイトラ 中級編DAY32途中 中級総復習編(見本動画CSS PC完了/SP途中) |
| 93 | 8/23 | 6:30:00 | #デイトラ 中級編DAY32途中 中級総復習編(見本動画CSS SP完了, アニメーション・フォーム機能の実装) |
| 94 | 8/24 | 4:20:00 | #デイトラ 中級編DAY32 中級総復習編(アニメーション・フォーム機能の実装完了) |
| 95 | 8/25 | 6:00:00 | #デイトラ 中級編DAY33 最終課題(HTMLコーディング、CSSはServiceまで) |
| 96 | 8/26 | 8:20:00 | #デイトラ 中級編DAY34 最終課題(CSSざっくり完了) |
| 97 | 8/27 | 8:20:00 | #デイトラ 中級編DAY35 最終課題(SPデザインざっくり完了) |
| 98 | 8/28 | 7:20:00 | #デイトラ 中級編DAY36 最終課題(全体概ね完成) |
| 99 | 8/29 | 12:30:00 | #デイトラ 中級編DAY37 最終課題(全体実装完了) |
| 100 | 8/30 | 9:50:00 | #デイトラ 中級編DAY37途中 最終課題(提出前チェック完了、品質担保テスト9割完了) |
| 101 | 8/31 | 5:30:00 | #デイトラ 中級編DAY37 最終課題提出！ |
| 102 | 9/1 | 3:00:00 | #デイトラ 中級編DAY37 見本コード比較 |
| 9/2 | 休み | ||
| 103 | 9/3 | 1:40:00 | #デイトラ 中級編DAY37 見本コード比較 |
| 104 | 9/4 | 1:00:00 | #デイトラ 中級編DAY37 見本コード比較(昨日と同内容) |
| 105 | 9/5 | 4:35:00 | #デイトラ 上級編1~4途中 PHPの基本文法を学ぼう 上記以外:ブログ記事/サムネ作成 |
| 106 | 9/6 | 7:30:00 | #デイトラ 上級編DAY4~6 PHPの基本文法を学ぼう PHPでECサイトを作ってみよう SQLの基本を学ぼう |
| 107 | 9/7 | 9:10:00 | #デイトラ 上級編7途中 ローカル開発環境を作ろう コーディング課題 |
| 108 | 9/8 | 6:20:00 | #デイトラ 上級編7途中 コーディング課題(4h) 中級最終課題修正 |
| 109 | 9/9 | 7:20:00 | #デイトラ 上級編7~9途中 中級最終課題修正(計5ヵ所完了) WordPressの基本概念を理解しよう WordPressテーマの初期設定/テンプレートファイル作成 |
| 110 | 9/10 | 5:00:00 | #デイトラ 上級編9~11途中 WordPressテーマ初期設定/テンプレfile作成 TOPに新着記事一覧表示 menu有効化 |
| 111 | 9/11 | 2:45:00 | #デイトラ 上級編11,12途中 演習課題:フッターメニュー表示 フックを使ったカスタマイズを覚える/アーカイブページを作る |
| 112 | 9/12 | 6:30:00 | #デイトラ 上級編12,13 パンくず/ フックを使ったカスタマイズ/アーカイブページを作る single.phpを編集して投稿ページを作る |
| 113 | 9/13 | 6:00:00 | #デイトラ 上級編14途中 single.phpを編集して投稿ページを作る （コンテンツ部分、タグ、シェアボタン） |
| 114 | 9/14 | 6:50:00 | #デイトラ 上級編14途中 演習課題2: single.phpに関連記事表示 |
| 115 | 9/15 | 3:10:00 | #デイトラ 上級編14途中 var_dump利便性向上のため「Xdebug」を有効化 |
| 116 | 9/16 | 1:00:00 | #デイトラ 上級編14途中 get_postsの使い方 |
| 117 | 9/17 | 5:50:00 | #デイトラ 上級編14,15途中 固定ページを作る+サイトの保守性を高める |
| 118 | 9/18 | 3:15:00 | #デイトラ 上級編DAY15,16途中 独自関数の定義・演習課題4 pickupのパーツ化・表示 |
| 119 | 9/19 | 6:40:00 | #デイトラ 上級編DAY16.17途中 pickup表示(固定表示/管理画面から更新して表示) ウィジェットを有効化しサイドバーを作る |
| 120 | 9/20 | 9:30:00 | ※うち45分サムネ画像作成 #デイトラ 上級編DAY17.18途中 サイドバーの中身を設定/Twitter埋め込み 自作コードでサイドバーを作る(profile/検索box) |
ざっと書きましたが、ざっくりと取り組んだ内容をまとめると、以下のとおりです。
- お洒落なアクセサリーサイトの制作（レスポンシブ・アニメーション・フォーム実装込み）
- 中級編最終課題のサイト制作・課題提出・添削内容復習
- PHP基本文法の学習
- WordPress開発環境構築・テーマ制作（index/header/footer/sidebar/archive.php作成、パンくず/ フックを使ったカスタマイズ/pickup表示/独自関数の定義 等）
WordPressの学習が始まってからは、毎日心折れそうなギリギリのラインで勉強していました。（現在もですが😂）
心底しんどいですが、諦めず粘り強くやっていると、ほんの少しずつですが分かってくる部分が増えてきました。
始めて学習中に目がうるうるするくらい、行き詰まりを感じつつも、なんとか学習を続けています。
その結果か？今学習を振り返っていて「え！？意外と進んでる！？」と思いました😂
それくらい、WordPressの学習が始まってから、分からないことが多すぎて全然進んでいないという体感がとても強かったからです。（1DAYに3日〜かかる時もあるので）
とても学びが多く、毎日の学習ツイートも勉強で分かったことをまとめてから、ツイートするようになりました。
そちらに詳しくまとめているので、以下からは今月のツイートを抜粋して貼りたいと思います。
学習記録詳細
✅復習：横幅の取り方
— ハッサク🍊 (@hassaku_888) September 7, 2022
・カード
100%/カード枚数-余白の幅*余白の数/カード枚数
・ニュース
日付+余白+ラベル：固定値(width: 185px;)
タイトル：可変(width: calc(100% – 185px);)
・画像とテーブル横並び(添付
画像：比率(画像幅454px / 1200 * 100%)
テーブル：比率※間の余白はmargin-left:auto; pic.twitter.com/madCnqNqtd
勉強92目(7:00学習)#デイトラ 中級編DAY32途中
— ハッサク🍊 (@hassaku_888) August 22, 2022
中級総復習編(見本動画CSS PC完了/SP途中)
・checkboxが動作しない
→labelタグに空のfor属性を指定しているのが原因だった。
<label for=””> → for=””削除でなおった
<input type=checkbox”>
<span>~</span>
</label>
勉強93目(6:30学習)#デイトラ 中級編DAY32途中
— ハッサク🍊 (@hassaku_888) August 23, 2022
中級総復習編(見本動画CSS SP完了,
アニメーション・フォーム機能の実装)
✅アニメーション(hover等)の設定はPCだけでOK
→SPだとタップ後にアニメーションが残ることがある
✅画像サイズがバラバラでも同じ画角で表示したい
→padding-topで縦横比維持
inner幅・CSS設定時の注意点
— ハッサク🍊 (@hassaku_888) August 24, 2022
✅innerにbox-sizing: content-box;をあてる
→ reset.cssにbox-sizing: border-box;をあてている為、設定しないとinner幅(コンテンツ)が狭くなってしまう
例
.inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 40px;
box-sizing: content-box; ←必要
} pic.twitter.com/W4i0ylQ1S6
ケアレスミス😇
— ハッサク🍊 (@hassaku_888) August 24, 2022
・Form送信ボタンが有効にならず
→JSで、全体を覆っている閉じカッコの記述漏れ（VScodeで原因確認できた）
・checkboxのinputタグエリア消失
→ <label for=”△”〜の△にスタイルをあて不具（for→classに変更で直った）
・spもpcも同じスタイルあたる
→メディアクエリー記述ミス
✅.swiper-pagination-bulletをスライドの外に出したい
— ハッサク🍊 (@hassaku_888) August 27, 2022
→HTMLの構造を変える必要がある。swiper-paginationをswiperと同階層に移動する（移動せず動かすとswiper-slideから●がはみでて消える）
✅.swiper-pagination-bullet-activeになった時、.swiper-pagination-bulletの周りに線を引きたい(添付) pic.twitter.com/CcweEXLTGA
✅FormのGoogleフォーム連携時の注意点
— ハッサク🍊 (@hassaku_888) September 1, 2022
①メルアドが入力必須の場合
Googleフォームの設定＞メールアドレスを収集する
②メルアドが入力必須でない場合
質問項目としてつくる（添付参照）
※メルアド収集は利用×
メルアド必須でないのに①でつくると、メルアド入力時は届くがメルアド未入力だと届かず pic.twitter.com/D1B6wMqis0
勉強102目(3:00学習)#デイトラ 中級編DAY37
— ハッサク🍊 (@hassaku_888) September 1, 2022
見本コード比較
✅swiperのスライド画像・commentsのイメージ画像を<figure>で囲う
→<figure>は多くの場合、図表やイラスト、写真に利用。その部分だけを抜き出しても意味が成り立つようなものに使う。（キャプション/注釈を付けた形で使われることも） pic.twitter.com/QLWxrzrDba
勉強105目(4:35学習)#デイトラ 上級編1~4途中
— ハッサク🍊 (@hassaku_888) September 5, 2022
PHPの基本文法を学ぼう
上記以外:ブログ記事/サムネ作成
✅関数を実行するには関数名に()をつければOK(添付)
✅>=と=>の使い分け注意
条件式で「AはB以上の場合」は「A >= B」と書く。
連想配列で「キーと値を設定する場合」は「”数学” => 89」と書く。 pic.twitter.com/Pvhkxv9sS0
✅同じHTMLの記述が続く場合、foreachを利用すると記述量を減らせる
— ハッサク🍊 (@hassaku_888) September 6, 2022
✅public(インスタンスから値を取得可能/書き換え可能)↔︎private(publicの逆。値が書き換えられることがなくなる)
※private $name;とすると、$nameの値は書き換え不可だが、getName()を利用することで$nameは取得可能になる(添付 pic.twitter.com/IYekMWDCIT
✅Q&Aのアコーディオン が、Q&Aの背景から飛び出てしまう
— ハッサク🍊 (@hassaku_888) September 9, 2022
→Q&Aの背景に設定した高さ「height:952px」を消したら解決。しかし、背景画像がアコーディオンの開閉に合わせて拡大縮小する
→背景に「background-attachment: fixed;」を当てたら解決。（背景画像の大きさが一定になる） pic.twitter.com/WM9tWb765W
勉強110目(5:00学習)#デイトラ 上級編9~11途中
— ハッサク🍊 (@hassaku_888) September 10, 2022
WordPressテーマ初期設定/テンプレfile作成
TOPに新着記事一覧表示
menu有効化
CSS効かない原因が「functions.php」のsが抜けてた😂
あとページネーションのphp書き換え時、class名削除するのにスタイルあたってるの不思議🤔
✅paginate_links(添付) pic.twitter.com/cWpnhWoGkh
✅phpのif文はendifを必ず書く必要あり
— ハッサク🍊 (@hassaku_888) September 12, 2022
※ただif文は書き方が複数ある
↓
if( is_category()) {
}
と書く場合は、}でちゃんと括弧が閉じられていればendifを書く必要は×
メモ：
if (have_posts()) : ?>のように、末尾が「: ?>」で終わるif文は、記述の最後に <?php endif; ?>を書いて終わっている
✅関連記事が1件しか表示されない
— ハッサク🍊 (@hassaku_888) September 14, 2022
管理画面→設定→表示設定で「表示する最大投稿数」が1になっていたので直すと解決
↓
しかし、取得記事数の指定(‘posts_per_page’ )が効かない
↓
‘post_per_page’ となっていたのでsを追加し、’posts_per_page’ に修正すると解決🎉
✅var_dump使用時は「Xdebug」を有効化すると便利
— ハッサク🍊 (@hassaku_888) September 15, 2022
→添付のようなBefore/Afterとなり出力結果が見やすくなる
※注意点「2.php.iniを編集」ではphp.iniの一番下に[xdebug]という記述があるのでそれ以下に記述すること(一番上に書いても有効化されない)
MAMP環境での実装方法↓https://t.co/gTRmabbSOD pic.twitter.com/odgsCAUBZN
✅
— ハッサク🍊 (@hassaku_888) September 20, 2022
・グローバル変数＝メインクエリ
・内容は最新記事
と教えてもらい 、innerの下でvar_dump($post);で確認。
すると確かに最近記事1つだけの投稿情報が表示された！
例えば記事タイトルを取得したい場合「$post->post-title」と書けばOK。var_dumpで出てきた値ってそういう風に参照できるのね😳 pic.twitter.com/P1dLYzLw5g
まとめ
ツイッターに学習記録・学びを詳細に書くようになったので、ブログの意味は・・😂と思うようになったハッサクです。内容が重複しちゃうので、来月からはひっそりとなくなっているかもしれません。
今月は個人的には、衝撃的な月でした。
本当に「Web制作向いてないのかも」と思うほど、WordPressの壁にぶち当たりました。
中級編までのコーディングも大変でしたが、個人的には比になりませんでした😂
とりあえず、やり切ります。やり切って、続けて、試してみないと何も分からないので。
「この道で1度挑戦したい！」と思ったので、とりあえずやってみます。
そのためにはまず、目の前の学習を頑張ります！！（小声）
ここまで読んでくださり、ありがとうございました！
