Web初学者がBootstrapとjQueryどちらから手をつけるか?+サンプルサイト設計手順【38web-3】

こんにちは、38歳からWebエンジニアを目指しているフェニックスA子(@lipton_milk999)です。

今日は写真の3つの本(HTML5+css3、Bootstrap、jQuery)を読み終えたので、その内容を整理しようと思います。

書籍をもとに整理すると、簡単なWebサイトの製作の流れとしては、次のような流れになるかと思います。(ここでは下層ページは除いて、まずトップページのみについてまず整理)

<Webサイト(②からはトップページ)の製作の流れ>

① サイトマップの作成(書くべきコンテンツの整理)*Webサイト全体を考慮
② ワイヤーフレーム(ページの骨組み)の作成(ツールあり、ノートに鉛筆でも可)
 *この辺りで、使う言語やツール(BootstrapとかjQueryとか)を考慮しておく
③ cssセレクタ設計(idやクラスの名前や区切りを考える)
④ デザインカンプの作成(デザインの入ったモックアップ画像、お絵かきツールなどでも可)
⑤ 原稿の作成(文字のみ)
⑥ HTMLマークアップ・コーディング(タグで囲む、③のcss用セレクタをつける)
⑦ cssコーディング(③のクラスを元に、④のデザインを実装)
⑧ 外部のパーツで動く機能の入れ込み(拡張的なグローバルナビ、スティッキーヘッダー(動くヘッダー)、カルーセル(横にスライドする画像)、ギャラリーなど)

という順番かなと思います。

HTML/css、Bootstrap、jQueryの使い分けはどうする?

①〜⑦までなら、HTML5+css3があればできるので、最も簡素なサンプルサイトはここまでで良いでしょう。

ただ、Bootstrapがあればこの①〜⑦を簡単にこなしつつ、⑧まで同時にできる可能性があるということを学びました。

具体的に、Bootstrap4で使えそうだなと思った機能は、こちらのnoteに書いてます。

これを、自力で一生懸命HTML+cssで実装したあとに、「Bootstrapならすぐできたじゃん!」となるのは、あまりにも時間がもったいないなと。

もちろん、そういう経験も必要なんでしょうが・・・せっかくあるなら使った方が良いです。

ただ、流石にcssを全く打ったことがない人がいきなりBootstrapから入ると、わけがわからなくなるし、どっちの話かわからず混同するので、まずcssを触った方が良いと思います。ついでにJavaScriptがなんであるか、の知識も必要だと思います。

(そう思うと、Bootstrapだけで結構敷居高いな・・・。まあ、各スキルの本をかじれば良いのです)

私のサンプルサイト設計構想

私の場合は、単純化のため次の流れで複数のサンプルサイトのバージョンを作ろうと思ってます。

<サンプルサイトバージョン)
ver.1: HTML5+css3のみ

ver.2:Bootstrap4
 パーツ候補:ナビゲーションバー、パンくずリスト、リストグループ、カルーセル(JS)、タブ切り替え、アコーディオン、モーダルダイアログで画像をUP(jQueryギャラリーの前身になりそう))
ver.3: jQuery
 パーツ候補:見え隠れサイドバー、スライドショー、スティッキーヘッダー、ギャラリー機能)
懸案事項:
・ver1と2は無駄が多そうなら融合するかも・・・
・ver2は、JavaScriptなしとありで分けた方が良いかも

こんな感じでしょうか。

設計構想だけは広がってますが、前職がWeb業界的にいうとフロントエンド?の人なので、実際コード書くとなると時間かかりそうです。

最初はDreamWeaverも使って一気に!と思いましたが、多分わけわからなくなるので、ちらっと本みてとりあえずテキストエディタ(mi)でやると良さそう。

コードをプレビューしてくれるWebコーディングツールもあるようなんで、ちょっと見てみましょうか。


*見つけたサイトメモ

ワイヤーフレームについては、このあたりに無料ツールが載っていました。


今日はここまで。

【この勉強ログは、マガジンにしています。フォローしてね。】


この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

F1クリエイターとして、そしてWebデザイナーの駆け出しとして、自らの手でサイトを立ち上げています。 ご支援を糧に素晴らしいものを作りたい。 どうぞ、よろしくお願いします。

ありがとう!
22

フェニックスA子

フリーランスクリエイター。2歳児のママです。現在はF1メディアを立ち上げる企画を実施中。▶︎Webエンジニア目指して勉強(2018/8/〜)▶︎職歴:SE7年、ハードウェア設計3年 F1メディア:https://f1miyouze.com

38からのWebエンジニア学習LOG【マガジン】

38才ママのフェニックスA子が、フリーランスでWebエンジニアを目指していく学習ログノートです。日々の学びを記録します。一緒に勉強していきましょう。 最初の記事はこれ。 https://note.mu/phoenix_ako/n/ne62f41fb1cc8
2つ のマガジンに含まれています
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。