HTMLにCSSを読み込ませる方法
例：
<link rel="stylesheet" href="style.css" media="all">
HTMLの<head>～</head>内に記述することで、そのHTMLファイルに適用したいCSSが指定出来る。
<link rel="stylesheet" href="style.css" media="all">
<link rel="stylesheet" href="style2.css" media="all">
のように、追記すればよい。
・赤の部分は、スタイルシートにリンクします、という意味。
・緑の部分は、読み込みたいスタイルシートのファイル名を記述する。例ではstyle.cssというファイル名を指定している。
・青の部分は、そのスタイルをどんなメディアで利用するかが指定出来る。「screen」だとブラウザで表示するとき、「print」だと印刷時、「all」だとすべての場面に適応される。また、「media="print,screen"」のように、半角カンマで複数指定することも出来る。
CSSの基礎：背景、テキストなどの色や大きさの指定
＊背景の色を設定する
例：
①body{
②background-color:③#2096d5;
}
※①セレクタ、②プロパティ、③値
上記の構成。また、色の指定方法はredやgreenなどの名前で行う方法と、数値で表す方法がある。後者の方が、多くの色を指定出来る。
数値は左からR(赤)、G(緑)、B(青)の順に並んでおり、3色の組み合わせによって色が決まる。
＊テキストの大きさと色を設定する
例：
body{
background-color:#2096d5;
①font-size:②14px;
③color:④#666666;
}
※①文字の大きさのプロパティ、②そのサイズ、③文字色のプロパティ、④その色
＊その他のテキストスタイル
・①font-weight②文字の太さ③normal➃font-weight:bold➄太くする
・①font-style②文字のスタイル③normal➃font-style:italic➄斜体にする
・①text-decoration②文字の飾りの解除③none➃text-dedoration:none➄下線を取る
※①プロパティ、②意味、③デフォルトの値、➃使用例、➄➃の意味
CSSの基礎：セレクタ
＊タイプセレクタ
例：
body{
color:red;
}
h1{
color:blue;
}
p{
color:green;
}
このように、bodyやh1、pなど、HTML側の要素名そのものをセレクタとする。指定されたスタイルは、ページ内すべての同一要素に適応される。
＊classセレクタ
例：
・HTMLファイル
<p class="yamaman">登山が止められない。</p>
・CSSファイル
.yamaman{color:green;}
classセレクタは、HTML側に書いたclass名を利用したセレクタ。例(yamaman)のように、半角英数であれば、class名は自由に設定出来る。この自分で決めたclass名は、HTMLの開始タグ(今回の場合<p>)の中に、class属性値として記述する。
CSS側でclass名の前に「.」を付けたものが、classセレクタである。
また、class名は、頭に数字は付けられない。yamaman1はOKだが、1yamamanは×である。
＊idセレクタ
例：
・HTMLファイル
<h1 id="yamanosusume">cocona</h1>
・CSSファイル
#yamanosusume{color:white;}
idセレクタも、基本的にはclassセレクタと一緒である。違う点は、まず、記述方法として、id名の前に「♯」を付けるということ。次に、classセレクタと違い、同じid名は一度しか使ってはいけない、ということ。学校に例えると、「class＝〇組」、「id＝学籍番号」である。
「p.yamaman{color:green;}」
「hi♯yamanosusume{color:white;}」
のように、要素名を書くことも、省略することも出来る。自身が管理しやすい方でいいだろう、とのこと。
＊子孫セレクタ
例：
・HTMLファイル
<p><img src="img/aoi.jpg" alt=""></p>
・CSSファイル
p img{padding:0px;}
HTMLでは、ある要素の中に他の要素が含まれる場合がある。このように、半角スペースで区切ることで、〇〇要素の中の△△要素ていった記述も可能である。
例：
・HTMLファイル
<h3>先輩ってすごく大きいですよね！</h3>
<p>明日は日光白根山に登ります。</p>
・CSSファイル
h3,p{color:pink;}
半角カンマで繋ぐことで、複数の要素にスタイル指定することも出来る。
CSSの基礎
CSSとは、Cascading Style Sheets(カスケーディングスタイルシート)の略。HTMLが文章などの情報そのものが記述されているのに対し、CSSは背景色や配置など、見た目に関する様々な指定が出来る。
例：
/*①ここにコメントを書ける*/
②body{
③color:④black;
}
基本的な使い方
①コメント
/*と*/で囲まれた部分は、Webブラウザに認識されない。CSSを細かく記述する際や、後で読んだときにわかりやすくする為に、こうやってコメントを残しておくと編集がしやすい。
②セレクタ
まず、HTMLのどの部分を指定したいかを記述する。例の場合はbody全体になる。この後ろに｛｝を記述、｛｝の中にプロパティ、値を記述する。
③プロパティ
セレクタがHTML側の範囲を指定するのに対し、プロパティでは色(color)やフォントサイズ(font-size)など、より細かい部分まで指定出来る。英単語に近いものが多く、直感的にわかるようになっている。
④値
プロパティが「color」の場合、「black」や「red」、プロパティが「font-size」の場合「13px」や「17px」など、文字通り実際の値を指す。また、プロパティと値の区切りは「：(コロン)」続けて別のプロパティを記述する際は、値の後ろに「；(セミコロン)」を入力する。
HTMLの基礎2
表の作成に使うタグ
・<table>
tableタグで囲まれた部分は、それが表であることを表す。
・<td>
エクセルで言うところのセル。
・<th>
見出しのセル。
・<tr>
上記2つの<th>、<td>タグを<tr>で囲むことで、それらが1行の中に並んでいることを示す。
これらのタグは、前回書いたタグ同様</○○>で閉じる。
複雑な表を作成する場合、<td>、<th>に属性を加えることで表を連結出来る。横方向の連結はcolspan、縦方向の連結はrowspanを追加して指定する。属性値には連結したいセル数を記述する。
メール送信用のリンク作成
・<a href="mailto:〇〇〇>
この〇に送信先のアドレスを入力する。アドレスの前にmailtoを付けることで、mailソフトが起動される。
HTMLの基礎
前回の記事に書いたように、サーバに上げるHPを作る為、HTMLの基礎を学習しました。今までなんとなくでやってきてしまっていたので、基礎の基礎からまとめようと思います。
*基本的なタグ
・<html>
HTML文書の要素はすべて、HTMLの開始を示す<html>と、終了を示す</html>の間に挟む。
・<head>
ヘッダ情報エリア。タイトルや概要など、ページについての補足情報を記述する。また、CSSの読み込みなどもここに記述する。
・<body>
本文エリア。文章や画像などを記述する。
・<title>
ブラウザのタイトルバー(タブ)に表示される部分。お気に入りに登録する際などは、ここの名前がそのまま記録されるので、わかりやすく記述する必要がある。
*お約束について
・<DOCTYPE html>
HTMLのバージョンによって記述方法が異なり、上記はHTML5のものになる。これを記述することで、そのファイルがどのバージョンなのかをブラウザが判断する。
・<meta charset="●●●">
・<meta name="author" content="●●●”>
ページの作者。
・<meta name-"descriprion" content="●●●">
ページの概要文。
・<meta name="keywords" content="●●●,●●●">
ページに関するキーワード。複数入力する場合、半角カンマ「,」で繋ぐ。
これらを並べると、
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
</head>
<body>
</body>
</html>
という形になる。!DOCTYPEに関しては、大文字でも小文字でも構わない。
*見出しタグ
<h1>～<h6>
上記のように1～6のレベルがあり、数字が小さい程大見出し、大きいほど小見出し、ということになる。また、通常<h1>は1回、<h2～6>は何度でも使ってよい。記述方法としては、他のタグ同様<h1></h1>で囲む形になる。
*段落タグ
・<p>
<p>から</p>で囲まれた部分は、段落を表す。
*改行タグ
・<br>
<br>は今まで書いたタグとは違い、囲まなくても単体で機能する。
*箇条書きのタグ
・<li>
箇条書きにしたい項目を、ひとつひとつ<li>で囲む。
・<ul>
その上で、すべての項目を<ul>で囲むことによって、箇条書きと認識される。
*画像の埋め込みタグ
・<img src="●●●">
埋め込みたい画像がHTMLファイルと同じ階層にある場合、このように記述する。
・<img src="../●●●">
画像がHTMLファイルより1つ上の階層にある場合、「../」をファイル名の前に記述する。また、2つ上の場合は「../../」と追加していく。
・<img src="フォルダ名/●●●">
画像がHTMLファイルと同じ階層のフォルダ内の場合、ファイル名の前に「フォルダ名/」を記述する。
・<img src="../フォルダ名/●●●">
画像がHTMLファイルより1つ上の階層にあるフォルダ内の場合、「../」と「フォルダ名」を組み合わせ、このように記述する。また、2つ上の場合は「../../」と追加していく。
・<img src="●●●" alt="●●●">
閲覧環境的に画像が表示されない場合、このaltの後ろに入力された文字が表示される。
サーバ構成：iceを使ってLAMP環境を構成する
初めてのサーバ構成をしたいと知人に相談すると、Putty(パティ)の一種(？)であるice(アイス)を勧められた。今回その構成方法をメモする。
1.iceをダウンロード。
2.起動後、Host Name欄に自分のIPアドレスを入力、下の方にあるOpenボタンをクリック。
3.2を押すと、「PuTTY security Alert」という警告が出るので、「はい」を選択。
4.真っ黒な画面に「login as:」と出てくるので、自分の接続情報を入力。
5.下記三つを上から順番に実行していく。
$ sudo apt-get update
$sudo apt-get install tasksel
$sudo tasksel install lamp-server
6.完了したら、$ logoutで終了。
※下記予備知識メモ※
・これらはSSHクライアントと言い、SSH接続を使ってサーバなどに遠隔でログイン出来るツール。リモートのサーバには、基本的にSSH接続を使ってログインすると覚えてもらっていい、とのことでした。
・ちなみに、リモートとは、「ネットワークの向こう側にある」という意味。対義語はローカルで、こちらは「手元にある」の意。なんとなくは知ってたけど、初めて知りました。。
・LAMPサーバとは
L inux
A pache
M ySQL
P HP
この4つを使ったサーバのことをLAMPサーバと言う
・＄マークはコマンドですよって意味。これも初めて知りました。。。
※コマンドメモ※
・$ history：自身のコマンド履歴
・$ sudo rm -rf /：OSも含め全ファイル削除
・$ php -v
$ mysql --version：などでバージョンを確認したり出来る
今回タイプミスをしたんですが、コマンドやスペルのミスには注意を払おうということも言われました。実際に上記コマンドなどを教えてもらって、納得＆注意していこうと思いました。。
・最後に
apacheがインストールされ自動で起動したことにより、自動的にWebサーバが立ち上がりました。
なので、自動的にHPが出来ている。
http://※自身のIPアドレス※/
FileZillaで/ver/www/htmlというディレクトリを開いてみると、「index.html」というファイルがある。これが上記URLページの実態である。
つまり、このindex.htmlを書き換えることで、HPを編集することが出来る。
次はHPを編集してみます。
