スーパー初心者が超基本のHTMLとCSSだけでそれっぽいWebサイトを作ってみる。（学習3日目レベル）

CodeCampのデザインマスターコースでHTML/CSSの学習をしている藤本です。

Webサイトを作る上でHTML,CSS,JavaScriptは欠かせなくて、この３つを覚えないと立派なフロントエンド（私たちが普段見えているWebサイトの表の部分）は成り立ちませんよ〜なんて話もあるのですが、私はHTML、CSSだけ習得したほやほや状態なのでなんとかこの２つだけでWebサイトを作りたい。

もちろん動きがあったほうが素敵なのでJavaScriptは覚えていきますが、まず最初に勉強するHTMLとCSSでどんなものが作れるのかご紹介します。

そもそもHTMLとCSSって何？

HTML：Webサイトの骨組み。

CSS：文字に色をつけたり、表示を整えたり見え方を綺麗にしてくれる。

ざっくりこの共通認識だけ持って先にすすみましょう。

CodeCampのデザインマスターコース、Webマスターコース、RubyマスターコースではHTMLとCSSを一番最初に学習します。（※プレミアムコース、プレミアムプラスでも学習可能です）

いわばプログラミング初心者の登る山の一歩目です。

いきなりサーバサイド言語に入る！というのはハードル高め。

まずは一歩一歩HTML、CSSの基礎から学んでいきます。

ここまでで私が学んだのは主に基礎の以下の項目です。覚えるのに3日ほどでした。

・HTMLの基礎の書き方

・文字の書き方/配置の仕方/色の変え方/太字の仕方（めちゃくちゃ簡単）

・ボックスの作り方/枠の線の付け方

・背景の色の変え方/HTMLのカラーについて（たくさん色があって楽しい）

この辺の超絶基礎を押さえるとどんなものが作れるのでしょうか。

超基礎のHTMLとCSSでどんなことができるの？

Webサイトの骨組みを作り綺麗に整える！ということはできるのでシンプルイズベスト！なサイトであれば作れました。どれくらいシンプルかというと

素材の味が生きている・・・サラダはメインディッシュになる、おいしく食べるキュー●ーハー●（企業としての自主規制）くらいシンプルです。

実際に学んだことで作ってみたのがこちら。

架空の告知サイトを作ってみました。

ね、シンプルでしょ・・・。マヨネーズかけたくなりますでしょ。ついでにハムも乗せたくなるでしょ。

ただこのサイト、結構簡単に作れるんです。

そしてCodeCampのカリキュラムの最初の方の学習内容でこのくらいなら作れちゃいます。

実際CodeCampのHTMLとCSSの単元では上記のサイトに似たような課題を作っていきます。

告知だけのシンプルなものでいい！という場合であればHTML、CSSでもそれっぽいサイトを作ることができました！

HTMLで画像も貼れるので、画像も貼り付けるともっと「それっぽくなります」サラダに生ハム乗せちゃいました！みたいな華やかさになります。

さらにメルマガも書ける。

HTMLとCSSでメルマガも書けます。

弊社ではセンドグリッドというメール配信サービスを使っているのですが、メールを書く際に「HTML,CSSを自分で打つ」というモードがあります。

メールだと文章を書く！綺麗に整える！という作業ができればいいのでJavaScriptは特段必要ありません。

ですのでHTMLとCSSが使えればおしゃれなメルマガを作れるようになります・・・！

私もメルマガ配信しているのでHTML,CSSモードに挑戦してみたいなと思っています。

結論：HTML、CSSの超基礎知識だけでもWebサイトは作れる。

ただシンプルなものよりかっこいいものが作りたい。

サラダじゃなくて１品で主役になれるようなタコライスみたいなサイトが作りたい！という場合はもっとスキルを上げていくことが大事ですね。（最後までサラダの話したな）

次回！少し高度なHTML、CSSの知識を学ぶとどんな美味しいサラダ・・・じゃなかったWebサイトが作れるのかをご紹介します！