| HTML | CSS |
|
・Hyper Text Markup Languageの略 ・ホームページのパーツを作る言語 ・（比較的）簡単 ・シンプルなホームページを作れる |
・Cascading Style Sheetの略 ・ホームページを飾る言語 ・（比較的）難しい ・かっこいいホームページを作れる |
<html lang="ja">
<head>
<meta http-equiv="content-type" charset="UTF-8">
<style type="text/css">
body {
background: lightgreen;
}
</style>
</head>
<body>
<font size="6">このページの背景の色はライトグリーンです。</font>
</body>
</html>
|
<html lang="ja">
<head>
<meta http-equiv="content-type" charset="UTF-8">
<style type="text/css">
a:visited {
color: #ff0000;
background-color: #afeeee;
}
a:hover {
color: #007fff;
background-color: #ff0fff;
}
</style>
</head>
<body>
<a href="http://chibahakkyo.net/index2.htm" >千葉ハッキョのHPに移動します。</a><br>
</body>
</html>
|
| 背景色を変える |
<style type="text/css"> body { background: 色のスペルやコード; } </style> |
| 背景色をグラデーション表示する |
<style type="text/css"> body { background: linear-gradient(方向, 色①, 色②); } </style> ※「方向」にはグラデーションさせる向きのスペルを入力してください to bottom：上から下 to top：下から上 to right：左から右 to left：右から左 ※「色①」「色②」には表示したい色のスペルやコードを入力してください |
| クリックする前のリンクの色を変える |
<style type="text/css"> a:link { color: 色①; background-color: 色②; } </style> ※「色①」にはリンクの文字の色のスペルやコードを入力してください ※「色②」にはリンクの背景の色のスペルやコードを入力してください |
| クリック済みのリンクの色を変える |
<style type="text/css"> a:visited { color: 色①; background-color: 色②; } </style> ※「色①」にはリンクの文字の色のスペルやコードを入力してください ※「色②」にはリンクの背景の色のスペルやコードを入力してください |
| マウスカーソルを乗せた時のリンクの色を変える |
<style type="text/css"> a:hover { color: 色①; background-color: 色②; } </style> ※「色①」にはリンクの文字の色のスペルやコードを入力してください ※「色②」にはリンクの背景の色のスペルやコードを入力してください |
| 文字を大きくする | <font size="6">文字の大きさ</font> | ||||
| 文字の色を変える |
<font color="red">文字の色</font> ※色のスペル一覧 red blue green yellow pink purple brown black white ……等々 |
||||
| 画像を貼りつける |
<img src="gazou.jpg">
※横幅を変更したい場合 <img src="gazou.jpg" width="100"> ※高さを変更したい場合 <img src="gazou.jpg" height="100"> |
||||
| リンクを貼りつける | <a href="lesson.html">リンク</a> | ||||
| 文字を中央に寄せる | <center>中央寄せ</center> | ||||
| 改行する |
改行 <br> 改行 |
||||
| 表を作成する |
<table border="1"> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table> 例
|
||||
| セルを結合する （水平方向） |
<table border="1"> <tr> <td colspan="2">1</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table> 例
|
||||
| セルを結合する （垂直方向） |
<table border="1"> <tr> <td rowspan="2">1</td> <td>2</td> </tr> <tr> <td>4</td> </tr> </table> 例
|
||||
<html lang="ja"> <head> <meta http-equiv="content-type" charset="UTF-8"> <style type="text/css"> </style> </head> <body> <br> <br> <br> <br> <center> <button type="button" onclick="location.href='../lesson/2022/3/lesson.html'" style="width:80%;height:60px;font-size:40px;">前のページに戻る</button> </center> <br> <br> <br> <br> </body> </html> |