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

この記事は、プログラミング初心者がHTML/CSS/PHP/Wordpressを学習して、仕事にするまでの過程を綴るシリーズです。
こんばんは、プログラミング初心者の氷犬です。
前回の記事はこちら⇒Webサイト製作を学ぶなら『WordPressの教科書2』で!【プログラミング学習記録⑤】
【画像あり】はじめてのランディングページ模写【プログラミング学習記録④】では、他社サイトのランディングページをコーディングしてみました。
2回目の今回は自分のブログのコーディングに挑戦です。
こんな人におすすめ
- ProgateなどでHTML/CSSの基本は勉強した
- jQueryも軽く学習した
- ランディングページをコーディングしたことがある
WordPressの基本構造のおさらい
このブログはWordpressの有料テーマ『ハミングバード』を使っています。
WordPressの構造は基本的にこんな感じです↓
WordPressの構造
- ヘッダー(header.php)
- 投稿記事(single.php,page.php)
- サイドバー(sidebar.php)
- フッター(footer.php)
WordPressでは、この4つのパーツをひとつひとつ呼び出して、1ページを作っています。
まあ、作り方も単純で、1ページを全部コーディングしたら各パーツにバラして使うイメージです。
今回作ったページはこちらです
今回作ったページはこちら(1サイト)。
作るのにだいたい10時間ぐらいかかりました。
縦に長いので、パーツごとに見ていきたいと思います。
1:トップナビメニュー
ランディングページでもブログでもおなじみのトップナビメニュー。
僕のブログはカテゴリーごとに階層があるのですが、その階層は再現しませんでした。
(働く>「フリーランス」「公務員・サラリーマン」のような階層がある)
ドロップダウンメニューといいますが、どうやらjQueryで実装できるようです。機会があれば練習しようかなと。
スマホではこんな感じです↓
本当は折りたたんでハンバーガーメニューにするのがいいのですが、「折りたたまなかったらどうなんだろう」と思って、あえて折りたたみませんでした。
ところで、スマホであえてメニューを開くことあるんでしょうか?
ハンバーガーメニューはまたの機会に実装したいと思います。
2:jQueryスライダー
あえてのスマホ版
おすすめ記事の一覧を表示するスライダーです。
スライドバーはjQueryのSlick.jsというフレームワークを使いました。
レスポンシブに強いカルーセルスライダーslickの使い方(別サイト)
やや手こずったのですが、「jQueryを読み込む⇒ファンクションを呼び出す」の順で無事に実装できました。
3:記事一覧とサイドバー
これだと少し構造がわかりにくいので、編集したものがこちらです↓
Bootstrapのグリッドシステムで調整しました。
毎回時間かかるんですけど、やっと仕組みが理解できたような気がします…(-_-;)
4:サイドバーの見出し
中にボーダー引くのが意外と大変でした。
ブロック要素と「overflow:hidden」がコツです。
5:ページナビ
パソコンでカーソルを当てると色が反転する仕様になっています。
6:タグ一覧
あんまり使いこなせてない
特筆すべき点はないですね笑
強いていうなら、aタグをインラインブロック要素として指定してあげるくらいでしょうか?
挑戦したこと:レスポンシブ・jQueryの実装・Flexbox
今回挑戦したことは、
- レスポンシブ対応
- jQueryの実装
- Flexbox
の3つ。
1:レスポンシブ対応
パソコン・スマートフォン・タブレットで見たときに、それぞれブラウザの横幅が違うので、ブラウザによって横幅を調整する必要があります。
ProgateのHTML/CSS上級編で学べますが、意識して使わないとすぐ忘れてしまいますね。
結局ゼロから調べ直してレスポンシブ対応させました。
Bootstrapを使っていると、ある程度は自動的に対応させてくれますが、細かい調整は自分でしないといけません。
ただ、パソコンの画面で丁寧に作り込んでいれば、割と簡単にできますね。
めんどくさがらずに積極的に練習しようと思います。
2:jQueryの実装
Javascriptで長々とコードを書かなくても、jQueryを使うとサイトの見た目を簡単にいじることができます。
jQueryの入門については、ドットインストールで学習するのが一番いいかなと思います。
jQueryの基本は、「jQueryを読み込む⇒関数(ファンクション)を呼び出す」です。
コードを記述するときに、「jQueryをどこで読み込んで」「ファンクションをどこで呼び出すか」を意識すると、「なぜか動かない…」ってことはなくなるはずです。
3:Flexboxの使用
こんなナビメニューは、Progateだとリスト要素<li>をfloat:rightさせて作っています。
しかし、floatは「要素を浮かせる」性質のものなので、親要素の高さに反映されなくなってしまうんですよね。
flotあるある
そこで、FlexBoxを使うと、CSSの簡単な記述だけでキレイに要素を横並びにできます。
デメリットは対応していないブラウザがあるぐらいで、最近のブラウザだったら普通に動くと思います。
floatは扱いにくいので、なるべくFlexを使う練習をした方がいいですね。
詳しくはこちらのページを見ていただければ↓
これからのCSSレイアウトはFlexboxで決まり! | Webクリエイターボックス
プログラミングは作っていくうちに楽しくなる
ゼロからのコーディングは2回目でしたが、作ってるとなんだかんだ楽しくてドンドンやってしまいますね。
ゼロからイチを作るのが一番大変なので、とりあえずは手を動かすのが手っ取り早くてオススメです。
Progateやドットインストールなどで基礎学習もいいですが、やはり実戦経験を積まないとうまくはなりません。
「お、このサイトなら自分でも作れそう」と思ったらドンドンコーディングしてみるといいですよ(^_^)
次の記事はこちら⇒初心者のjQuery学習におすすめ!『jQueryデザイン入門』【プログラミング学習記録⑦】