Now Loading...
menu
  • すべて
  • web制作
  • 写真を楽しむ
  • カメラで遊ぶ
  • モノ
  • 旅
  • おすすめツール

イマドキなコーディングって?最近のwebサイトの作り方。

イマドキなコーディングって?最近のwebサイトの作り方。

月に一回は必ずWEBのことを書こう。

今日は8月32日。

 

作り方には流行りがあります。

 

流行りは作り手の好みのようなものではなく、ブラウザやデバイスが変わったり、新しいツールやサービスが出たりなど、世の中の出来事に左右される面が大きいです。

 

昨今よく見かける動きを多用したもの、そんな先進のサイトを作りたい場合などでは特に、従来のコーディングではちょっと難しい部分が出てくると思います。

従来式で作ったサイトも全然見れますし、役割は果たせます。

しかし、あらゆるデバイスで見ること、そしてより高度な表現をする際には、新しい技術を頼るのが◎。

もくじ
・html5
・css3
・cssのアニメーションで動かす
・WEBフォントを使う
・規模によってはSCSSを使う

 


html5

セマンティックなコーディングができるようになりました!というのは巷でもよく耳にしますが・・「セマンティック」と言われてもピンと来ない。。

 

例えば、headerやnavやfooter、sectionやarticleなど。それぞれのタグを見ればひとめで構造がわかる、意味を持つhtmlになりました。

それまでは、divやspanなど、意味を持たないタグにクラス名をつけてたんです。

 

html4はこんなでした

<div class="main">
    <div class="header">
        <h1>我輩のサイト</h1>
        <div class="navi">
            <ul>
                <li>メニューその1</li>
                <li>メニューその2</li>
                <li>メニューその3</li>
            </ul>
        </div>
    </div>
    <div class="content">
	<p>コンテンツだよ</p>
    </div>
    <div class="footer">
        <p class="copyright">© 2019 我輩のサイト</p>
    </div>
</div>

 

クラス名で書くなんて・・

書いた人にしかわからないじゃないか・・!

 

html5

<main class="main">
    <header class="header">
        <h1>我輩のサイト</h1>
        <nav class="navi">
            <ul>
                <li>メニューその1</li>
                <li>メニューその2</li>
                <li>メニューその3</li>
            </ul>
        </nav>
    </header>
    <sectioin class="content">
        <p>コンテンツだよ</p>
    </section>
    <footer>
        <p>© 2019 我輩のサイト</p>
    </footer>
</main>

 

人間にはもちろん、クローラーにもページの意味が伝わりやすくなった…!

 

これから新しく作るサイトでは、html5がマストです。

サイトを運営してみてわかった、作るときに考えたいSEOのこと。

 

構造以外の部分では、canvasというタグを使って、svgで線や絵を動かしたり色を変えたりなどができるようになった!激変したのはこの辺りでしょうか。

 


css3

横並びの「flexbox」と、時間を変化させる「transition」。

flexbox以前はfloatを使って右へ左へ並べていましたが、最後にクリアの命令を書かないといろんなところで回り込んでしまって複雑。。

横並びってよく使うので、flexboxを使うと楽です。

 

そしてtransitionは、ボタンのhoverや画像などのエフェクト、ふんわりと切り替えるようなところで使えます。

ふわっと表示させるcssシリーズ

 


cssのアニメーションで動かす

keyframesのアニメーションです。

css アニメーションで画像をプルプルさせてみる

これも従来はjsを使ってしか表現できなかった。

jsが増えることで、予期せぬコンフリクトが起きたり、読み込む順番が間違っていて動かなくなるなどの心配事も増えます。cssでできるようになったのは嬉しい!

 


WEBフォントを使う

紙のデザインと異なる点。WEBはフォントが限られています。

見ている人の環境にないフォントを指定しても、表示ができない・・。

代替フォントが当たります。

 

WEBではWindowsとMacというOSに標準搭載されたフォントを指定することが一般的・・。

でしたが、Webフォントができてからは、かっこいいフォントが使えるようになりました。

 

Googleさんや、Adobeさんが提供するCreative CloudのWebフォントサービス、モリサワさんなどのフォントを作る会社さんが提供しているWEBフォントのサービスは、cssで指定できちゃいます。

Google Fonts

 


規模によってはSCSSを使う

SCSSは、プログラミングの考え方を持っているcssです。

 

変数を定義して呼び出して利用することができるので、変更することになったときに一箇所を書き換えれば全部変更できるのが便利。

5箇所ぐらいしかないのなら手書きで変えますが、2000箇所もあったらどうでしょう。やってられないですよね。

よく使うもの(色とかmax-widthとか)をまとめたりします。

 

また、関数も使えるので、四則演算できたり、条件分岐、ループなどもできる・・。

もはやプログラミングです。

 

ブラウザはSCSSを読めません。

SASSを使ってcssを記述、まずSCSSファイルを作ります。

そのSCSSをコンパイルしてcssに変換。

WEBサーバーでコンパイルするか、Webpackっていうモジュールハンドラーを使ってコンパイルするか、Gulpのようなツールを使うなどする必要が。

使ってみようと思います。

 

他にも、プラグインを使わないでjavascriptを使って書いたりするのも流行り。

上述のSASSを動かす環境「Gulp」でもそうですが、jsさんは人気者だね。

 

IEさん、新しいjs動くようにしてください。

 


 

良いサイトとは、発信した情報を、届けたい人へ届けることができるサイトです。

「作って終わり」ではなく、サイトは成長していくものなのだなーと実感しています。

運用がしやすいこと。やりたいことがすぐにできること。

情報の整理も大事ですが、公開して時間が経ってからも、UIの改良を加えやすいことは大事。

 

煩雑なコードによって、ちょっとした改良ができない、機能を追加しづらいなど、サイトを改善しにくいような作りだったとしたら・・

もうサイト全体をリニューアルするしか方法がなくなってしまいますよね。

事あるごとに全部作り変えてたら、とめどなくお金がかかってしまいます。

 

インパクトはとっても大事。ですが、ものすごいかっこいいエフェクトや動きをつけたら、売り上げが増えるとか、お客さんが来るとか、幸せになれるとか、そんなに短絡的なものでもないです。

 

確実に言えることは、作業効率が上がれば当然工数は減り、コードが綺麗だと俄然やりたいことをやりやすい!ということでしょうか。

トライアンドエラーができるサイトの方が、前向きでいられます。

 

結論。従来型と比べるとイマドキの作り方の方が、作り手側にとっても、またクライアントさんにもユーザーにも。みんなに優しい作りなのかな、と思います。

 

share on

TIPS&NOTE TOPへ