HTMLとCSS入門

HTMLとCSSを用いて、ブラウザに文字を表示する

アジェンダ

目的

突貫工事でポートフォリオサイトがつくれるようになるための知識を身につけるため、HTML/CSSの文法よりも、つくりながら覚えていく方法をとる。なので、いきなり実践に近いやりかた(たとえばプロジェクトのためのフォルダのつくり方だったり)をやっていきます。

開発環境の確認

  • 開発環境とは、要はどんなテキストエディタを使ってHTMLを書いていくか、ということ。
  • テキストエディタ Atomを利用。

  • 確認用ブラウザ Google Chromeを利用(ない人は次回までにダウンロードしといてください)

  • そもそも、ブラウザとは何か。
  • Google ChromeSafariなど、インターネットを閲覧するためのソフト(アプリ)のこと。

HTMLとは

Hyper Text Markup Languageの略。 デジタルペイントがPhotoshopやSaiを用いて作られるように、普段PCやスマホで見ているWebサイトは、必ずHTMLで作られている。 普通に文字を書いたのでは、機械が「これは文字なのか、それとも機会に対する命令なのか」がわからないため、識別するために必ず<>ではじまって</>で終わる。例えば、文字を表示したいときは<p>こんにちは</p>みたいに書く。 必ず<>ではじまって</>で終わらないと、文字が表示されないなどの現象が起きる! <p>のpがどういう意味か、と言うのはのちほどやります。

まず文字を表示する

HTML最初の一歩

  1. Atomを開く
  2. New Window f:id:dorak:20160913101852p:plain

  3. <p>hello</p>と入力 f:id:dorak:20160913101937p:plain

  4. cmd+S(windowsではctrl+S)でファイル名を「index.html」で保存。場所はわかりやすい場所でOK。(例えばデスクトップなど) f:id:dorak:20160913102415p:plain

  5. 左にフォルダの中身が表示される f:id:dorak:20160913102441p:plain

  6. 副クリック(右クリック)でフォルダやファイルを追加可能

  7. Finderでプロジェクトフォルダを開く(保存した場所。上に書いたとおりで言うとデスクトップ)
  8. index.htmlをクリックする(もしくは副クリックして「chromeで開く」など)
  9. ブラウザでhelloが表示される

HTMLで開発をはじめる時の手順

まずはフォルダをつくる、フォルダを作ったらAtomで開く

HTMLでWebサイトをつくる際に必要なファイルはだいたい決まっています。 - htmlファイル - cssファイル - javascriptファイル - 画像 この4つ。

なので、あらかじめ上記ファイルの使用を想定したフォルダを作っておくことが作業の効率化をもたらします。

具体的な手順

  • プロジェクトの名前をつけたフォルダをつくる(例:myportfolioなど)
  • そのフォルダの中に, assetsという名前のフォルダをつくる
    • assetsとは「資産」という意味。html以外のファイルを入れるための箱。例えば画像やcssなど
  • assetsフォルダの中にcssフォルダとimagesフォルダをつくる前者はcssファイルを入れて、後者は画像を入れる箱。
  • ここまででこんな感じのファイル構成に。 f:id:dorak:20160913103147p:plain

  • Atomを開く

  • メニューのFile -> Open -> さっきつくったプロジェクトフォルダ(例: myportfolio)を選択
  • するとこの画面になる f:id:dorak:20160913103305p:plain
  • 左側を副クリックして、「new file」をクリックし、index.htmlを作ってみる f:id:dorak:20160913103859p:plain f:id:dorak:20160913103947p:plain f:id:dorak:20160913104002p:plain

  • hello

    と入力し、cmd + S で保存(windowsはctrl + S)。

  • フォルダに移動し、index.htmlをダブルクリックしてブラウザで確認。
  • 完了
  • 最終的なフォルダは以下の用になっているはず。 f:id:dorak:20160913104244p:plain

何故フォルダをつくるか。それは単純に「便利だから」。極論、なくてもHTMLでページは作っていけるけど、整頓されていないプロジェクトは絶対に破綻します。

練習

以下の構成のフォルダを作成して、ブラウザに「こんにちは」と表示してみましょう。 ファイルは副クリックでつくれます。

  • cssフォルダの中にはapp.cssというファイルをつくる
  • jsフォルダの中にはapp.jsというファイルをつくる

※ htmlファイルに<head><meta charset="utf-8"></head>と表記。ただし<p>の前

f:id:dorak:20160913104459p:plain

9/16宿題

広告を非表示にする