自分のブログをコーディングしてみました【プログラミング学習記録⑥】

この記事は、プログラミング初心者がHTML/CSS/PHP/Wordpressを学習して、仕事にするまでの過程を綴るシリーズです。

こんな人におすすめ

• ProgateなどでHTML/CSSの基本は勉強した
• jQueryも軽く学習した
• ランディングページをコーディングしたことがある

WordPressの基本構造のおさらい

このブログはWordpressの有料テーマ『ハミングバード』を使っています。

 

WordPressの構造は基本的にこんな感じです↓

WordPressでは、この４つのパーツをひとつひとつ呼び出して、１ページを作っています。

まあ、作り方も単純で、１ページを全部コーディングしたら各パーツにバラして使うイメージです。

今回作ったページはこちらです

今回作ったページはこちら（１サイト）。

作るのにだいたい10時間ぐらいかかりました。

 

縦に長いので、パーツごとに見ていきたいと思います。

１：トップナビメニュー

ランディングページでもブログでもおなじみのトップナビメニュー。

僕のブログはカテゴリーごとに階層があるのですが、その階層は再現しませんでした。

（働く＞「フリーランス」「公務員・サラリーマン」のような階層がある）

ドロップダウンメニューといいますが、どうやらjQueryで実装できるようです。機会があれば練習しようかなと。

 

スマホではこんな感じです↓

本当は折りたたんでハンバーガーメニューにするのがいいのですが、「折りたたまなかったらどうなんだろう」と思って、あえて折りたたみませんでした。

ところで、スマホであえてメニューを開くことあるんでしょうか？

ハンバーガーメニューはまたの機会に実装したいと思います。

 

２：jQueryスライダー

あえてのスマホ版

おすすめ記事の一覧を表示するスライダーです。

スライドバーはjQueryのSlick.jsというフレームワークを使いました。

レスポンシブに強いカルーセルスライダーslickの使い方（別サイト）

 

やや手こずったのですが、「jQueryを読み込む⇒ファンクションを呼び出す」の順で無事に実装できました。

 

３：記事一覧とサイドバー

これだと少し構造がわかりにくいので、編集したものがこちらです↓

Bootstrapのグリッドシステムで調整しました。

毎回時間かかるんですけど、やっと仕組みが理解できたような気がします…(-_-;)

 

４：サイドバーの見出し

中にボーダー引くのが意外と大変でした。

ブロック要素と「overflow:hidden」がコツです。

 

５：ページナビ

パソコンでカーソルを当てると色が反転する仕様になっています。

 

６：タグ一覧

あんまり使いこなせてない

特筆すべき点はないですね笑

強いていうなら、aタグをインラインブロック要素として指定してあげるくらいでしょうか？

挑戦したこと：レスポンシブ・jQueryの実装・Flexbox

今回挑戦したことは、

• レスポンシブ対応
• jQueryの実装
• Flexbox

の３つ。

１：レスポンシブ対応

パソコン・スマートフォン・タブレットで見たときに、それぞれブラウザの横幅が違うので、ブラウザによって横幅を調整する必要があります。

ProgateのHTML/CSS上級編で学べますが、意識して使わないとすぐ忘れてしまいますね。

結局ゼロから調べ直してレスポンシブ対応させました。

 

Bootstrapを使っていると、ある程度は自動的に対応させてくれますが、細かい調整は自分でしないといけません。

ただ、パソコンの画面で丁寧に作り込んでいれば、割と簡単にできますね。

めんどくさがらずに積極的に練習しようと思います。

 

２：jQueryの実装

Javascriptで長々とコードを書かなくても、jQueryを使うとサイトの見た目を簡単にいじることができます。

jQueryの入門については、ドットインストールで学習するのが一番いいかなと思います。

 

jQueryの基本は、「jQueryを読み込む⇒関数（ファンクション）を呼び出す」です。

コードを記述するときに、「jQueryをどこで読み込んで」「ファンクションをどこで呼び出すか」を意識すると、「なぜか動かない…」ってことはなくなるはずです。

 

３：Flexboxの使用

こんなナビメニューは、Progateだとリスト要素<li>をfloat:rightさせて作っています。

 

しかし、floatは「要素を浮かせる」性質のものなので、親要素の高さに反映されなくなってしまうんですよね。

flotあるある

そこで、FlexBoxを使うと、CSSの簡単な記述だけでキレイに要素を横並びにできます。

デメリットは対応していないブラウザがあるぐらいで、最近のブラウザだったら普通に動くと思います。

floatは扱いにくいので、なるべくFlexを使う練習をした方がいいですね。

 

詳しくはこちらのページを見ていただければ↓

これからのCSSレイアウトはFlexboxで決まり！ | Webクリエイターボックス

プログラミングは作っていくうちに楽しくなる

ゼロからのコーディングは２回目でしたが、作ってるとなんだかんだ楽しくてドンドンやってしまいますね。

ゼロからイチを作るのが一番大変なので、とりあえずは手を動かすのが手っ取り早くてオススメです。

 

Progateやドットインストールなどで基礎学習もいいですが、やはり実戦経験を積まないとうまくはなりません。

「お、このサイトなら自分でも作れそう」と思ったらドンドンコーディングしてみるといいですよ(^_^)

 

次の記事はこちら⇒初心者のjQuery学習におすすめ！『jQueryデザイン入門』【プログラミング学習記録⑦】