ようこそ!逆襲のニートブログへ

ブログ内検索

最近の記事

はてなブックマーク数

この日記のはてなブックマーク数

カテゴリー

月別アーカイブ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ドットインストール学習日記 CSS編 #01 CSSとは何か?

ドットインストール学習日記 CSS編の第1回目。

今日は、「#01 CSSとは何か?」を勉強してみます。

今回の動画は、2分19秒。
http://dotinstall.com/lessons/basic_css/101

このレッスンで解説されている処理の概要は以下のとおりです。
・CSSとは何の略か。
・CSSの勉強に必要なものについて。





●テキスト
CSS(Cascading Style Sheet)の勉強

* 概要
HTMLと一緒になってWebページを作る言語
- HTML: 文書の構造や意味
- CSS: 見た目を規定

* 必要となる事前知識
- HTML

* 必要になるツール
- ブラウザ(Google Chrome)
- テキストエディタ




●このレッスンに関する補足情報
Google Chrome のインストールはこちらから。
http://www.google.co.jp/chrome/

大文字小文字をどう使い分けるべきか、字下げはどうすべきか、といったCSSのコーディング規約については以下のサイトでGoogleがまとめています。学習を終えた後にざっと眺めておくと良いかと思います。
http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml




●学習メモ
まずは、HTMLとCSSの役割について、押さえておくと。


● HTML
HTMLは知ってるし、使い方も分かるから大丈夫だな。

HTML - ウィキペディア - Wikipedia

HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)、略記・略称:HTML(エイチティーエムエル)とは、ウェブ上の文書を記述するためのマークアップ言語である。文章の中に記述することでさまざまな機能を記述設定することができる。
ウェブの基幹的役割を持つ技術の一つでHTMLでマークアップされたドキュメントはほかのドキュメントへのハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などの高度な表現力を持つ。
W3Cは、XMLベースの規格であるXHTMLの勧告も行っている。また2012年12月現在、HTML5も策定中である。



マークアップ言語 - Wikipedia

マークアップ言語(マークアップげんご、英: markup language)はコンピュータ言語の一種で、文章の構造(段落など)や見栄え(フォントサイズなど)に関する指定を文章とともにテキストファイルに記述するための言語である。文章に対するそれらの指定をマークアップ (markup) と呼び、マークアップを記述するための文字列をタグ (tag) と呼ぶ。
現代において最も有名なマークアップ言語は、World Wide Webの基盤技術の1つであるHTMLであろう。元々、"markup"という語は出版業界で著者、編集者、印刷者の間で指示を伝える方法を意味していた(語源を参照)。

語源
"markup"(マークアップ)という用語は、伝統的な出版の作業過程である原稿の "marking up" から派生した。"marking up" とは、原稿用紙の余白に印刷に関する指示の記号を書き加えることである。"markup men" や校正者と呼ばれる専門家が、文章の各部分にどんなスタイル、書体、サイズを適用すべきかなどを記して組版の担当者に原稿を渡すという作業が、何世紀にもわたって行われていた。



へー、マークアップって、元々印刷業界の用語だったんだね?
原稿に対して、いろいろな指示を付け加える作業 → 印刷(紙)からWeb(デジタル)に移行して、同じような作業をHTMLでやってるかんじ?

HTMLの使い方、リファレンスについては、まとめサイトがたくさんある。
(例) HTMLクイックリファレンス


● CSS
CSSとは 〔カスケーディングスタイルシート〕 【Cascading Style Sheets】 - 意味/解説/説明/定義 : IT用語辞典

05.8.31更新

シーエスエス
CSS 【 Cascading Style Sheets 】 カスケーディングスタイルシート

Webページのレイアウトを定義する規格。
これまで、WebページのレイアウトはHTMLを用いて記述され、HTMLにはレイアウトに関する仕様が大量に取り込まれたが、これは、文書の論理構造を記述するという本来のHTMLの目的に反するため、文書の視覚的構造を規定する枠組みとしてCSSが新たに策定された。
CSSを使うと、フォントや文字の大きさ、文字飾り、行間などの見栄えに関する情報を文書本体(及び文書の論理構造を記述したHTML)から切り離すことができ、ユーザが複数のレイアウトから適当なものを選択することができるようになる。
WWWに関する標準化団体W3Cで標準化されている。



・HTMLのタグからデザイン機能を分離して、タグの記述をスッキリさせた。
・HTMLのデザイン機能は、新たにCSSが分担することになった。
ということだね。


● ブラウザー
CSSの学習に際して、Chromeを用意してくれと。
→今使ってるのがChromeだから、問題なし!

これからChromeを導入する人がいたら、USBメモリで使えるChromeもあるからオススメです。
Google Chrome Portable - Portable Apps

自分の場合は、「Google Chrome Portable」をUSBメモリ上に置くのではなくて、RAMディスク上に置いて使ってます。
→PCが起動するたびに、RAMディスクが作られて、VBスクリプトで「Google Chrome Portable」をRAMディスクにコピーする仕組みにしてます。
→インストール作業を経ないで、コピーだけで動作するので、RAMディスク上に自動的に設置するには、「Google Chrome Portable」が最適でした。
→普通の「Google Chrome」だと、使い始める前に、インストール作業が発生してしまうため、コピーだけでは動かない。

RAMディスク上でChromeを使うと、多少速いような気がしますw


● テキストエディター
テキストエディターは、普段「Peggy」を使ってます。
高機能エディタ Peggyシリーズ紹介
Peggy - 窓の杜ライブラリ

プログラミングするときは、NetBeansを使ってるから、CSSコーディングは、NetBeans+Zen-Codingプラグインでもいいかな?

よくわかるHTML5+CSS3の教科書
大藤 幹
マイナビ
2012-07-28
2940円





関連記事

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバックURL:
http://gooddays1.blog37.fc2.com/tb.php/1005-cd092a85

FC2Ad

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。