鶏口牛後な日々

心の赴くまま、やりたいことを仕事に。

プログラミング初心者が最初に覚えるべき基本事項(テキストエディタ、HTML/ CSS、JavaScript自習)

今日は、HTMLとCSSだ。

過去に簡単なHTMLの更新作業をしたことがあるが、

自分で作ろうとしてみたときは、CSSがややこしくて躓いてしまった。

細かいところは一旦置いて、概要をつかんだ後実践を通して身に付けていこう。

 

■Sublime3のShort Cut

・Ctrl+` コンソール開く

・Ctrl+Shift+P パッケージコントロール起動

・Ctrl+→ ちょっとずつ飛ばしてカーソルを移動させる

・Ctrl+H 置換

・Ctrl+F 検索

・Cntrl+/でコメントアウト

 

■HTMLのポイント

・「ブロック定義である。」

SublimeでSnipettsを入れていれば、基本となるタグのテンプレートを自動で挿入してくれる

 ("<html”と打って、Enterを押すだけ。)

・h1~h4はHTMLがもともと用意していくれるもの→書いてみよう!

 

CSSのポイント

・スタイルを決める定義

・各HTMLは、CSSファイルと紐づける

<link href="index.css" rel="stylesheet" type="text/css">という

タグをheadタグの一番下に記述すると紐付けが完了。

・HTMLの要素1つ1つに対して、スタイルの指定ができる

cssは、classを作ることでスタイルを指定できる

・classはいくつでも同じものを指定できる

・floatで段組み。width、heightは、px表示か%で【必ず】指定。

→指定するように癖づけておかないと、描画がうまくいかないとき

の見直しに時間がかかる

・divは、class指定(スタイル指定)を区別したいときにしか意味がない

→つまりスタイル指定のためのブロック作りのためのタグ

・classは、CSSファイルにて、.left{float: left;}のように指定。

・fontの指定は、font-family: でいろいろ見ながらできる

Chromeの画面上で、「要素を検証」すると、画面をリアルタイムで

確認しながらstyleを作っていくことができる

・table(このあたりが一番難しい)

<th>、<tr>(行)、<td>データ

 

→このあたりまでくれば、HTML&CSSの基本はOK。あとは実践!

 さっきの作ってみたものに、いろいろCSSを追加してみた。

 

 

 

■HP、ぽく見せるコツ

・半透明

 

■追加学習 ※dotインストールさん

・CSS3アニメーション

・ボタン作って、押すとURLに飛ぶ。

 

→dotインストールは基礎固めに効率的。隙間時間にみること。

 

■次のステップ

<HTML>

  ・Lollipop等に挙げてみる。

→500円くらいで借りられる。自分のHPを作ってあげてみよう。

 

・HTMLに時間かけるのはやめよう、というツール

.hamlや、,html.slimなど。(簡単に書ける記述方法)

→これは、HTMLができるようになってから使う。

 

<Javascript>

・「いいね!」ボタン。画面は変わらないが、1増える。

JavaScriptでやっている。JavaScriptでは画面上での動作を受けて、

値を返したりできる。「いいね!」ボタンの場合、最終的には裏側で

DBに数を保存するが、その部分はRails等が必要。

 

・JSでできることを調べてみよう!

→dotインストールさんとかでよし。

 

Jqueryは、JavaScriptを簡単に書ける方法

→でも最近は、フレームワークがあるのでさらに簡単にかける

 

AjaxJavaScriptの一種。GoogleMapsなどは、そのよい例で、

画面が遷移しなくても、地図をドラックすると、新しく画面上に

出てきた地図の部分だけを読み込んで表示している。

 

今日はこのへんで。

 

以上。