ウェブサイトの作り方

2021年02月02日

現在の会社に 配属してから、ウェブサイトを作る案件も増えてきました。
それ以外の場合は みなさんの使うPCの設定を行ったり、
印刷発注も していますが、実際に業務に就いてHTMLを書くようになって、
その作り方も 自分なりに身についてきました。

エディタはBrackets

最近のエディタはBracketsという Adobeが無償提供しているエディタを使っています。

過剰な機能もなく、プラグインで 自由に拡張できる。
まさに コーダーのためのツールです。

結果が そのまま反映される ライブプレビュー機能も備えており、
プレビュー上からの編集は 行えないものの、
クリックした場所に応じたコードの場所に飛んでくれたり、
逆に コードを選択していると、ライブプレビューでハイライトしてくれるという、
かなりのスグレモノです。

これとChromeの「検証」機能があれば、完璧です。

CSSはSCSSで

最近はSCSSで書いています。
通常のCSSに ネスティングや変数など、
プログラムのような機能が実装されたようなもので、
これが とても便利です。
元はSASSというもので、これに中カッコなどを使えるようにしたのがSCSSです。
基本SCSSだけ 使っていればいいです。

RubyをPCに インストールし、都度コンパイルする必要が あるのですが、
Bracketsに「Brackets SASS」というプラグインを入れれば、
Rubyいらずで Brackets内でコンパイルしてくれます。
たまに止まってしまう事も ありますが・・・

導入に若干の手間は かかるものの、それを覆すほどの便利さがあります。

クラス付与は最小限に

クラスも むやみに増やさないように しています。
というより、クラスはあまり付与しません。
基本的に 1セクションごとにIDを付与し、それを親のセレクタとして利用しています。

子要素のクラス指定だけは行いますが、
基本的には 子要素の中での親要素と、その親子関係のクラス名ぐらいです。
それ以外は タグ名を直接指定しています。

特に 特定のスタイルを指定するための 汎用クラスは あまり作りません。
例えば要素を横並びにするために クラスを付与という事は やりません。
これをこれらを繰り返していると、HTMLも冗長になり、
各クラスの特性を知らなければ、ピンポイントでの修正が 難しくなるからです。
修正が入る際にも、それらのクラスの概要を把握するよりも、
それらのクラスを解除し、まっさらな状態で CSSを書いたほうが早い程です。

ブレークポイントは作らない?

ブレークポイントは、端末の幅に応じた 切り替えポイントです。
私は このブレークポイントは作りません。

端末の横幅は様々で、特に機種として自由度の高いAndroidにおいては、
もはや 決まった横幅を指定する事は 不可能と言ってもいいでしょう。

なので、例えば横幅800px固定の要素は、
画面幅が800pxを下回れば 切り替わるように 都度メディアクエリを書いています。
そして、どの画面幅でも適用できるよう、
横幅指定には「%」や「vw」のような 可変単位で指定します。

従来のブレークポイントを設定する方式だと、
中途半端な横幅の端末の場合に 対応しきれず、
PCブラウザの場合、ブラウザを開く横幅によっては
横スクロールが要求されてしまう場合もあります。

また、通常の箇所と ブレークポイントの箇所を
行ったり来たりしながらCSSを書くのは 非効率的だからです。
各セクションごとに 固めて書いてしまったほうが
そこに適用されるスタイルが 一望できます。

キレイなHTMLとは

キレイなコードを書かなければ、引き継ぐ人はもちろん、
未来の自分でも 手が出せない代物になってしまいます。

特に注意したいのはHTML側。
スタイルのために むやみに入れ子にしたり、要素を増やしたりせず、
極力 必要最小限に構成するようにします。

CSSの方は 多少冗長になるのは 仕方ないと思います。
しかし、親子関係さえ しっかりとしていれば、案外うまくいきます。

変更が生じた場合には、本当に修正を加えるよりも、
部分的に 白紙に戻してしまったほうがいい場合が多いです。
そういう時に 親子関係さえ わかりやすくしていれば、意外と切り抜けられます。

必要なのは技術より想像力

技術というのは あくまでも手段であり、
必要なのは 想像力なのだなと思いました。

IT業界は 技術の進歩が すさまじく、
常に勉強を していく必要があると言いますが、
勉強だけしていても、想像力は養えないものです。

HTMLも ただコードを書いていくだけの単純作業ではなく、
どのように構成すれば 訪問者に観てもらえるのか。
他人の気持ちになって考える必要があり、
ただ技術を勉強するだけでは、そういった感性は 成長しません。
自分なりの趣味を持ち、技術とは別の事をする必要もあります。

常に新しい技術を使わなければならないかと言うと、そのような事は ありません。
新しい技術よりも 1・2歩手前でも、
重大なセキュリティホールがない限りは 使えるものは使っていけばいいのです。
たまに、新しい技術にも 目を向ければいいのです。

ただ、変化を恐れていたり、いつも通り見積もりが取りやすいからと、
いつまでも 古い技術にすがるのだけは、やめましょう。

新しい技術も 視野に入れつつ、
扱いやすいし、これは便利かもしれない と思ったら、
ちょっと踏み込んでみるだけでも いいと思います。
そして従来の方法よりも 明らかに便利だと思ったら、
その方向性に変える勇気を持てば いいはずです。

Pocket