ブログ

Blog

dot. CREATIONのサイト構造について

2023年12月17日

12月12日より公開しました本サイトですが、ここではどのような構造で作成を行なったのかを解説していきます!

サイト構造について

近年のWebサイト制作で主要となっている作り方は以下の3つとなっております。

  1. HTML・CSSで0からコードを書く
  2. WordPressのテンプレートを用いて、カスタマイズしていく
  3. 「Studio AI」等のノーコードツールで、コードを書かずに作成

今回はこれまでの自分の実績をまとめたポートフォリオサイトという意味合いで作成したことや、今後はエンジニアだけでなくデザインの案件にも携わりたいと考えているのですが、デザインの実績が現時点では乏しいと感じ、このサイトをデザインの実績のひとつとして機能させるためには0から作り込むことが必要と感じたため「0からコードを書く」という手段を選びました。

SASSを用いたCSS記法

0からコードを書くためにはテキストエディタと呼ばれるコードを書くためのツールが必要となります。
今回は「Visual Studio Code(以下「VS Code」)」というツールを使い書いていきました。

このツールを使用する利点としては、Adobeが提供する「Dreamweaver」という有料ツールと似た使い勝手が無料でできるという部分も大きいのですが、個人的に一番の利点としてはVSCodeのプラグインを用いてCSSを「SASS」の記法で使えるということだと感じてます。
一般的なテキストエディタでSASSを使おうとすると、SASSで書かれたものをCSSの記述に書き起こすためのツールを別途準備しなければならなかったりと面倒なのですが、VSCodeだとプラグインひとつで自動で行ってくれるのでとても便利です。

掛け算ができなければ割り算ができないように、CSSに対する理解がなければSASSは書けませんし、そもそもHTMLへの理解がないとCSSも書けません。
ですので、この記事を読んでいる方の中には「何を言ってるんだ?」と感じる方もいると思うので、これらを解説してくれているURLを貼っておきます。

それでも「わからん!」という方もいると思いますので、ここではとりあえず「自分が思う中で最も楽な方法で作った」という風に受け取ってください!!

CONTACT

dot. CREATIONへのご相談やご質問は、こちらからお問い合わせください。

PAGE TOP