CSSとは

CSSはHTMLで作られた要素に装飾をする言語です。テキストやコンテンツに対して色や大きさ・太さ、その他の装飾、レイアウトに至るまでのデザインを指定することができます。 例えるならばhtmlが人間の身体で、CSSでその人に服を着せたり髪や目の色を変えるといったイメージですね。

※当社2022年11月実績

Webサイトの制作には大きく分けて2種類の方法があります。

CMS型

CMSとはコーディングの知識がなくても、テキストや画像を管理画面から登録するだけで簡単にWebサイトを作ることができるシステムです。

CMSを使ったWebサイトは、「どこに画像を配置してどこにテキストが表示する」というテンプレートに素材をはめ込むような形で制作していきます。ソースコードを管理画面で一括管理しているため、全ページまたは指定したページの編集を一括して行うこともできます。フルスクラッチ型のように1ページ1ページ手作業で編集をする必要はありません。ですからちょっとした修正や高頻度な更新にも対応しやすい形となっています。 しかしCMS型Webサイトはテンプレートを使用するため、同じCMSのテンプレートを使っている他社との差別化（＝オリジナル性）することは難しいです。レイアウトやデザインの大きな変更（カスタマイズ）はhtmlやCSSの知識が必要となります。

突然ですが①と②どちらの方が見やすいでしょうか？

①

どちらもほぼ同じに見えているかと思います。 ですが実は①と②では異なるソースコードが記述されています。

①

<div style="padding: 10px 10px 10px 10px; border-radius: 10px; border: 2px solid #0085B2;">
<div style="font-size: 1.2em;">
<b>株式会社これから</b>
</div>
<div style="color: #191970; border-bottom: 3px double #191970;"><b>東京本社
</b></div>
</br>
住所：東京都新宿区新宿2-3-15大橋御苑ビル6F</br>
電話番号：03-5363-1966</br>
Fax番号：03-5363-1967
</div>
 

② html

<div class="box1">
<div class="corekara">株式会社これから</div>
<div class="office">東京本社</div>
<div>住所：東京都新宿区新宿2-3-15大橋御苑ビル6F</br>
電話番号：03-5363-1966</br>
Fax番号：03-5363-1967</div>
</div>
 

CSS

.box1{
  padding: 10px; 
  margin-bottom: 30px;
  border-radius: 10px; 
  border: 2px solid #0085B2;
}
 .corekara{
  font-size: 1.2em;
  font-weight: bold;
 }
 .office{
  font-weight: bold;
  color: #191970;
  border-bottom: 3px double #191970;
  margin-bottom: 20px;
 }
 

ソースコードの書き方は、多少違いがあってもWeb上では同じように見せることができます。 料理で例えてみましょう。『煮物』というメニューでも味付けを醤油か白だしどちらでするのか・普通の鍋か圧力鍋を使うのかなど、メニューが同じでも作る人によって味付けの仕方や使う道具が違いますよね。それと同じで、デザインが一緒のWebサイトでもコーディングする人によって記述の仕方が全く異なるのです。 またプログラミング言語は記述方法やルールが時代とともに変化していきます。そのため昔のコーディングしか知らないと、今は使われていないタグを使用してしまったり、昔の書き方のままだったり、、、なんてことも起こりえます。

いえいえ。実はWebサイトのソースコードは誰でも見ることができるのです。ではコレカラのサイトのソースコードを見てみましょう。（ソースコードの見方はブラウザによって異なります。）

Webサイトとソースコードを同時に見る場合

Webサイトのソースコードを見たい部分の上で右クリックをします。

見たい部分のソースコードが書かれている位置から表示されます。ソースコードの全体を見る場合と違うところは、その場で一時的に編集・確認ができることです。

ですから元のサイトから

こんなことや

あんなことも

できるというわけです。これは元のサイトを編集しているというわけではないので、他のブラウザやデバイスで見ても何も変化はしていません。ちなみに検証から編集したものはリロードすると元に戻ります。

お客様がネットで買い物をするときに、ショップのソースコードを見て 「よし！このサイトはとてもきれいにコーディングされている！だからここで購入しよう！！」 なんてことは100％ありません。

ですがまれにWeb上での見え方はほとんど同じでも、正しい記述方法ではなかったためにGoogleから良い評価をもらえない（＝SEO的に良くない）という事態がおこることもあります。

またWebサイトの更新をする際に、きちんと記述しなかったがゆえにどこを触ったらいいかわからなくなってしまった！なんてこともあります。特に複数人でサイトの運営をするのであれば、自分だけでなく全員がどこに何が書かれているのかがわかるようにしておいた方がいいですよね。 Webサイトや自分たちの今後のためにも、ソースコードはきれいにわかりやすく書くようにしましょう。

※当社2022年4月実績

コーダーに直撃インタビュー！！コーダーの仕事内容やネットショップのコーディングをする上で大切にしていることなどを聞いてみました！

コーディングをする上で大切にしていることは何ですか？

ソースコードはわかりやすくきれいに書くということです。弊社ではCMSを使ったネットショップの構築がほとんどなのですが、その大きな理由としては「お客様が自分自身で更新しやすい」というのがあります。 どうしてもコーディングを全く知らない人にとってソースコードを見るというのは苦痛だと思います。それでも一般の人でもどんどん更新ができるというのがCMSを使ったネットショップの最大のメリットなので、どんなにきれいでフラッシーなサイトでも今後お客様が自身で更新できなければ意味はないかなと。なのでお客様がある程度触るところに関しては更新しやすいように構築するということを心がけています。サイトの更新がされないと情報やデザインが退化して、どんなに素晴らしい商品を扱っていても、閲覧者の購買意欲を減退させてしまう要因となりますので。

難しいソースコードをいっぱい使ってWebサイトを構築したり開発したりできる人は世の中にたくさんいます。でも「以前他の制作会社でサイトを作ってもらったけど、更新したいのにどこを触ればいいのか全くわからない！」という声も実際にお客様から上がることもあって。そういうことを考えると、ちょっと単純に見えるかもしれないけどお客様がサイトの更新をおっくうにならずにできる方がサイトとしては生き続けられるので、そういうところは気を使っていますね。

あとはミスをしない！他人に迷惑をかけない！納期を守ること！（笑）