WEBデザイン

HTMLとCSS

CSSHTMLと記事の画像

HTMLとは

HTMLとはHyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の頭文字をとった略称です。ウェブページを作成するために開発されたマークアップ言語です。一言でいうと「ウェブサイトを記述する言語」

こんなのです ↓ ↓

HTMLコード

CSSとは

 

CSSとは、Cascading Style Sheets(カスケーディング・スタイル・シート)の略称です。一言でいうと「HTML 文書を装飾したりデザインするもの」例えば文字のサイズ、余白、色、画像の配置方法などのデザインに関しては、CSSを使って設定を行います。

こんなのです ↓ ↓

 

始めは、「ん・・・?えーとなんて読むの?」という感じでしたが、要は、HTMLで文章を書き、CSSで色・大きさを変更したり装飾する。HTMLとCSSの画面を左右に並べて記述していく感じです。

Udemyで一緒にコードを書いていくと「ほうほう。こういう風にできてるのか」と釘付けでした。
しかし、英字打ちに慣れていない私はミス入力も多く、ペースも遅い。中々進まない自分にイライラしました。そこでテキストエディタの「Atom」を使用し補完機能をインストールしました。
もっと早く知っておきたかったです。
例えばfoと打つだけで<footer></footer>と自動補完してくれたり。きっと早く打てる人はこの機能いらないのだろうけど、私には絶対必要!ほかのテキストエディタにもついているそうですが、なんせ知識のない私は、テキストエディタとは・・・?からでした。

テキストエディタとは

一言でいうと「テキストファイルを編集するソフトのこと」
元々入っているメモ帳にもHTMLとCSSを記述できますが、機能が少ないことからテキストエディタを使う方が一般的です。メモ帳と違う点として、色を付けることができたり、使いやすいようにカスタマイズすることができることです。

種類は

・Visual Studio Code
Sublime Text
Atom
サクラエディタ

など他にもたくさんありますが、私はAtomを使用しています。
それから真面目な私(?)はタグと使い方を覚えなきゃと必死でしたが、無理して暗記しなくて大丈夫でした。っていうか暗記は無理です~。そういうものなんだと、素直に真似して入力していくほうがいいと思います。初心者が使うタグはだいたい決まってくるし、繰り返しで自然と覚える。あと細かいことはその都度本などで調べればできる!
そう思ったらさくさく進むようになりました!

-WEBデザイン

© 2020 カフェラテ備忘録Blog Powered by AFFINGER5