独学プログラミング(WP編)【171~180日目】

プログラミング日記

独学プログラミング(WP編)【171日目】

indexのstyle.css

レスポンシブ表示にするため、flexを導入です。今までの参考書課題では「base」「tablet」「pc」に区分していたので、これをひとつにまとめる方法を探しました。「@media」が使えるようなので、書いてみました。
なにか、ちょっと違うような気がしますが、動いたので良しです。もう少し「@media」を勉強します。

 

独学プログラミング(WP編)【172日目】

indexのstyle.css

「@media」部分を書き直しました。baseとpcの2パターンしか表示させていませんが、きちんとフレキシブルになっていると思います。sidebar表示はgridを使うのか、flexを使うのか、思案中です。

 

独学プログラミング(WP編)【173日目】

indexのstyle.css

「@media」部分を、もう一度書き直しました。スマホビューを優先するため、範囲を逆設定にしました。うまく表示できて良かったです。
sidebar表示のために、参考書とにらめっこしながらflexです。プログラミングをはじめた頃は、どうしても上手くいかなくて、たくさんたくさん悩んでいました。あの頃が、懐かしいですね。進歩した自分を、褒めます(笑)。

 

独学プログラミング(WP編)【174日目】

参考サイト

手探りで作成している自作テーマですが、作成方法を無料で教えて下さるサイトを発見しました!いろいろな作成方法や手順を検索、勉強していますが、ここは私の作業に合っている感じですね。とても助かります。
最終的には自作テーマ作成の、自分マニュアル&テンプレートを作りたいので、ノートにメモを取りつつ作業していきます。

 

独学プログラミング(WP編)【175日目】

style.css

勉強しながら、書きながら、です。テーマ概要、共通cssは、とりあえずこれくらいで大丈夫かな、と思います。

functions.php

難しいので、後回し

header.php

理解が追いついた部分まで

 

独学プログラミング(WP編)【176日目】

  • header.php
  • footer.php
  • single.php

理解できる部分をしっかり書こうと思ったら、みすぼらしくなってしまいました。少し落ち着いて、参考サイトと構築済みサイトを解読します。

 

独学プログラミング(WP編)【177日目】

  • single.php
  • sidebar.php
  • ローカル環境にアップ

できることから順番に取りかかっています。手順に右往左往して、あまり進んでいない感じがします。自分用の作成手順を、考えた方が効率的かもしれませんね。少し、自分作成手順を試します。

 

独学プログラミング(WP編)【178日目】

作成手順の見直し

最初に「テーマの見た目(デザイン)」を固めておくことが、大切だと感じました。最初から、base、tablet、pcのデザインをしっかり決めておくと、コードが書きやすいです。しかもこの時点で、エリア位置や名称も、決めておくのが良さそうです。

HTML→phpに書き換え

いきなりphpでも良さそうです。ただし、自分作成テンプレートがある場合だけですね。特にphpは自分で関数を作るため、何となくコードを書くと、途中でわからなくなってしまいます。(phpに限ったことではありませんが…)

それぞれのデータに書き加える

それぞれのデータに、足りない部分を書き加えます。ローカル環境にアップしてみましたが、エラーです。正しければ、白紙の表示らしいのですが…。
う~ん…。難しいですね。

 

独学プログラミング(WP編)【179日目】

CSS修正

確認用のCSSを書き、HTMLを修正しました。その後、もう一度CSSを修正です。モノの見事に失敗しました。
@mediaが悪いような気がします。お手本はpcからCSSを整えていますが、スマホファーストで整えたいので、baseから書きたいのです。一晩寝かせて、考え直しますね。

 

独学プログラミング(WP編)【180日目】

プログラミング勉強をはじめて、180日。つまり、半年が過ぎました。皆勤賞ではありませんが、長く続けられたことは嬉しいです。もう少し、スキルアップできれば、もっと嬉しいので……頑張って積み上げていきますね(苦笑)。

メディアクエリ

メディアクエリと格闘中です。まず、メディアクエリをCSSの一番下に移動しました。反映させてみると、floatがうまくできていないことがわかりました。
floatがうまく表示されなかったのは、divclass名、paddingと表示範囲%がおかしかったからです。参考書を引っ張り出してきて、基本から見直し、1行ずつ確認、表示、修正。どうにか最後には、floatさせることができました。
初心者がfloatでプログラミング挫折するのも、今更ながら、頷けます。勉強を始めてから半年が経過しましたが、ちょっと心が折れるかと思いました(苦笑)。もう少し、floatの勉強もしよう。