独学で始めるウェブサイト制作：基礎編

公開日：2020.12.06

何も今から始めなくてもいいって？

SNSとか投稿サイトとかあるし、何ならウェブサイトの制作がブラウザ上でできるサービスなんてのもある。ウェブ制作の仕事をする予定もないし、のんびりと創作活動をしてるだけだから今からウェブサイト制作について学ぶ必要もない。今回は、そんな声が聞こえてきそうなテーマです。

使っているSNSや投稿サイトは、いつ、サービス終了してしまうか分かりません。一方、自分で運営するウェブサイトは、自分で管理ができる限りずっと存在し続けます。高度なシステムは作れなくても、ひとつの確かな場所があるというのはなかなか良いものです。それっぽいことを言ってみましたが、私はどうしても外部サービスを活動拠点と認識することができず、自分で作った個人サイトを持ち続けるという選択をしただけ。持つ理由・持たない理由は人それぞれでいいんです。

今や、公的な手続きなんかもウェブサイト上でできてしまう時代。どんな立場の方も、目の前に見えているものがどんな風にできているか、少しくらい分かっていたほうがいいのかもしれません。ウェブの専門ではない人間だからこそ、誰にでも分かるように簡単に、構成や仕組みをまとめてみました。

ウェブページの構成とHTML

URLの最後についている「html」を見たことがある方は多いのではないでしょうか。HTMLは言ってしまえばただの文字情報ですが、画像が表示されたり、リンクが指定された文字や画像をクリックすると別のページに移動したりするのは、ブラウザのおかげ。一般的な文書と比べるとプログラミング言語のようにも見えますが、マークアップ言語というまた別のものです。

ウェブページの構成を大まかに説明すると、htmlという大きな箱の中にheadとbodyという箱が入っています。headの箱はページ上に見えない大切な要素を入れる、bodyの箱はページ上に見えるいろんな要素を入れるという感じの役割です。headに入れる情報はある程度限られていますが、bodyの中はページによってさまざま。divタグやpタグなど、箱の中に更に箱を入れていき、その箱の中に文字を入れます。「仕切りを使って上手にお片付け！」みたいな状態ですね。

HTMLやこの後で説明しているCSSは、テキストエディタで作成・保存できる文書です。ウェブ制作におけるプロフェッショナル向けのアプリケーションは『Dreamweaver』が有名ですが、私はフリーのテキストエディタでの制作に慣れてしまい、使いこなせませんでした。クリエイティブな分野なのに初期費用0円で済んで制作環境を選ばないものは、実はとっても少ない。ウェブサイト制作は意外と、敷居が低いんです。

修飾魔法CSS

CSSはHTMLの良き相棒です。HTMLあってこそのCSSですが、HTML内の要素を自在に操っているのはCSS。修飾魔法、なんて言っていますが、あながちウソでもありません。

ふたつのそれぞれの役割は、HTMLは「ここに○○があるよ」と存在を示す役、CSSは「それは△△だよ」と詳細を説明する役です。何の詳細もない場合、箱の大きさは中身の大きさ（量）によって変わり、背景色は透明（なし）になります。

また、今回は説明は割愛しますが、HTMLとCSSの役割を利用すると、レスポンシブ対応のウェブサイトが制作できます。幅の指定などHTMLでもできる修飾はありますが、これからウェブサイト制作を始めるなら、そういった指定はすべてCSSで行うことに慣れてしまったほうがいいでしょう。

CSSは英語で記述するもの。英語が特別に苦手でない限り、基本的なことはすんなり理解できると思います。英語と言っても中学生でも理解できる程度なので、身構えなくて大丈夫。

奥義JavaScript

JavaScriptはHTMLやCSSと違い、ウェブサイト制作に必須の要素ではありません。しかも、こちらはプログラミング言語。言うまでもなく、初心者には少しハードルが高いです。

しかし、世界にはたくさんのプログラマーがいて、素晴らしいプログラムをフリーで公開してくださっている方や、更にそれを分かりやすく解説してくださっている方がいらっしゃいます。お料理のレシピのように、人類の共有財産という感じですね。こういったもののおかげで、基本的なHTMLとCSSが理解できていれば実装は難しくありません。制作者に敬意を払いつつ、ありがたくお借りしましょう。

JavaScriptについて何も知らないも同然の私でも、「Swiper.js」というものをお借りすることでスライド（スライダー、スライドショー）を本館『まにまにスタジオ』に実装できました。ウェブサイトに動的な要素が必要ないのであれば、JavaScriptについて知らなくても問題ありません。しかし、スライドを使用すれば複数のページ（HTML）を用意しなくて済むなど、見た目以外の利点があるスクリプトも存在します。頭の片隅に留めておくと、いざというときにあなたを助けてくれるはずです。