グリッドレイアウトに変更中。
「あれ？上手くいかない・・・」を一生繰り返している。
3/24までにはレイアウトを変えたいところ。（取り組み始めてから1か月経過するので）
不要なdivボックスが多かっただけの模様。
ええぞ。
ブログ名を揃えようとしたところで時間切れ。
memo
・コード入力時に「ウィンドウを左右並べて表示」を使うようになった
・テーマファイルを直接変更するようにして動作確認速度を上げた
・結構コメントを書くようになった。（公開するときは消さないと恥ずかしいかもしれない）
・数年前に購入したWordPressレッスンブックを再読した。ページ数の都合だとは思うけどかなり不親切な部類。
当時ほぼ頭に入らなかったのも頷けるくらいのドS構成。
座学2日目
座学ができる喜び。
以下 2014/12/31時点の私的メモから抜粋
2.0から始めるHTMLとCSSの基本を眺める。
http://endoutakae.com/2012/02/08/webdesign/
こういう記事を待っていた ( ´ω｀)■メモ
「2.基本的なタグ」でテキストをコピペしてhtmlファイルを作成して開いてみたら文字化けした。(IE,Firefox)
文字エンコードをShift-JISにしたら表示された。「h」「p」タグは何のためにあるかを調べる必要あり。
「br /」は大事らしい。「3.marginとpaddingの違い」あたりからいきなりハードになっていく。
いきなり応用に突入して終わったんだけどどういうことなの ( ´ω｀)・・・img src=は画像を表示するhtmlタグ
サンプルcssを開いてみる。
よくわからないので観察してみる。“#”で始まっているものと、”.”で始まっているものがある。
書いてる途中でwikiを眺めたら色々載っていた。ここまででアルファベットが色々出てきたけど、読み方が分からない
ものがチラホラあったので調べておく。ひとまず0から始まっていないことが分かりました ( ｀ω´)
5年前はこのレベルだった。
2DXで言えばゲームの始め方が分からないレベル。
ここから3回頓挫(1年間頓挫、1週間勉強、3年頓挫、2週間勉強、1年頓挫）して今に至る。
解決
これは緑本が悪い（失礼）
本の序盤で<div>～</div>で括ってた箇所を、どこかのタイミングで<div class=”contents”>～</div> に書き換えていて、更にcss側でdiv要素にスタイルを適用していたはずが、sampleファイルの方ではクラス名（.contents)に書き換えられていた。
いやーサイレント修正はズルイでしょ。
divが不要になるなら「不要なので一度消してください」という手順を書かないとダメでしょ ( ｀ω´)-3ﾌﾟﾋｰ
緑本はこれで終了じゃい。
一昨日買った本をもとに座学中。
2/24の自分が読んだら震えて泣くレベルの良書。ありがとう・・・ありがとう・・・
体調はちょい悪い感じ。
5分に1回くらいのペースで上の住人が床に重量感のある物を落としてきていて、その度に体に振動が伝わってくるので、あまり心身が休まってないです。
故意じゃなければ階下の住人に振動を伝えてもOKで、階上の住人に振動を体験してもらうために天井に真昇龍拳を撃つのはNGというのが社会のルール。
集合住宅における騒音はお互い様とかいう言葉を思い出したけど、この言葉は「気を遣う者同士」か「気を遣わないし気にもならない者同士」のパターンでないと使えない気がした。
—
水色本終わり
http://toiblog.unison.jp/200315/sample.html
反省点、気づいたこと : @mediaの最後の}を忘れがち。1つの衍字、脱字で大惨事になる。css側でアニメーションを細かく設定できるのには驚いた。
昼寝後にボロボロな結果だった緑本に再チャレンジする。
W3C公式 : https://www.w3.org/TR/
日本語訳ページが幾つかあるようだけど、更新が追いついていなかったり、「この日本語訳も歴史的な意義しかなく、それ以外の目的で利用してはなりません。」という警告文が出てきたりして非推奨扱いとなっている模様。
今後のことを考慮すると電子辞書を買っておいても良いかもしれないな。
おかわり
4年前は難しくてスルーしていた本を買う時がきた。
今なら4割くらいは理解できそう。
—
緑本は記載内容にミスがある気がするんだよなぁ・・・
説明通りにやるとこうなる。こうなる理由も説明できる。
説明できるというか、普通に見れる。
少なくともこのタイミングではこの箱の背景を白色に設定しないとダメな気がしている。
致し方なし。
水色本と比べて明らかにcssの書き方例が悪い気がする。
どの記述を上書きしているかが書かれていない、もしくはそもそも上書きが抜けている疑惑もある。
体調の悪さよ。
Meltykissをかじりながら体調を戻していく。
一段落
http://toiblog.unison.jp/200314/sample.html
珍しく崩れていない ( ´ω｀)ﾖｷﾖｷ
テーマver2.0案
もう一段落
http://toiblog.unison.jp/200314_2/sample.html
明日には水色本が終わりそう。
早めに寝て朝活しようとしたけど結局眠いという。
休日は12時間作業しても平日のような眠気を感じないので、やはり平日はストレスがよく溜まるのだろう。
何だかんだで今期は病欠していないので、体力が無い訳ではないと思うんだよな・・・( ´ω｀)
（行動体力、防衛体力ともにそれなりにある気がしている）
とりあえず寝足りないので寝てきます。
青本より水色本の方がグリッドの説明が分かりやすい。
今日はここまで。
memo
スマホでのアクセス時はリスト（カテゴリー）を上部に出すようにする。
ファンティの効果が切れてしまった・・・( ´ω｀)
日々の業務がメタルマックス2のドラム缶を押す仕事に匹敵するほどに虚無感溢れるものなので、そこで無駄にエネルギーを使ってる気がする。
Chromeで確認すると@mediaの設定が反映されないんだけど、
Firefoxで確認すると反映される。
（※幅を狭くしたときにメニューをギチギチにする設定）
Chromeでも通常の閲覧時だと反映されて、デベロッパーツール上では反映されない。うーむ。
Firefox「脱字ありますよ」
お狐様ありがてぇ ( ´ω｀)人
エビスコムさんの設定反映後にミスってるのを確認させてから該当箇所を直す流れ 好きよ
今日の夜食
見た目がぶっ壊れてるのを直すのは2周目でやる。水色本を進める。
余計な閉じタグ </aside> のようなものが混ざっていてもDreamWeaver上ではエラーにならない。
ミスを見つけづらいのがややしんどい。
ミスする理由
・かなり長い時間取り組んでるので疲弊している
・キーボードが死ぬほどしょぼくて打ちづらい（静音性を優先してるので、変更はできない）
・書籍内の説明通りに進めるとミスを誘発しやすい
（どこに追記するのかが分かりにくい ＆ 一度記入した内容を頻繁に書き換える流れになっている）
書籍のサンプル記事の中に英単語のスペルミスがあったりすると、少し勇気を貰える （とても性格が悪い）
水色本は解説ページが少なくて手を動かすセクションが多いので、1日やそこらで終わる感じではない。
cssのfrの語源は（fraction : 割合）らしい。
個人的に語源が分からない状態で読み進めるのは効率が悪いと思っているので、都度調べている。
進捗状況
ファンティの効き方がぱない。これ本当に合法か？ ( ´ω｀)
一時期流行ったキューピーコーワヒーリングとは比べ物にならない。
仮にこれがプラセボだったとしたらユンケルスターでも同じような効果を実感できるはずだけど、明らかにユンケルスターと比べても効き方が違う。
ファンティは動物性生薬が多いらしいので、動物たちが俺に力を貸してくれてるのでしょう。
青本を読み進めている。
メモ多め。明日には1周できそう。
memo
・ヘッダー（<header>～</header>）を入れ忘れただけでグリッドが出なくなった。
1個抜けただけで上手く機能しなくなるのか。
・セレクタ（疑似要素）というのが難解。何故HTML側に記述しないのかが不明。
・PC版レイアウトで8列に設定する辺りで、脳みそがギブアップ気味になった。
・昨日テストサイトのレイアウトがぶっ壊れたのは@mediaの書き方に問題があったからかもしれん。半角スペースを入れると直るかも。
→気のせいだった。
最後の最後で物凄い崩れ方をして終了。明日直す。
このページだけややマシだった。
index → body classが入ってなかったので修正
3/5に購入した緑色の本を読み進めている。
明日辺りには表示確認用サイトに反映できそう（サイドバーにリンクを張りました）
以前職場で俺が部下に「このサイト、PCで閲覧した時の表示がイケてないですね」と話していた時に、別の人から「TOIさん、これはレスポンシブというやつなんですよ。ご存知、ないのですか？」と言う感じで軽く煽られたことがあったけど、本を読み進めていて改めてそのサイトは全然レスポンシブ対応出来ていなかったことが分かったので、マウントを取られてたんだなぁとしみじみ感じている。
そういった人を引き寄せるフェロモンが俺から出てるのかなぁ ( ´ω｀)
とりあえず緑本を読み終えたけど、全然レスポンシブになってなくて泣いた。
説明通りにやったはずなんだけどな。
明日もう一度見直して、すぐに対応できなそうな場合は青色本に移行しようと思う。
memo
・画像ファイルの拡張子が大文字の場合は、それに合わせて参照先を大文字にしておかないと画像が出ない模様。
・公式からサンプルを落としてきて修正してみたけど、レスポンシブにならない。
Firefoxで幅を狭くした時だけそこそこ良い感じに表示される。
これを本気で対応するとなると、主要ブラウザを全部揃えて表示を確認しないといけないのでは・・・( ´ω｀)
これは大変だ・・・