このシリーズの記事では、『Webページの制作が自分できるようになる』というのを目標にHTMLやCSSを学んでいく記事になります。『HTML? CSS?? ナニソレ!?』って人でも大丈夫なように基礎から解説していくのでよかったら見ていってください。
HTML,CSSについて
最初にHTMLやCSSがどういうものかという部分の説明をしていきます。
HTMLというのは、webページを制作するために特化したプログラミング言語になります。一方でCSSというのは、HTMLで作られたページのデザインを整えていくための言語になります。これらに加えてJavaScriptやPHPを学ぶと動きのあるwebページ(ボタンを押すと動くなど)が作れるようになるわけです。
HTMLとCSSの2つを学ぶことで、webページを作成することができます。ただwebページを公開するためにはドメインやサーバーが必要になるので、自分で作ったwebページを公開する際にはレンタルサーバー代と独自ドメイン代がかかります(ドメインとセットでサーバーをレンタルできるサービスはたくさんあるので公開するときは探してみるといいでしょう)。
このHTML&CSS講座ではローカル環境で勉強することを前提とするので、とりあえず勉強するだけならお金はかかりません。お金に関しては勉強してから考えればいいでしょう(実際にwebデザイナーの人たちもローカル環境で開発を行っています)。
それにwebページの制作を依頼すると結構お金がかかるので、自分で作れるようになっておくことで費用が浮きます！それに制作を依頼しても後からwebページで変更したいところが出てきた場合に、自分で対処できないとさらに追加で費用がかかってしまい損をしてしまうことになります。
そうならないためにもwebページを自分で作れるようになりましょう！ちなみに早く上達したいなら作りたいものを想像しながら学ぶのが良いです。(思い浮かばない人もAmazonのようなサイトデザインがいいなとか、動画コンテンツを前面に出したサイトがいいなとかあれこれ考えながら自分の理想を見つけていきましょう)
作ってみたいwebページをイメージしておくと、勉強しながら『この文法を使えばこれが実現できるなー』とか考えることになるので、『この書き方をすればこう使える』みたいな知識が覚えられるからです。
とくに思い浮かばない人は、勉強しながら理想のwebページを考えてみると良いでしょう。
環境構築
環境構築と言ってもテキストエディタとブラウザがあれば大丈夫です。
プログラミングを勉強してるみなさんは普段使っているエディタを使用してもらえれば大丈夫です。
ただ注意して欲しいのは、wordのように表やらが挿入できるのはテキストエディタではないので違うものを選んでください。
参考までに自分が使っているエディタを記載しておくので、私と同じ環境を使って勉強したい方やよくわからない人は揃えておくことを推奨します。
エディタ
私が使っているエディタはAtomです。いろいろなパッケージを入れることで機能が拡張できるので自分が使いたいようにカスタマイズできるのが強みですね。
とにかく必要最低限の機能でいいという人にはgeditを勧めておきます。今回の講座においては、こちらを用いても特に不都合な部分はありません。『軽量is正義！ミニマリスト至上主義！！』みたいな人はこちらの方が合っているのかもしれません。
ブラウザ
これに関してはほとんどの人のPCに既に入っていると思うので、それを使ってもらえれば大丈夫でしょう。(私はFirefoxを使っています)
エディタで書いたHTMLやCSSを確認するのに使う程度なので本当になんでも大丈夫です。
サンプルコードで確認
一応、ローカル環境で次のコードが表示されるかを試してみましょう。
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>HTML, CSS講座</title>
</head>
<body>
<h1>ようこそ『HTML, CSS講座』へ</h1>
<p>これから数回に分けてHTML, CSSについて学んでいきます。</p>
</body>最初にエディタにこのサンプルコードを貼り付けます。保存する名前は拡張子を『.html』にしておいてもらえればなんでも大丈夫です。サンプルコードの名前がかぶらないようにしたい人はソースコードの右上にある『tc—-.html』となっている部分を名前にして保存しておくと良いでしょう。
保存場所に関しては本来はどこでも大丈夫なのですが、CSSと合わせて勉強することを考えると指定しておいた方が今後の解説が楽なので、htmlというフォルダを作ってその中に保存していくことにしてください。
エディタに貼り付けて保存するところまで完了したら、ブラウザを立ち上げておきます。ブラウザが立ち上がったら先ほど保存したHTMLファイルをブラウザにドラッグ&ドロップします。そうすると文字だけからなる簡素なwebページが表示されると思います。
確かめたい人はこちらのページと同じか確認してみてくださいね。>> 出力結果
無事表示された方は環境構築終了です。お疲れ様でした！
CSSとはHTMLで書かれた文書(ソースコード)のデザインを整えるために用いる言語のことを指す。
まとめ
今回の記事はHTMLとCSSというものについて何となく役割があるんだなというのを感じてもらえれば十分です。
次回からはHTMLとCSSの約束事や文法について学習していきます。楽しみにしていてくださいね！
最後まで記事を見ていただきありがとうございます。また別の記事でお会いできることを祈っております。
