![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
#author("2021-06-29T10:48:13+00:00","","") #author("2021-06-30T00:16:08+00:00","","") [[第3回]] 2021-06-29 中井~ とりあえずhtmlとcssとbootstrapについて、wikiの内容を転記しておく とりあえずhtmlとcssとbootstrapについて、wikiの内容を参考に記述 * html [#m30fc957] - HTML(HyperText Markup Language)・・・「構造」を記述 - こういった.htmlファイルを前回作成した~ &attachref(html01.jpg,,70%); -- 正確にはThymeleafを使っているため「テンプレートファイル」という -- Thymeleafでは、htmlファイルをテンプレートとして使える **基本的な内容 [#hb18d848] -ファイルの拡張子は&color(#c7254e,#f9f2f4){.html}; -1行目には必ず&color(#c7254e,#f9f2f4){<!DOCTYPE html>};を記述 -HTMLは大きく&color(#f89174){head};と&color(#5b8ceb){body};の二つの部分に分けられる **head [#kcdc9678] -<head>...</head>ではさまれた部分。''訪問者に直接は見えない''タグを入れる -文字のエンコード <meta charset="UTF-8"> ~日本語のサイトであれば必ず書く必要がある。 -タイトルタグ <title> そのページのタイトル </title> ~検索結果やブラウザのタブに表示されるやつ -外部ファイルの読み込み <link rel="stylesheet" href="CSSファイルのURL" /> <script src="JavaScriptファイルのURL"></script> ~CSSファイルやJacaScriptファイルの読み込みをする。(後述) - ...など **body [#z94ad94f] -<body>...</body>ではさまれた部分。''訪問者に見える部分''がここに書かれる *** タグ [#a62c4695] 要素の一塊を表す。色々意味がある。 -pタグ ~段落を作る。 -h1～h6タグ ~見出しを作る。 -imgタグ <img src="画像のURL" alt="代替テキスト" /> -aタグ <a href="https://saruwakakun.com/">リンクボタン</a> -ul・ol・liタグ <ul> <li>1つめの項目</li> <li>2つめの項目</li> ・・・ </ul> ~箇条書きを作る。ul・liで箇条書き、ol・liで番号付きになる。 -brタグ <br> ~改行する。上手い人はあまり使わないらしい。 -コメントアウト <!-- 内容 --> -tableタグ ~表を作る。 --tr：Table Rowの略。行全体をはさむ。 --th：Table Headerの略。trの中で使う。はさまれた部分は見出しセルとなる。 --td：Table Dataの略。trの中で使う。はさまれた部分が表の中身のセルとなる。 ~(例) <table border="1"> <tr> <th>果物</th><th>味</th> </tr> <tr> <td>イチゴ</td><td>甘い</td> </tr> <tr> <td>レモン</td><td>酸っぱい</td> </tr> </table> |CENTER:果物|CENTER:味| |イチゴ|甘い| |レモン|酸っぱい| ~&color(red){※};1行目はヘッダになっている。 -div・spanタグ ~コードにまとまりを作る。 --div・・・&color(#c7254e,#f9f2f4){ブロック要素};（前後に改行が入る） --span・・・&color(#c7254e,#f9f2f4){インライン要素};（前後に改行が入らない） *** 属性(プロパティ) [#x2c33894] タグに対して、補助的な意味を持たせる - class: 要素の分類用 - id: 固有の設定、要素の識別用 - href: リンク先のURLを指す - htmlの例 <input type="text" id="mid" name="mid" /> -- input(タグ): 入力する部分を意味する -- type(属性): 入力形式を意味する。今回はtext形式 -- id(属性): 固有の識別を意味する。これはmidです、と表している。 -- name(属性): あんまり意味ない * CSS [#ee9f4802] CSS(Cascading Style Sheets)・・・「装飾」を記述 **基本的な内容 [#u51da10c] ~CSSの書き方は3通り -1.CSSファイルを作って読み込み（大体これ） --CSSファイルを別に作り、HTMLファイルから読み込む <link rel="stylesheet" href="ファイル名.css"> をheadタグ内に記述する。 ※thymeleafの場合、リンク先に注意 -2.HTMLファイルにstyleタグを作って書く --headタグ内に<style>...</style>を書き、その中にCSSを書く -3.HTMLタグの中に書き込む <タグ名 style="CSSをここに書く"> &br; ** CSSの基本文法 [#ja5ffc93] セレクタ { プロパティ：値; } -セレクタ ~タグ名、#id名、.class名 ~○○,○○（複数指定）、○○ ○○（絞り込み指定、例:tableタグの中にあるinputタグ） **使われるプロパティの例 [#t436312c] ***文字・色 [#q124733c] -文字の大きさ font-size: ◯◯px or ◯◯em --px：縦のピクセルの大きさで指定 --em：現在のフォントサイズに対する倍率 -文字の色 color: 色名(red, blue他) or カラーコード(#FFFFFF他) -背景色 background: 色名 or カラーコード -文字の太さ font-weight: bold font-weight: lighter -斜体 font-style: italic -text-decoration ~テキストの装飾を指定する。 --underline：下線を引く --overline：上線を引く --line-through：取り消し線を引く ***配置・図形 [#x7c132f6] -文字を左/中央/右に寄せる text-align: left or center or right -線で囲む border: 種類 太さ 色 --線の種類 ---solid・・・実線 ---dotted・・・点線 ---dashed・・・破線 ---double・・・二重線 --上下左右個別に線をひく border-top, bottom, left, right: -要素の幅と高さ width: ○○px or ○○% or auto height: ○○px or ○○% or auto ~&color(red){※};heightを%指定するときは親要素の高さが指定されている必要がある。 ~&color(red){※};display:inlineの要素では指定できない（文字の長さや大きさで決まるため） ~min-width、max-widthでwidthの最小値、最大値を指定できる。 -余白の指定 margin: ○○px or ○○% padding; ○○px or ○○% --margin・・・borderの外側の余白 --padding・・・borderの内側の余白 ~上下左右の余白をまとめて指定 margin: 上 右 下 左 padding: 上 右 下 左 ~上から時計回りになっている。 * 実際にCSSを書いてみる [#i67a8286] + src\main\resources\static に css というフォルダを作る + その中に todo_css.css というファイルを作成する + 以下の内容をコピペする /* 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; /*下線を消す*/ } + htmlファイルのheadの部分に、以下の内容を記述する <!-- 手書きcss, <head>の中に以下のcssを入れる --> <link rel="stylesheet" th:href=@{/css/todo_css.css} /> + 実行するとこうなるはず -- ←がCSS適応前、→がCSS適応後~ &attachref(css04.jpg,,70%); &attachref(css05.jpg,,70%); - これらのCSSはほぼコピペで作成しており、余白やフォントサイズくらいしか調整してない。 - 意外と簡単に出来る * Bootstrap [#i6dff77b] - 某アカデミーでは、以下のように説明されている Bootstrapはレスポンシブデザインに対応したフロントエンドのフレームワークだよ。 シンプルな指示でグリッドシステムを使用できたり、本格的なフォームやボタンを作成できたりと非常に便利なんだ。 -- よくあるCSSの記述をあらかじめ定義している。 -- スマホ用設定も簡単に出来る -- とりあえず入れておけば、誰でもキレイに魅せられる、WEBデザイン界の"味覇(ウェイパー)" --- https://qiita.com/kakimochi/items/4e95c9e4d1e4b00ec05a ** 導入方法 [#lb431d44] - headに以下を記述 <!-- 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> - 適応するとこうなる~ &attachref(css06.jpg,,70%); - あんまり変わってない...？ -- BootStrapでは、classをきちんと定義することで、デザインが変更される *** 表を変えてみる [#t1861938] - list.htmlのtableタグに、属性を追加する <table border="1" class="table"> - ↑が適応前、↓が適応後~ &attachref(bs01.jpg); -- 横幅にも合わせて、いい感じに表示出来ている - さらに別属性を追加してみる -- 表の1行目の部分を以下のように変更する <thead class="thead-dark"> <tr> <th>#</th> <th>タイトル</th> <th>作成日時</th> <th>コマンド</th> </tr> </thead> ~&attachref(bs02.jpg); -- 分かりやすくなった...？ *** ボタンを変えてみる [#pa4ef1ee] - list.htmlのログインボタンに、属性を追加する <input type="submit" class="btn btn-primary" value="ログイン" /> &attachref(bs03.jpg); -- よく見かけるボタンの色に変化した -- ちなみに、色は色々変えられます(%%色だけに%%) ~&attachref(bs04.jpg); * やってみよう！ [#haad7e22] - ログインページのformをいい感じにしてみよう！ -- 検索していい感じな物のhtml, cssをコピペすると早い - ToDoListの表をいい感じにしてみよう！ -- いろんなclassを付けて、その変化を確認してみる * さらに知りたい人へ [#m320258d] - グリッドシステムについて知りたい人は以下のページへ -- [[./グリッドシステム]]
