プログラミングのメモ

プログラミングの学び直し備忘録

トップ > HTML/CSS > HTML/CSS

HTML/CSS

HTML/CSS

ひな形

<!doctype html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>Hello</title>
</head>

<body>
    <h1>Hello</h1>
    <p>HTML5</p>
</body>

</html>

< img >タグ 

<img src="ファイル名" width="横幅" hight="高さ">

< a >タグ 

<a href="リンク先アドレス" target="ターゲット名(_blank)" rel="noopener noreferrer">xxx </a>

テーブル　< table >(table row) < table >　< th >　< td >タグ 

<table border="1">
    <tr>
        <th>head1</th><th>head2</th>
    </tr>
    <tr>
        <td>r1 - d1</td><td>r1 - d2</td>
    </tr>
    <tr>
        <td>r2 - d1</td><td>r2 - d2</td>
    </tr>
</table>

head1head2
r1 - d1r1 - d2
r2 - d1r2 - d2

CSS

色 color

<!doctype html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>Hello</title>
</head>

<body  style="background-color:#ffeeee;">
    <h1 style="color:red">Hello</h1>
    <p style="color:blue">HTML5</p>
</body>

</html>

Hello

HTML5

styleタグ

    <head>
        <meta charset="utf-8">
        <title>Hello</title>
    </head>

    <style>
        body {  background-color:#ffeeee; }
        h1 {  color:#red; }
        p {  color:#blue; }
    </style>

CSSファイル

body{
    background-color:#ffeeee; 
}

h1{
    color:white;
    background-color:red; 
}

p{
    color:blue;
    background-color:white; 
}
#id1 {
    color : white;
    background-color:green;
}

<!doctype html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>Hello</title>
    <link rel="stylesheet" href="hello.css">
</head>

<body>
    <h1>Hello</h1>
    <p>HTML5</p>
    <p id="id1 ">HTML5</p>
    <p>HTML5</p>
</body>

</html>

p { color:blue; }

id1 {

color : white;
background-color:green;

}

TTT