xx(エクスツー)

剛健質素なツールを目指して作ったHTML/CSS/PHP/Jsテンプレート集。

ご利用前に

はじめは100%理解しようと思わずに、まずコピペして動いたことを確認する事から始めてください。
次に、数値を動かしたりして「あーここ触ったらこう変わるんだ」って感じに理解を深めていきましょう。
なかなかフルスクラッチ(既存のものを一切流用せずにまったく新規に開発すること)で出来るものではないですが、どんな風に動いてるのかを見に行ってもらえたら嬉しいです。

初級編

とにかく「こんなソースコードを使ったらこう動くんだな」ということを、肌で掴んでもらうと同時に、どのようにHTMLやCSSを組んだらどんなレイアウトになるのかを体験してもらいます。もちろん普段の業務用テンプレートとして使ってもOKです。
初級編へ

中級編

初級ドリルがHTMLやCSSの導入編なら、中級ドリルは「考えて答えを導き出す」ことを目的としたもの。
したがって、絵を見て「こんな風に組んだらいいのでは？」と考えながらコーディングをしていくことが肝となります。
中級編へ

上級編

WEBサイトでよく使うパーツをどんな風に実装するのかを、Javascriptなども交えて解説していきます。
上級編へ

HTMLって？

ここは見出し(Hタグ)ですよ、リンク(Aタグ)ですよ、ここは画像(imgタグ)ですよ、といった具合に、文書上でのタグ記述により、どこに何があるのかマークアップする為の言語。
ハイパーテキストマークアップランゲージの略語(html)。
ファイル形式は[xxx.html]または[xxx.htm]でも認識します。メモ帳などのテキストエディタでも編集出来ます。

htmlは、どうやって生まれた？

マンハッタン計画(原子爆弾開発の計画)推進者として有名なヴァネヴァー・ブッシュ(1890～1974)は本や資料などの情報をマイクロフィルムに保存し、それを通信機能でいつでも素早く柔軟に引き出せるようにする情報検索システムMemex(メメックス)を発表しました。MemexはMEMory EXtenderの略語で、記憶拡張機という意味です。 ブッシュは論文「As We May Think」にて「全く新しい形の百科事典が出てくるだろう。項目同士が網の目のように関連付けられていて、memex に入れることによってさらに威力を発揮するだろう」と予言しています。 この考えに影響を受けたテッド・ネルソン(1937～)は後にハイパーテキストを考案し、静止衛星上に図書館を配置し、電話回線などからいつでも情報を引き出せるようにするXanadu(ザナドゥ)計画を立てました。
この構想が現代のHTMLの元となり、世界中のどこに居てもネット回線がつながっていればサーバー上から情報をいつでも引き出せるようになっています。

CSSって？

カスケーディングスタイルシートの略語で、WEBサイト上の書式(スタイルシート)を、1つの宣言だけが有効になる(カスケーディング)ようにしたものです。
すべてのhtmlファイルに「ここは太字にしなさい」「ここは行間を1.4文字ぶん開けなさい」と記述するのではなく「.cssファイルにまとめたものを読み込みなさい」と指示することでWEBサイト全体のレイアウトが統一化され、HTMLソースコードの冗長化を防ぐことができます。
ファイル形式は[xxx.css]または[xxx.css]でも認識します。メモ帳などのテキストエディタでも編集出来ます。

CSSは、どうやって生まれた？

1994年にWWW生誕の地であるCERNに勤務するホーコン・ウィウム・リーにより提唱され、WEBブラウザにCSS機能が実装されるようになりました。

CSSの使い方

セレクタ主に3種類＋＠

• 要素セレクタ:pタグやh2タグに対してなど、要素に対して指定するためのセレクタ。HTMLソースコードが散らからない。
• IDセレクタ：id="○○"といった具合に指定するセレクタ。アンカーリンクのジャンプ先に使ったりできる。原則、1つのページに1つしか使えないので要注意。
• Classセレクタ：Class="○○"といった具合に指定するセレクタ。こちらは1つのページに複数指定できる。また、1つの要素に対しても複数指定可能。

他にもこんなものが。

• 要素セレクタ
• IDセレクタ
• Classセレクタ

→ それぞれ、どういうものでどういう時に使えますか？
　　アウトプットできるようになっとこう！

セレクタを上手に使えるとどうなるか？

• 上手にグループ化出来、あとからコードを見たときにわかりやすい
• セマンティックにhtmlコードを組むことができSEO的に有利
• どういう意図で組んだページなのかわかりやすくなる
• 画像に頼らずに済む(リクエスト数を減らせる・高速化)
• htmlソースコードが複雑化・冗長化するのを防げる
• phpを触る場合は、非破壊編集ができる
• Class名などの干渉を防げる
• 再編集性を落とさずに住む

Javascriptって？

「履歴を戻る/進む」
「スクロールが一定数に達したら○○を実行する」
「アドレスバーの中身を所得し、その内容が○と一致していたら△を実行する」
といった具合に、ユーザーが普段使っているブラウザの動きに応じて動作するプログラム言語の一つです。
動きのあるアクションを実装する時にも使用され、スライドショー機能や画面のポップアップ、アコーディオンメニュー開閉などによく用いられます。
最近ではサーバーサイドのプログラム言語としての側面も強くなっています。

Javascriptは、どうやって生まれた？

JavascriptはEMCAという団体が作った「ブラウザを制御するための言語」です。元々はEMCAScriptと呼ばれていましたが、当時プログラム言語として有名だったのはJava(こちらはC言語が元になってます)だったので、JavaScriptという名前に変わりました。

ワーク用ファイル一式

ダウンロードはこちらから。
zipを展開すると、こんなファイルが入っています。

• index.html　→　このHTMLファイルを編集します。
• img/　→　必要に応じて、画像をダウンロードしてこのフォルダに入れていってください。
• css/style.css　→　このCSSファイルを編集します。
• js/script.js　→　このJSファイルを編集します。