40代目前の男がフリーランスを目指すブログ

40代目前の男がフリーランスを目指す為の日記です。

簡易ランディングページの作成3日目

9月3日(火)の日記です。

先日作成したデザインカンプの画像を元に、本日はHTMLにてWebページ制作を開始しました。

ちなみに今回はBootstrap4を使わず生のHTML・CSSでレスポンシブを踏まえたページを制作すると共に、先日Progateで新しく始まったFlexboxのレッスンを勉強したので早速それを導入したいと思います。
また、同じくProgateで学んだSASS(CSSに変数や階層が使える)も取り入れる事にしました。

SASSについては、拡張子である「scss」そのままではHTMLにて読み込めない為、最初はコマンドラインにてscssファイルをcssファイルに毎回変換していたのですが、当然の事ながら面倒であったので、「Prepros」という、scssの保存と同時にcssファイルへの自動変換を行ってくれるアプリを導入しました。

Prepros

無料版もありますので誰でも気軽に使えます。しかもLinux版もありますね。
実際にこれは使いやすいアプリです。一手間省ける事で確実に作業効率は良くなりますので。

まずはPC版の作成ですが、中々に大変な作業です。Bootstrap4を集中的にやっていたせいか、早速、生のHTMLでのコーディングを忘れかけていたので、思う様にレイアウトが決まりません...(汗)。
とりあえず現時点での進捗状況です。もっと頑張らないとですね。

f:id:eewano:20190904081901j:plain