CSS3の進化から考えるWebサイトのこれから

2016年9月 1日

ITC中部 理事 ブランドデザイン委員会委員長 高橋 浩史


こんにちは。BDの(ブランドデザイン)委員会の高橋です。

W3C20116月に最初の規格を勧告してから5年が経過しました。


WEB1.0だ! WEB2.0へ! いや次はモバイルファーストだ!

難解な割に、実は意味は無く言葉。

言葉の格好良さに、ついつい使ってしまう事もありますが、言葉のキーワードの事実は、過去ににしかないカモしれませんね。


難解な言葉が流行る一方、HTMLCSS(スタイルシート)等の技術的な要素はW3C のティム・バーナーズ=リーさんが提唱した「セマンティックWEB」の考えからズレず、「より良いコードであろうとする」考えからブレません。

一本筋の通った九州男児の様で、もし「セマンテックWEBちゃん」の様に擬人化されたキャラが私のかざすiPhoneのポケモンアプリで、目の前に現れたらなら、迷わずモンスターボールを投げるでしょう。


 今日は、Webサイトを形成している基本技術の2大スターであるHTML(文章構造)とCSS(見た目)のうち、CSSに焦点をあて、Webサイトのこれからについて考えたいと思います。


-----

◆CSSとは

-----

 ・スタイルシート と呼ばれるテキストです

 ・一般的には、HTMLからCSSを呼び出して使います

 ・現在のバーションはCSS3です


-----

◆セマンテックWEBが見据えるもの

-----

 ・誰でも簡単に、気軽にWEBを道具とする事

 ・デバイスの変化に柔軟に対応できるWebサイトを作るための基本構造である事

 時代の流れと共に起こるHTMLCSS、その他や技術の変化は「人中心」でありたいと願っていると思います。


 ここでは、具体的にCSSがどの様に「人中心」でありたくて進化しているかをご紹介します。 

人中心であろうとするCSSを、「ソースコードの量」で、いじらしさをか感じてあげてください。


ソースコード例

====================================

■今までのソースコード

/*CSS*/

.cf::after {

content:"";

display:table;

clear:both;

}

.foo {

float: left;

}

/*HTML*/

<ul class="cf">

<li class="foo">要素1</li>

<li class="foo">要素2</li>

<li class="foo">要素3</li>

</ul>


■最近のソースコード

/*CSS*/

.cf{

display:flex

}

/*HTML*/

<ul class="cf">

<li>要素1</li>

<li>要素2</li>

<li>要素3</li>

</ul>


※注意1

-vendor prefix については省く

※注意2

対応ブラウザについて

http://caniuse.com/#search=flex <http://caniuse.com/#search=flex>


同じことを表す為に必要なコード数が減りつつある

====================================

 上記のliを利用した構成は、良くインターネットで見るコンテンツのデザインである「横並びのブロックコンテンツ」です。CSS3では、ご覧頂いた通りコード数は減少する傾向にあります。

これは、技術が人の知恵と協力で作られており、より人が使いやすくなろうとした結果と言えると思います。


技術が身近になるからこそ、経営に役立つWebサイトを「考える」事に時間と費用が使える時代に!

====================================

 ソースコードが簡単になる事で、メンテナンス性が改善される事でWebサイト制作に掛かる費用は値下がりする傾向にあります。

ユーザ企業としては良いことであると同時に、同じ予算の中で、Web上でチャレンジする可能性が増えた

考えう事も出来ると思います。

すこし極論ですが、「自社ホームページ」はネット上に存在する1つの「信頼度の高い看板」に過ぎない時代になって行くと思います。

これからは、「企業アカウント」「ハッシュタグ」も十分に自社HPの代用品として情報発信が出来る時代です。CSS3の進化はより優れたソーシャルサービス等を生み出します。

 さらに、FacebookInstagram、ツイッター、LINE@などはアカウントを持ち運用を開始するまでに費用は発生しません。


Webサイトのこれから

====================================

 Webサイトを作る根幹技術である「CSS3」の進化の過程とあるべき姿の考察から、Webサイトのこれからのについて考えました。

 自社では取得が難し企業様の多いと思います。その場合は、ぜひ個人で試してみて下さい。

「ログイン」する事で多くの「気づき」と出会います。

 ログインして見える世界で迷子になったり、その気づきの中で、ムズムズとビジネスチャンスを感じ、技術的に困る事があれば、BD委員会がサポートします。


■まずは以下サービスのアカウントを取得する事から

Facebook

https://ja-jp.facebook.com

Instagram

https://www.instagram.com/

ツイッター

https://twitter.com/?lang=ja

Line@

http://at.line.me/jp/plan

以上です

  • 株式會社テクノア 全国出荷実績No1の生産管理システム 利益体質企業への変革を支援します
  • 中小企業に特化したシンクライアント OfficeCloud
  • ホームページ制作・リニューアルUNION
  • ITイノベーション
  • 中京車体工業株式会社
  • 広告募集中
  •           

>>広告掲載について

ITデータ企業向けサービス 登録依頼はこちら

ITCデータベース

ITC中部各種委員会に参加する

ITC中部登録情報変更フォーム

ITC中部コラム ビジネスに使えるITツールとは?

合格への近道!

ITコーディネータ協会