ホームページ、Webシステム開発ならエボルニにお任せください

HTML + CSSコーディング

ウェブサイトの運営方針に合わせたコーディング(マークアップ)をさせていただきます

お客さまのホームページでも、インターネットを利用した広告掲載に充てる費用が、数年前に比べて大きな割合を占めるようになっているのではないでしょうか。

そこで注目され始めたのが検索サイトの有効活用を目的としたSEOやSEMです。掲載回数やクリック回数に応じて費用がかかる広告ではなく、検索結果の上位に表示されることを目指してサイトを最適化することで、コストを抑えて広告と同等の効果を得たり、検索結果にテキスト広告を出すことでサイトの目的を達成しようというものです。

しかし、適切なコーディング(マークアップ)が行われていないサイトも多く、伝えたい内容が適切に検索サイトから認識されず、正しい評価を得られていない場合がございます。

アクセシビリティやユーザビリティといった言葉の認知度が高まり、利用者を中心に考えたホームページが求められる中、正しく意味のあるコーディング(マークアップ)を行うことは、ウェブサイト制作の基本中の基本と言えるでしょう。

HTML5+CSS3コーディングのメリットとは

エボルニではtable要素(タグ)を使ってレイアウトすることが主流だった頃からCSSでコーディング(マークアップ)を行なってまいりました。

レイアウトや見た目の装飾をCSSで行うことで、HTMLから分離することができるため、HTMLには伝えたい内容だけが集まり、結果として検索サイトから「より正しいページの評価」を受けることができるようになりました。(自社のサイトにてリニューアルまでの5年間「CSSコーディング」で3位以内を維持した実績あり。)

今ではCSSコーディングは基本的な技術となりました。ブラウザの世代交代、スマホやタブレットの登場もあって、以前の「職人技」といった印象も薄れて、より身近になったように思います。

HTML5+CSS3では、これまでの主流であった XHTML+CSSと比較して次の二つのメリットを強く感じています。

まず、高機能なことがより手軽に実現できるようになりました。
例えば、video要素、audio要素、canvas要素などによって、Flashがなくても、動画・音声の再生や、3DCGの描画などがブラウザだけで実現できるようになりました。

次に、ソースコードがより簡潔になりました。
XHTMLではid属性やclass属性をつけて、そのコンテンツがどのような意味を持つかを表しました。HTML5になり、コンテンツの意味を表現するための要素が豊富になりましたので、文書の意味付けが簡潔で理解しやすくなりました。

HTML+CSSコーディングのこだわり

HTML5では、コンテンツを制御するためのAPIが豊富になりました。
これを活かすためには、JavaScriptでAPIを使いこなす必要がありますので、HTML・CSSだけではなく、プログラミングについても高い技術レベルが要求されます。

また、今までJavaScriptで実現していたことが、CSSに任せられるようにもなってきました。

このような状況を踏まえて、これまでHTML、CSS、JavaScriptがそれぞれ担ってきた役割を、改めて考え直さなければなりません。

従来よりも実現できることの幅が広がり、実現方法も多様化するなかで、エボルニではお客さまのご希望をどのように実現すべきか、その時々に最適な設計・実装を行なっております。

HTML+CSSコーディングの品質管理について

エボルニでは納品物の品質を維持するために品質管理チームを構成しております。
ミスを減らすための品質管理体制として、機械的検査ができるコーディングチェックツールの利用と、 制作担当者とは異なる観点での目視チェックを徹底しています。

日々変わり続けるコーディング技術を見据えて、エボルニではさまざまな取り組みを行なっています。チームの技術向上と情報共有のためのミーティング、最新の情報を収集するための勉強会への参加、チェック体制の確立、使用可能な技術・実装方法の検討など、常に話し合い、より良いコーディング(マークアップ)をお客さまにご提供できるように努めています。

コーディングの品質については他に負けない自信がございます。

コーディング品質と作業環境の関係

HTMLとCSSを組み合わせてコーディング(マークアップ)することは、言い換えると、頭の中で描いたものを両手を通して形にしていくことです。
人間の思考の速度はとても速いため、タイピングの速さや正確さが作業効率に大きく影響することになります。

エボルニではコーディングの作業効率を上げるために、作業環境の改善を日々行っています。
例えば複数カーソルの機能があるエディタを利用することで、置換や矩形選択とはまた違った横断的なテキスト編集が可能になります。
中でも特に効果的だったのはEmmetとSASS(.scss)などのCSSのプリプロセッサ(メタ言語)の導入でした。

Emmetはコーディングの「速さ」と「正確さ」を、とても楽しい手法で向上してくれます。
原理は単純で、省略記法を使って記述し、それをエディタのショートカットで普通のHTMLやCSSに展開します。
省略記法を使うことでタイプ数が減りますし、展開できた時点でHTMLタグの構造やCSSプロパティのスペルが正しいことが保証されているので、覚え違いやtypoといったミスも減ります。
HTMLの省略記法がCSSのセレクタの構文を元に設計されていたり、CSSプロパティの省略記法は、感覚的に理解できる要因として大きいです。
慣れた人ならば、ブラインドタッチ できる VS できない ぐらいの差が「速さ」に出ます。
Emmetには他にも「思考」からさらに「感覚」へと近づいていくような仕組みが、たくさん用意されていますので、制作を依頼する側の方にもおすすめです。

CSSプリプロセッサはEmmetとはアプローチがまったく異なり、元になるファイルを別で用意しておき、それをコンパイル(トランスパイル)して通常のCSSを得るという手法を採用しています。
結果的に普通のCSSが生成されれば良い訳なので、多くのCSSプリプロセッサはみんなが夢に見ていた、変数に代表されるようなプログラミング言語の概念をCSSに追加してしまいました。
部品を再利用するメリットを得るには考えることが増えますが、一つのタグにclassをたくさん付けるのが嫌な人は、もう一度、理想を追求するきっかけになるかもしれません。

※Emmetは以前はZen Codingという名称でした。こちらは聞いたことがあるという方もいらっしゃるのではないでしょうか。

※SASSのように、ある言語に変換される言語のことをメタ言語やプリプロセッサと呼びます。
更新する際には拡張子が.scssのファイルを編集する必要がありますので、導入する前にお客さまに確認させていただきます。

TOP