TOI BLOG

「Web制作」に関する記事

雑記


新たにグリッドを引かなくても画面右側にメニューを表示できそう。
(同じエリアに記事部分とメニュー部分を表示させて、記事表示幅を80%、メニュー表示幅を20%にし、メニュー部分を右寄せする)

テーマを更新(1.3.1)
■更新履歴
・画面右上にカテゴリーを表示するようにした
・画面幅を狭めた時にfooterの位置がおかしくなるのを修正(横グリッドを1本追加)

■memo
・デカレッサーパンダの影響で、思っていたのと違う動きになっている
・自己紹介ページと言う名のやりたい放題のページを作りたい。 何か違う感じがしたので止め。

・作業の準備と進め方を変えた
作業フォルダ内を綺麗にする → Chrome動作確認用のファイルを作成 → 併せて仮想環境に反映するためのフォルダを用意 → Chromeでの動作確認である程度整ってきたら仮想環境反映用のファイルに統合 → 仮想環境で動作確認 → 見れるレベルであればそのまま公開
昔はChromeで動作確認なんかしたことが無かったので、これでも進歩しているほう。

・Font Awesomeから借りてるアイコンを自作できないか → いずれillustrator勉強日記を書く
・googleが掲げる10の事実 https://www.google.com/about/philosophy.html
頭に入れておく。
・ページ毎にcssを切り替える → 自己紹介ページよりもこっちを先にやった方がよさそう。

・モバイルフレンドリーテスト https://search.google.com/test/mobile-friendly?hl=ja

(;´ω`)ヒィー

雑記

ブログのテーマを更新しました。(きりのよいところまでやらないと寝つきが悪くなるため)
劣化してる部分が多いので諸々直していきます (;´ω`)

■更新履歴
・floatで位置を調整していたのをgridでの調整に変更した。これに伴ってテーマ内のファイルをほぼ全部打ち直した。
(更新前のテーマは購入した本の丸写しだったけど、今回は7割方自力で頑張った。)
・文字サイズを見直した(最近視力が落ちてきて小さい文字を読むのがきついので、文字サイズを大きくした)

■memo
・文字装飾系のプロパティを一旦削除した
 →スマホで見た時に色が変わっていなかったのが一点。あとはページの背景色が白だとちょっと眩しかったりするので、そこら辺のバランスも考慮して見直したい。
・functions.phpを小綺麗にした
 →手作りアーカイブがスマホで見るとダメな感じになっていたのと、追加していたクイックタグがほぼ機能していないので削除した。
・コメントフォームがギャグみたいになってるので直す
・ヘッダー周りの調整が出来ていないので頑張る
・画面幅を狭めた時にfooterの位置がおかしくなる
・hrタグで引いた罫線と記事名の下の線の見た目が被ってるので何とかする

雑記

グリッドレイアウトが適用されるのは、グリッドコンテナの子要素(グリッドアイテム)までで、孫要素には適用されない。

<body>

<div></div> ←適用される
<p></p> ←適用される
<div> ←適用される
   <p></p> ←適用されない
</div>

</body>

—
body {display: grid}

この説明は2日前に欲しかったゾ・・・ ( ´ω`)
ブログタイトルの文字が動かせない理由はここにあった。


まとめてインデント(範囲選択後にTabキーを押す)を覚えた。


レッサーパンダ大好きブログになってる。


こういうことらしい。
2日前の俺は、↑の左側の大枠を作った直後にメニューを画面右側に動かそうとして「上手くいかない」を一生繰り返すおじさんとなっていた。


フィルタのチェックボックスをON/OFFすると無意味なプロパティが見えてくる。
これで大枠は整った感がある。



HEX:16進数
DEC:10進数
OCT:8進数
BIN:2進数
こういうのを説明してくれてるサイトには感謝の意を込めて50円くらい支払いたい。
これを調べた理由は、背景色にアルファチャンネルを設定する際にRGBを0~255で指定する必要があるため。
opacityプロパティはオブジェクト全体に適用されるっぽいのでrgbaで指定するようにする。


体調が悪くて今一捗らない。ファンティ投入か。

成果に飢えるあまり表示がバグったテーマを反映しそうになるけど、もう少し我慢。
→我慢できなかった ( ´ω`)テヘペロ
明日からまた頑張る。


memo

今自分がやっていること(日々記録をつけること)はHabit Chain(習慣の鎖)というらしい。
cssの書き方によってページの表示速度が変わるらしい。これ系の話はまだ気にしない。

雑記


グリッドレイアウトに変更中。
「あれ?上手くいかない・・・」を一生繰り返している。
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の書き方例が悪い気がする。
どの記述を上書きしているかが書かれていない、もしくはそもそも上書きが抜けている疑惑もある。

雑記

早めに寝て朝活しようとしたけど結局眠いという。
休日は12時間作業しても平日のような眠気を感じないので、やはり平日はストレスがよく溜まるのだろう。
何だかんだで今期は病欠していないので、体力が無い訳ではないと思うんだよな・・・( ´ω`)
(行動体力、防衛体力ともにそれなりにある気がしている)

とりあえず寝足りないので寝てきます。



青本より水色本の方がグリッドの説明が分かりやすい。



今日はここまで。

memo
スマホでのアクセス時はリスト(カテゴリー)を上部に出すようにする。

雑記

ファンティの効果が切れてしまった・・・( ´ω`)
日々の業務がメタルマックス2のドラム缶を押す仕事に匹敵するほどに虚無感溢れるものなので、そこで無駄にエネルギーを使ってる気がする。



Chromeで確認すると@mediaの設定が反映されないんだけど、


Firefoxで確認すると反映される。
(※幅を狭くしたときにメニューをギチギチにする設定)

Chromeでも通常の閲覧時だと反映されて、デベロッパーツール上では反映されない。うーむ。


Firefox「脱字ありますよ」
お狐様ありがてぇ ( ´ω`)人

エビスコムさんの設定反映後にミスってるのを確認させてから該当箇所を直す流れ 好きよ