プログラミング初心者が最初に覚えるべき基本事項(テキストエディタ、HTML/ CSS、JavaScript自習)
過去に簡単な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ができるようになってから使う。
・「いいね!」ボタン。画面は変わらないが、1増える。
→JavaScriptでやっている。JavaScriptでは画面上での動作を受けて、
値を返したりできる。「いいね!」ボタンの場合、最終的には裏側で
DBに数を保存するが、その部分はRails等が必要。
・JSでできることを調べてみよう!
→dotインストールさんとかでよし。
・Jqueryは、JavaScriptを簡単に書ける方法
→でも最近は、フレームワークがあるのでさらに簡単にかける
・AjaxもJavaScriptの一種。GoogleMapsなどは、そのよい例で、
画面が遷移しなくても、地図をドラックすると、新しく画面上に
出てきた地図の部分だけを読み込んで表示している。
今日はこのへんで。
以上。