社員S:「社長、せっかく社員を募集してるんですから、そろそろホームページを作り変えませんか」 社長:「確かになぁ。そう言えば、フロントエンドの開発経験はあったっけ」 社員S:「いや、ないですね」 社長:「ちょうどいい機会だしhtml,css,javascriptの体験してみようか」 社員S:「そうですね！楽しそうです」 社長:「フレームワークは『Bootstrap5』を使おう」 社員S:「『Bootstrap5』？」 このようなやり取りを経て、会社のホームページ作りがスタートしました。 フロントエンド開発経験がほぼない社員Sがお送りする、ホームページ作成奮闘記です。

まずはホームページを作成する上での目的をはっきりさせましょう。 今回は社員の増員を目的とし、かつなるべく『Bootstrap5』のコンテンツを活用する様にします。 次に大まかなページレイアウトを決めました。 トップのページでは、社内の活動を発信できたり、 会社概要にはマップを入れたいなど。 他社のホームページや『Bootstrap5』のサンプルを元にイメージを膨らませます。 膨らんだイメージを形にするべくhtmlにコードを書き込みベースを作っていきます。 ベースができたら更にイメージが膨らみます。 デザインや全体の色合い。会社のロゴなども考えました(←社長作) ほぼ、初めての作業ということでCSSがどのように反映されるかを1つ1つ確認し、 文字の配置、レイアウトがうまく収まらないことに悪銭苦闘の日々が続きます。 今まであまり意識してきませんでしたが画面の最大値、最小値やグリッドなど 自身がホームページを作る事で他のページでもいろいろな気づきがありました。 ホームページデザインは奥が深い。

『Bootstrap5』について、このフレームワークが便利であることにはじめは気づく余裕もなかったです。 CSSの動作を理解していく中で「これは、便利なCSSの詰め込みパック」という印象を抱きました。 class化された資材の使い方についてはこちらにまとめられてます。 使用してみて、理解に時間がかかったのはナブ(nav)タグの存在です。 このタグ、fixed-topで画面上部に固定すると下の表示が隠れ文字を潰してしまいます。 設定したメニューバーの高さ分を文字の書き出しから下にずらす事で表示させることができました。 トップページのニュースに使用したPCの絵は『Bootstrap Icons』を使用しています。 おそらくアイコン位の大きさで使うものですが、サイズを大きくして設定しました。 詳しい特徴はこちらで確認できます。 バリエーションが多いため今後も活用して行きたいです。 『Bootstrap』のバージョンによる記載の違いなどもありました。 例えば、文字の位置を設定する際に使用する"text-start,text-end"は『Bootstrap5』の書き方で 以前のバージョンでは"text-light,text-left"と書くようです。

今回の作業では、サーバーを介さないフロントエンド開発を体験できました。 ホームページとしては、改良の余地を多く残しておりますので 作業は引き続き対応して行こうと思います。