【Webサイトの作り方】どんな方法がある？
これを書いている現在は2021年。
簡単にWebサイトを作りたい時の手段は、どんなものがあるでしょうか。
サイト構築用の言語を勉強したり、高額なアプリケーションを購入せずとも
今は、Web上で必要なシステムを組み合わせたり
コンテンツを作成するために、既に完成されたデザインテンプレートを導入するなど
本格的なサイトが作成出来るサービスが展開されています。
このように便利なサイト作成システムの事は
CMS(コンテンツ・マネージメント・システム)と呼ばれています。
WordPressも、サイトとしての体裁を整えられるシステムがありますね。
こちらのブログも、WordPressで作成しています。
しかし
という人はいませんか？
今は、サイトを見るデバイスの種類が多い時代で驚きます。
スマホもiPhoneを始め各種ブランド携帯、タブレットも併せると画面サイズも様々です。
PCの大きな画面よりも、スマホで見るユーザー層も多いですよね。
なので、CMSを使わず各デバイスの視点で表示出来るサイトを作るとなると、専門的な知識が必要になります。
レスポンシブ・デザインって何？
この、どのデバイスでもその画面サイズに応じて可変し、表示出来るデザインが
「レスポンシブ・デザイン」と呼ばれるものです。
これが少し難しいと思われる箇所なのですよね。
実際、私の経験値は
- XHTMLとCSSのPCメインのコーディングまでなら、業務でやった事がある。
- HTML5とCSS3以降で、レスポンシブ対応のコーディングに疎い
といった状態で
HTMLとCSSを使って、レスポンシブな自分のサイトを作ってみたいと思っていました。
そこで、アシスト的なテンプレートがあると助かりますよね。
そうです、私はCSSフレームワークを使って自分の作品掲出サイトを作りました。
正確に言うと、W3のCSSフレームワーク（下記リンク参照）を使用して構成し
細かい挙動は、面白そうなJavaScriptライブラリを別で探して実装してみました。
W3 CSS Templates
-
-
http://memopad.bitter.jp/w3c/w3css/w3css_templates.html
memopad.bitter.jp
W3がどのようなサイトかは追って後述しますが
このフレームワークを使用した私のサイトは、以下になります。
Unknown Dark Arts
-
-
Unknown Dark Arts
unknown-dark-arts.com
「ゼロベースで、トータルイメージが統一されているサイトのデザインをする」
という部分に拘るのであれば、オリジナルのレイアウト構成を考える事に、時間をかけた方が良いかと思います。
ただし
「メインは外装ではなく内容物で、そのためのサイトを作る」
というのであれば、CSSフレームワークを使って成形するのが近道ですね。
CSSフレームワークとは
Webサイトの制作をする上で、CSSフレームワークを使う位置付けとしては
「成形が比較的楽で、綺麗に出来る素材辞典みたいなもの」になるでしょう。
本来なら自分で指定するところを、最初から用意されているとしたらどうでしょう。
たとえば
- 見出しや本文の、文字の大きさ設定
- デバイスサイズ毎に、可変する画像ボックス
- 上下左右の、適度な余白の設定
これら以外にも色々ありますが、実装されている状態です。
画面ギリギリに文字や画像が配置される、なんて心配もありません。
何よりも、テキストや画像を入れてブラウザで表示すれば
すぐレイアウトや挙動が確認出来ますし、大変便利ですよね。
ソースをみて分析する事でも、かなり勉強になります。
私のCSSフレームワークの選び方
実際「CSSフレームワーク」で検索してみると、数多くありますね。
解説ブログも多く存在するので、興味のある方は読んでみて下さい。
Bootstrapというフレームワークは、あのtwitter社が開発したという事で有名なため
私もまず覗いてみましたが
-
-
Bootstrap · 世界で最も利用されているHTML、CSS、JSのライブラリです。
getbootstrap.jp
読み込んで理解するのに、あまり時間をかけたくないなあ
という懸念があったため
「今の知識で理解しやすいフレームワークを使う」
という点を優先しようと思いました。
まずは「自分のサイトをオープンする」事にしないと、いつまで経っても出来ないままになりそうだったからです。
そこで
- サイトとして形にして、サーバーにアップする事
- スマホ、タブレット、PCの画面できちんと反映される事
を最終目標としました。
以上の事から、初心者向けのCSSフレームワークでW3のサイトが見つかった時は、ありがたかったです。
W3 CSS Templates
-
-
http://memopad.bitter.jp/w3c/w3css/w3css_templates.html
理由としては「ハイブローな敷居の高さ」ではなく、まず分かりやすさに特化している点です。
ユーザーから求められているものを実直に実装している、ベーシックな作りにも見えます。
そんなところから
と判断して、実際使ってみる事にしたのが経緯になります。
W3のCSSフレームワークを使うメリット
W3のCSSフレームワークのメリットと思われる点をピックアップしました。
- サイトにCSSの使い方について丁寧な説明が記述されている
- CSSの種類は厳選されている
- 使いたい機能のCSSが引き出しやすい
- サンプルサイトが用意されていて、具体的な実装例が見られる
- サンプルサイトに厳選されたJavaScriptが記述されている
- サンプルサイトに最適化されたnormalizeなCSSが記述されている
- 商用使用可能で、カスタマイズもしやすく自由
- デバイス毎のデザイン可変が問題なく、ストレスフリー
- 無料である
以上の点がクリアされているというのは、とても助かりました。
最低限XHTMLとCSSが理解出来ていれば、導入への敷居が一気に下がります。
そのため、サイトは作りやすかったです。
まとめ
以上の点から
- HTMLとCSSを使ってコーディングをしたい
- あまり時間をかけず、最短でレスポンシブなサイトを作成したい
- しかし、レスポンシブデザインを作成するには、知識量が少ない
そんなお悩みは、W3のCSSフレームワークが一気に解決してくれるかもしれません。
今は、自分のサイトが形に出来て大変嬉しいです。