【pg何はじNo.3】HTML/CSS編〜Webページを作ろう〜

2019年1月31日 05:23

内容一覧
・はじめに
・Webページ（ホームページ）が作れる
・確認が簡単
・準備物
・エディタについて
・HelloWorld
・最後に

はじめに

特に断りがない場合、基本的にHTML5とCSS3を基準にしています。また、ここではできるだけ簡単に紹介することを目的としているため、プログラムのチュートリアル的なことは割愛しています。
チュートリアルに関しては今後の記事で書くかもしれません。
ご希望がありましたらコメント等ください。

他の選択肢って何が有るの？という方は下のnoteも御覧ください。

Webページ（ホームページ）が作れる

webページ作成の基礎はHTMLとCSSです。
HTMLとCSSは別のもので、HTMLが文章構造、CSSが見た目を指定するものです。
これらをセットで作ることにより、Webページが作られます。
これを学習したあと、JavaScriptを学習することによって、さらに充実したWebページが作成できます。
さらに上を目指す場合はPHPやRuby、Pythonなどの選択肢もあります。
また、料金がわかりにくいWebの中身を知ることで、適正価格なのかどうかをある程度判断することもできます。

確認が簡単

作ったHTMLファイルをブラウザで開けば、どう変化しているかの確認が簡単で、ブラウザの開発者ツールを使うことによって、どこがおかしいのかをいろいろ見てみることもできるので、初心者に適しています。

準備物

・「ブラウザがインストールされたPC」もしくは「タブレット」
・必須ではないがエディタもあると良い
これだけです。
エディタ（IDE含む）を使うと作成がとてもやりやすくなるので、ぜひインストールして始めましょう。

エディタについて

エディタには様々な機能がついていて、例えば自動補完機能であったり、カラーピッカーであったり、文字の色を変えて読みやすくしてくれたり...
コーディング（プログラムを作成すること）が捗ること間違いなしです。
おすすめのエディタをご紹介いたします。
<PC用>
・Brackets　無料
・DreamWeaver　月額（場合により変わる）
・Coda2　9800円(Macのみ)
・SublimeText 　USD $80
・Atom 　無料
<タブレット用>
・Coda 　3000円(iOSのみ)
私がプログラミングの授業で使っているのはBracketsです。
自分がコーディングする際に使用しているのはCodaとDreamWeaverです。
それぞれのエディタのメリットがありますし、プラグインで機能を追加することができるものもありますので、いろいろ検討してみてください。

Hello World

Hello Worldとは、その言語を初めて触るときにやってみる課題みたいなものです。慣習として、「Hello World!」と表示します。
HTMLでのHello Worldは以下になります。

<!DOCTYPE html>
<html>
    <head>
        <title>Hello World</title>
    </head>
    <body>
        <h1>Hello World!</h1>
    </body>
</html>

これをメモ帳などにコピペして、index.htmlとして保存（拡張子がhtmlになっていることを確認しましょう。表示する設定になっていない場合は変更しましょう。）
保存したindex.htmlをブラウザで開くと、画面にHello World!と表示されるはずです。
今回は内容については触れません。HTMLについて学習を始めて見たいと思ったら、まずはここから勉強しましょう。
(いずれ記事にするかもしれません。。)

最後に

ご質問・ご意見などあればコメント等くださればと思います😁
また、スキ（下の♡マーク）を押して頂けると励みになります😊

この記事が気に入ったらサポートをしてみませんか？