BLOGスタッフブログ

インソースマーケティングデザイン

2016.03.08 コーディング

【準備編】これさえ覚えればOK!これからHTMLとかお勉強しようと考えているWEB担当者さんに送る、HTML&CSSの基礎知識

みなさま、こんにちは。

春になってきましたねー
私は花粉症がいつ来るのかドキドキする日々を送っておえります。
なんだか、花粉症って許容量を超えると発症するとかなんとか。。。

今回のブログは、「WEB担当だけどそもそもHTMLとかしらないよ」「ちょっとやってみたけど挫折しそう(した)」
そんな人に向けて書いていこうと思います。
実はこのブログを書いている私自身も、最初はHTMLなんて全く知らない超初心者でした。
パソコンのキーボードすら打てなかったんです。。。
だから、大丈夫です!この私でもできるようになったのですから!

一度にバババーっと覚えることは難しいと思うので、【準備編】【基礎編】【実践編】の3部構成でいこうと思います。
今回は【準備編】です。

それでは早速勉強していきましょう٩( ‘ω’ )و

【HTMLについて】

■ HTMLとは
HTML(HyperText Markup Language)
webページを作る言語の一つです。
皆さんが見ているこのページもHTMLでできています。
私なりに略すと、HyperなTextがマークアップできる言語ですかね。

■ 使用するタグ
HTMLはタグを使用します。
その文章が何を意味しているのかを表すため、タグは数種類あります。
たとえば、aタグはリンクを指定するときに使用する感じです。
最初に覚えておくといいのは
div、p、a、img
くらいですね。

【CSSについて】

■ CSSとは
Cascading Style Sheet(カスケーディングスタイルシート)
webページのスタイルを指定するための言語です。
例えば、文字色を赤にするとか、枠にボーダー線を引くとかですね。
HTMLを装飾するためのものと考えるといいでしょう。
またHTMLとCSSはセットで使うと覚えておきましょう。

ちなみにカスケードって「連鎖」みたいな意味なんですね。
へー。

■ 指定方法
例:p { color : red; }

CSS

装飾をかけたいセレクタに対して、プロパティと値を設定してあげます。
CSSのプロパティは本当にたくさんあるので徐々に覚えていくといいでしょう。
まあ、単語でなんとなーく意味はわかるとおもいます。

また、こちらのサイトではCSSのプロパティを擬人化して紹介しているみたいです。
文字で見るより絵で見た方がなんかいいですよね。
http://gcss.info/

【用意するもの】

■ ⒈ テキストエディタ
windowsでいうと「メモ帳」です。
macだとCotEditorとかですかね。
パソコンに標準ではいっているものでOKですよ。

■ ⒉ ブラウザ
webページを表示するためのソフトです。
今まさにこのページを見ているものがブラウザになります。
Internet Explorer(IE)、Safari、firefox、chrome などなど。

さてさて、お送りしてきた準備編、いかがでしたか?
次回は基礎編!HTMLやCSSをもっと掘り下げてお勉強していきましょう!

それではまた(◍•ᴗ•◍) /