![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
2021-06-29 中井
とりあえずhtmlとcssとbootstrapについて、wikiの内容を転記しておく
<meta charset="UTF-8">
日本語のサイトであれば必ず書く必要がある。
<title> そのページのタイトル </title>
検索結果やブラウザのタブに表示されるやつ
<link rel="stylesheet" href="CSSファイルのURL" /> <script src="JavaScriptファイルのURL"></script>
CSSファイルやJacaScriptファイルの読み込みをする。(後述)
要素の一塊を表す。色々意味がある。
段落を作る。
見出しを作る。
<img src="画像のURL" alt="代替テキスト" />
<a href="https://saruwakakun.com/">リンクボタン</a>
<ul> <li>1つめの項目</li> <li>2つめの項目</li> ・・・ </ul>
箇条書きを作る。ul・liで箇条書き、ol・liで番号付きになる。
<br>
改行する。上手い人はあまり使わないらしい。
<!-- 内容 -->
表を作る。
(例)
<table border="1">
<tr>
<th>果物</th><th>味</th>
</tr>
<tr>
<td>イチゴ</td><td>甘い</td>
</tr>
<tr>
<td>レモン</td><td>酸っぱい</td>
</tr>
</table>
| 果物 | 味 |
| イチゴ | 甘い |
| レモン | 酸っぱい |
※1行目はヘッダになっている。
コードにまとまりを作る。
タグに対して、補助的な意味を持たせる
<input type="text" id="mid" name="mid" />
CSS(Cascading Style Sheets)・・・「装飾」を記述
CSSの書き方は3通り
<link rel="stylesheet" href="ファイル名.css"> をheadタグ内に記述する。 ※thymeleafの場合、リンク先に注意
<タグ名 style="CSSをここに書く">
セレクタ {
プロパティ：値;
}
タグ名、#id名、.class名
○○,○○（複数指定）、○○ ○○（絞り込み指定、例:tableタグの中にあるinputタグ）
font-size: ◯◯px or ◯◯em
color: 色名(red, blue他) or カラーコード(#FFFFFF他)
background: 色名 or カラーコード
font-weight: bold font-weight: lighter
font-style: italic
テキストの装飾を指定する。
text-align: left or center or right
border: 種類 太さ 色
border-top, bottom, left, right:
width: ○○px or ○○% or auto height: ○○px or ○○% or auto
※heightを%指定するときは親要素の高さが指定されている必要がある。
※display:inlineの要素では指定できない（文字の長さや大きさで決まるため）
min-width、max-widthでwidthの最小値、最大値を指定できる。
margin: ○○px or ○○% padding; ○○px or ○○%
上下左右の余白をまとめて指定
margin: 上 右 下 左 padding: 上 右 下 左
上から時計回りになっている。
/* htmlの周囲の余白を作る */
body {
margin: 20px; /* 外側の余白を40pxにする */
padding: 0; /* 内側の余白を消す(念のため) */
}
/* h1(タイトル)のデザイン */
h1 {
padding: 0.5em; /*文字周りの余白*/
color: #494949; /*文字色*/
background: #e6f2f5; /*背景色*/
border-left: solid 5px #78bbc7; /*左線（実線 太さ 色）*/
}
/* h2, h3(見出し)のデザイン */
h2,
h3 {
margin: 20px;
color: #494949; /*文字色*/
background: #e6f2f5; /*背景色*/
border-bottom: solid 3px #78bbc7; /*下線*/
}
/* img(画像)のデザイン */
img {
margin: 20px;
}
/* form(ログイン時)のデザイン */
form {
width: 460px;
padding: 0.5em;
background: #e6f2f5; /*背景色*/
}
/* table(表)のデザイン、以下も同様 */
table {
border-collapse: collapse;
margin: 0 auto;
padding: 0;
width: 650px;
table-layout: fixed;
background: #e6f2f5; /*背景色*/
}
table tr {
background-color: #e6f2f5;
padding: 0.35em;
border-bottom: 2px solid #fff;
}
table th,
table td {
padding: 1em 10px 1em 1em;
border-right: 2px solid #fff;
}
table th {
font-size: 0.85em;
}
table thead tr {
background-color: #167f92;
color: #fff;
}
table tbody th {
background: #78bbc7;
color: #fff;
}
.txt {
text-align: left;
font-size: 0.85em;
}
/* a(リンク)のデザイン */
a {
font-weight: bold; /*太字に*/
text-decoration: none; /*下線消す*/
background: skyblue; /*背景を水色に*/
color: white; /*文字を白に*/
padding: 5px 10px; /*内側の余白*/
border-radius: 20px; /*角を丸くする*/
font-family: 'Avenir', 'Arial'; /*フォントをいい感じに*/
}
a:hover {
background: silver; /*背景色をシルバーに*/
text-decoration: none; /*下線を消す*/
} <!-- 手書きcss, <head>の中に以下のcssを入れる -->
<link rel="stylesheet" th:href=@{/css/todo_css.css} />
Bootstrapはレスポンシブデザインに対応したフロントエンドのフレームワークだよ。 シンプルな指示でグリッドシステムを使用できたり、本格的なフォームやボタンを作成できたりと非常に便利なんだ。
<!-- bootstrap, <head>の中に以下のcss,jsを入れる -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"
></script>
<table border="1" class="table">
<thead class="thead-dark">
<tr>
<th>#</th>
<th>タイトル</th>
<th>作成日時</th>
<th>コマンド</th>
</tr>
</thead>
<input type="submit" class="btn btn-primary" value="ログイン" />
