物理学者(ポスドク)による日々の研究生活のメモ書きです ( python/emacs/html/Japascript/シェルスクリプト/TeX/Mac/C言語/Linux/git/tmux/R/ポケモンGO)
そもそもなんかの本を読んできちんと勉強したことないことがない気がするので、勉強し直しは間違いな気もする・・・
htmlとCSSのことを一から勉強するのにいろいろと教科書を当たってみて、
よくわかるHTML5+CSS3の教科書
という本が一番自分にはわかりやすかった
■ 参考 : よくわかるHTML5+CSS3の教科書【第2版】 | マイナビブックス
この本を読んで大事だと思うところを自分なりにまとめておきます
この本に載ってるhtmlサンプルはすべてウェブにアップロードされてて
URLは↑の公式ページから辿れる
■ html :
それぞれの部分がなんの役割かをタグを使って書いたテキストファイル
HTML5ではタグは約100種類ある、逆に100種類しかないとも言える
■ CSS:
タグで示した範囲の表示方法を指定できる、例えば文字色、背景色、文字サイズなどなど
使える機能は閲覧するWebブラウザによって異なる、サポートされてないと使えない
CSSのソースコードはhtmlに直書きすると汎用性が減るので独立させたほうがいい
なにか大きな修正を加えた痛い時に、CSSを置き換えるだけで済むから楽
■ タグ周りの名称
開始タグ、要素内容、終了タグ
終了タグは開始タグはに/を付ける
タグには属性を付与できる
id="hoge"
みたいに
以前別の記事にidとclassの違いをまとめた
■ 参考 : 【CSS】idとclassの違い
あとこのあと思い出したけど、classではなくてidを使わないといけない場合もある
↓に書いたみたいに、ページ内リンクを貼りたいとき
■ 参考 : 【html】ページ内リンク, 他のページのページ途中にリンクを貼る方法
属性を付ける順番は順不同
半角スペースで区切って並べる
■ コメントの書き方
htmlは
それ以上並べるとトラブルになりかねない
CSSのコメントはC言語と同じ
//
または
/* */
■ htmlのversionについて
HTML 4.01が1999年に完成/公開
Strict, Transitional, Framesetなどのいくつかの細かい種類がある
XHTML1.0が2000年に完成/公開
これも同じように3つの種類がある
HTML5 が今進行中(この本は2012年の本なのでその後はわからない)
この本ではHTML5について勉強できる
■ CSSのversionについて
CSSではversionではなくてレベルという表現を使う
基本的に古いレベルの仕様は今でも使える
レベルは
CSS1 => CSS2 => CSS2.1 => CSS3
の4つがある
まだCSS3の仕様は完全に決まっていないので
webブラウザによっては対応していない機能もある
「すべてのwebブラウザで同じように見えなくてもいい」という考え方がCSSでは大事らしい
最低でもCSS2.1で見えるように作っておいて、CSS3で対応しているwebブラウザで見た場合は
もっときれいに見えるようにしておけばいい
この考え方をプログレッシブ・エンハンスメントという
■ htmlの全体構造
htmlソースの一番上には宣言を書く
一番上のhtmlの宣言は仕様によって変わるが、html5ではこれでOK
html4.01とか各細かいversionによってここは変わる
宣言の後にhtmlタグを書く、すべての内容はこの中に入れる
headの中にwebページに関する情報を入れる
titleの内容はwebブラウザのタブに表示される
CSSファイルのURLやjavascriptファイルのURLもあるならここに書く
meta要素は終了タグはなくて、開始タグのみ
少し特殊
CSSファイルは複数読み込ませることもできる
bodyの中にwebページの本体を書く
■ style要素
CSSファイルを用意しなくてもhtmlに直書きすることもできる
■ グローバル属性
id : 要素に固有の名前をつけるときに使う
CSSでその要素だけの表示指定をする場合、ページ内リンクをする場合など
id属性はページ内の特定の場所を示すのに使うので1ページ1回のみ使う
class :
要素の種類を指定できる
なので、ページ内に複数回搭乗しても問題ない
同じ要素に複数のclass属性を付与することもできる
title : 要素に対して、補足的な説明を付け加える
マウスオーバーしたときに小さく表示される文章を指定できる
lang : 言語を指定する、jaとかenとか
■ CSSで色を指定する
background-colorというプロパティをCSSで指定すればいい
black, red, blueなどの名称が使える
transparentとか
■ 背景に画像を貼り付ける
これはやらんかな・・・
■ テキスト関連の要素
1. ブロックレベル要素
2. インライン要素
3. その他の要素に分けられる
■ ブロックレベル要素
h1~h6など、かたまりを指定する要素
hgroupで見出しをグループ化できる
p要素で、段落を表せる
blockquoteは引用文であることを示す
pre要素は整形済テキストであることを示す
ソースコードなどを示す場合に使う
div要素はこの中身がブロックレベル要素であることを示す
要するにこれで囲んで、その中身に一気に属性を付与するのによく使われる
これを使わなくても良い、専用のタグを使える場合はそちらを使う方がいい
■ インライン要素
br : 改行
em : 強調できる
strong : 強調できる、emとは少し違う
q : 引用文であることを示す、blockquoteとの違いは1行か複数行か
cite : 引用する場合に使う
code : ソースコードであることを示す
span : div要素の1行版
■ あまり使わないインライン要素
abbr : 略語であることを示す
dfn : 定義?
sup : 上付き文字
sub : 下付き文字、これらはどこかで使うことがあるかも・・・
i : イタリックで表示させたい時
b : 太字にする
mark : 注目してほしいときにこれを使う
長くなりすぎたのでここで分ける
ツイート
htmlとCSSのことを一から勉強するのにいろいろと教科書を当たってみて、
よくわかるHTML5+CSS3の教科書
という本が一番自分にはわかりやすかった
■ 参考 : よくわかるHTML5+CSS3の教科書【第2版】 | マイナビブックス
この本を読んで大事だと思うところを自分なりにまとめておきます
この本に載ってるhtmlサンプルはすべてウェブにアップロードされてて
URLは↑の公式ページから辿れる
■ html :
それぞれの部分がなんの役割かをタグを使って書いたテキストファイル
HTML5ではタグは約100種類ある、逆に100種類しかないとも言える
■ CSS:
タグで示した範囲の表示方法を指定できる、例えば文字色、背景色、文字サイズなどなど
使える機能は閲覧するWebブラウザによって異なる、サポートされてないと使えない
CSSのソースコードはhtmlに直書きすると汎用性が減るので独立させたほうがいい
なにか大きな修正を加えた痛い時に、CSSを置き換えるだけで済むから楽
■ タグ周りの名称
開始タグ、要素内容、終了タグ
終了タグは開始タグはに/を付ける
タグには属性を付与できる
id="hoge"
みたいに
以前別の記事にidとclassの違いをまとめた
■ 参考 : 【CSS】idとclassの違い
あとこのあと思い出したけど、classではなくてidを使わないといけない場合もある
↓に書いたみたいに、ページ内リンクを貼りたいとき
■ 参考 : 【html】ページ内リンク, 他のページのページ途中にリンクを貼る方法
属性を付ける順番は順不同
半角スペースで区切って並べる
■ コメントの書き方
htmlは
<!-- ここがコメント -->
ハイフンの数は2個それ以上並べるとトラブルになりかねない
CSSのコメントはC言語と同じ
//
または
/* */
■ htmlのversionについて
HTML 4.01が1999年に完成/公開
Strict, Transitional, Framesetなどのいくつかの細かい種類がある
XHTML1.0が2000年に完成/公開
これも同じように3つの種類がある
HTML5 が今進行中(この本は2012年の本なのでその後はわからない)
この本ではHTML5について勉強できる
■ CSSのversionについて
CSSではversionではなくてレベルという表現を使う
基本的に古いレベルの仕様は今でも使える
レベルは
CSS1 => CSS2 => CSS2.1 => CSS3
の4つがある
まだCSS3の仕様は完全に決まっていないので
webブラウザによっては対応していない機能もある
「すべてのwebブラウザで同じように見えなくてもいい」という考え方がCSSでは大事らしい
最低でもCSS2.1で見えるように作っておいて、CSS3で対応しているwebブラウザで見た場合は
もっときれいに見えるようにしておけばいい
この考え方をプログレッシブ・エンハンスメントという
■ htmlの全体構造
htmlソースの一番上には宣言を書く
<!DOCTYPE html>
<html>
<head>
<meta charset"utf=8">
<title>ここにタイトルを書く</title>
</head>
<body>
</body>
</html>
(htmlコードにhtmlコードを書くのくっそめんどくさいのに全部書くの!?!?!?!)<html>
<head>
<meta charset"utf=8">
<title>ここにタイトルを書く</title>
</head>
<body>
</body>
</html>
一番上のhtmlの宣言は仕様によって変わるが、html5ではこれでOK
html4.01とか各細かいversionによってここは変わる
宣言の後にhtmlタグを書く、すべての内容はこの中に入れる
headの中にwebページに関する情報を入れる
titleの内容はwebブラウザのタブに表示される
CSSファイルのURLやjavascriptファイルのURLもあるならここに書く
meta要素は終了タグはなくて、開始タグのみ
少し特殊
CSSファイルは複数読み込ませることもできる
<head>
<meta charset"utf=8">
<title>ここにタイトルを書く</title>
<link rel="stylesheet" type="text/css" href="style1.css">
<link rel="stylesheet" type="text/css" href="style2.css">
</head>
みたいな感じ<meta charset"utf=8">
<title>ここにタイトルを書く</title>
<link rel="stylesheet" type="text/css" href="style1.css">
<link rel="stylesheet" type="text/css" href="style2.css">
</head>
bodyの中にwebページの本体を書く
■ style要素
CSSファイルを用意しなくてもhtmlに直書きすることもできる
<head>
<meta charset"utf=8">
<title>ここにタイトルを書く</title>
<style>
h1 {color: white;}
</head>
あとはhtmlの各タグにstyle属性を付与することもできる<meta charset"utf=8">
<title>ここにタイトルを書く</title>
<style>
h1 {color: white;}
</head>
<h1 style="color: white;">
■ グローバル属性
id : 要素に固有の名前をつけるときに使う
CSSでその要素だけの表示指定をする場合、ページ内リンクをする場合など
id属性はページ内の特定の場所を示すのに使うので1ページ1回のみ使う
class :
要素の種類を指定できる
なので、ページ内に複数回搭乗しても問題ない
同じ要素に複数のclass属性を付与することもできる
title : 要素に対して、補足的な説明を付け加える
マウスオーバーしたときに小さく表示される文章を指定できる
lang : 言語を指定する、jaとかenとか
■ CSSで色を指定する
background-colorというプロパティをCSSで指定すればいい
black, red, blueなどの名称が使える
transparentとか
body{background: pink; }
とCSSファイルを用意するor styleタグの中に書けばOK■ 背景に画像を貼り付ける
これはやらんかな・・・
■ テキスト関連の要素
1. ブロックレベル要素
2. インライン要素
3. その他の要素に分けられる
■ ブロックレベル要素
h1~h6など、かたまりを指定する要素
hgroupで見出しをグループ化できる
p要素で、段落を表せる
blockquoteは引用文であることを示す
pre要素は整形済テキストであることを示す
ソースコードなどを示す場合に使う
div要素はこの中身がブロックレベル要素であることを示す
要するにこれで囲んで、その中身に一気に属性を付与するのによく使われる
これを使わなくても良い、専用のタグを使える場合はそちらを使う方がいい
■ インライン要素
br : 改行
em : 強調できる
strong : 強調できる、emとは少し違う
q : 引用文であることを示す、blockquoteとの違いは1行か複数行か
cite : 引用する場合に使う
code : ソースコードであることを示す
<pre><code>hogehoge</code></pre>
small : 小さい文字で表すときはこれを使う、著作権とか注意書きなどspan : div要素の1行版
■ あまり使わないインライン要素
abbr : 略語であることを示す
dfn : 定義?
sup : 上付き文字
sub : 下付き文字、これらはどこかで使うことがあるかも・・・
i : イタリックで表示させたい時
b : 太字にする
mark : 注目してほしいときにこれを使う
長くなりすぎたのでここで分ける
PR
この記事にコメントする
プロフィール
HN:coffee
職業:物理屋(自称)
趣味:映画鑑賞、登山
出身:大阪府の南の田舎
自己紹介:
import MyProfile
import coffee_pote from TWITTER
import amazonのほしい物リスト from WISH_LIST
print "先月子供が産まれました!"
# 最終更新 2022/10/25
職業:物理屋
趣味:映画鑑賞、登山
出身:大阪府の南の田舎
自己紹介:
import MyProfile
import coffee_pote from TWITTER
import amazonのほしい物リスト from WISH_LIST
print "先月子供が産まれました!"
# 最終更新 2022/10/25
カテゴリー
ブログ内検索
リンク
相互リンク募集中です
(Twitterにてお知らせください)
Demo scripts for gnuplot version 5 (gnuplotのさまざまなデモ画像と作り方がまとめられている、眺めているだけでできるようになった気分になれる)
gnuplotスクリプトの解説 (米澤進吾さんの個人ページ、gnuplotと言えばこのかた)
gnuplot のページ (Takeno Lab、うちのブログがリンクされていたのでリンク返し)
Twitterから映画の評価が分かる & 映画の鑑賞記録が残せる coco (映画の感想をまとめられるサイト、いつもお世話になっています)
Astronomy Picture of the Day Archive (天文や宇宙関連の最新の話題について画像とともにNASAが説明しているページ)
今日のほしぞら (任意の時刻の空で見える星を表示してくれる、国立天文台が管理している)
GNUPLOTとアニメーション (応用の項目の「見せてあげよう!ラピュタの雷を!!」あたりからすごすぎる)
読書メーター (読んだ本をリストできる便利なサイト)
flickr難民の写真置き場 (20XX年、flickrは有料化の炎に包まれた。あらゆるflickr無料ユーザーは絶滅したかに見えた。 しかし、tumblr移住民は死に絶えてはいなかった。)
教授でもできるMac OS X へのLaTeX, X11, gccのインストレーションと環境設定 (阪大の山中卓さんのwebページ、タイトルにセンスが溢れている、内容は超充実してる、特にTeX関連、学振DCとかPDの申請書類作成時にはお世話になっております)
英語論文執筆用の例文検索サービス (とんでもないものを見つけてしまった・・・・ arXivに収録されている 811,761報の 英語論文から,例文を検索するための検索エンジン)
Demo scripts for gnuplot version 5 (gnuplotのさまざまなデモ画像と作り方がまとめられている、眺めているだけでできるようになった気分になれる)
gnuplotスクリプトの解説 (米澤進吾さんの個人ページ、gnuplotと言えばこのかた)
gnuplot のページ (Takeno Lab、うちのブログがリンクされていたのでリンク返し)
Twitterから映画の評価が分かる & 映画の鑑賞記録が残せる coco (映画の感想をまとめられるサイト、いつもお世話になっています)
Astronomy Picture of the Day Archive (天文や宇宙関連の最新の話題について画像とともにNASAが説明しているページ)
今日のほしぞら (任意の時刻の空で見える星を表示してくれる、国立天文台が管理している)
GNUPLOTとアニメーション (応用の項目の「見せてあげよう!ラピュタの雷を!!」あたりからすごすぎる)
読書メーター (読んだ本をリストできる便利なサイト)
flickr難民の写真置き場 (20XX年、flickrは有料化の炎に包まれた。あらゆるflickr無料ユーザーは絶滅したかに見えた。 しかし、tumblr移住民は死に絶えてはいなかった。)
教授でもできるMac OS X へのLaTeX, X11, gccのインストレーションと環境設定 (阪大の山中卓さんのwebページ、タイトルにセンスが溢れている、内容は超充実してる、特にTeX関連、学振DCとかPDの申請書類作成時にはお世話になっております)
英語論文執筆用の例文検索サービス (とんでもないものを見つけてしまった・・・・ arXivに収録されている 811,761報の 英語論文から,例文を検索するための検索エンジン)
最新記事
(11/20)
(03/05)
(02/29)
(02/21)
(02/21)
(02/21)
(02/21)
(01/13)
(01/05)
(01/05)