基本html
最終更新:2021/09/08
下層でよく使う基本のhtmlです。
見出しh2
見出しh3
テキストテキストテキスト.t1
テキストテキストテキスト.t2
テキストテキストテキスト.t3
テキストテキストテキスト.t4
TEXTTEXTefont
代表者OOOOOO.明朝体
ストロングテキスト
テキストテキストテキスト
テーブルフォーム
| 会社名 | |
|---|---|
| 代表取締役 | |
| 設立 | |
| 事業案内 |
テーブルレスポンシブ
セル内の折り返しをしない
| 項目 | 詳細テキストテキスト |
|---|---|
| 項目 | 詳細テキストテキスト詳細テキストテキスト |
| 項目 | 詳細テキストテキスト詳細テキストテキスト詳細テキストテキスト |
| 項目 | 詳細テキストテキスト詳細テキストテキスト詳細テキストテキスト詳細テキストテキスト |
| 項目 | 詳細テキストテキスト詳細テキストテキスト詳細テキストテキスト詳細テキストテキスト詳細テキストテキスト |
一番上の行と左端のthだけ折り返ししない
| 項目項目項目 | 項目項目項目 | |
|---|---|---|
| 項目 | 詳細テキストテキスト詳細テキストテキスト | 詳細テキストテキスト詳細テキストテキスト |
| 項目 | 詳細テキストテキスト詳細テキストテキスト詳細テキストテキスト | 詳細テキストテキスト詳細テキストテキスト |
| 項目 | 詳細テキストテキスト詳細テキストテキスト詳細テキストテキスト詳細テキストテキスト | 詳細テキストテキスト詳細テキストテキスト |
| 項目 | 詳細テキストテキスト詳細テキストテキスト詳細テキストテキスト詳細テキストテキスト詳細テキストテキスト | |
カード
タイトルタイトルタイトルタイトル
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
リンク
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
<h2>見出しh2</h2> <h3>見出しh3</h3> <p class="t1"><span>テキストテキストテキスト</span>.t1</p> <p class="t2"><span>テキストテキストテキスト</span>.t2</p> <p class="t3"><span>テキストテキストテキスト</span>.t3</p> <p class="t4"><span>テキストテキストテキスト</span>.t4</p> <p class="efont">TEXTTEXTefont</p> <p class="txtmin txt-right">代表者OOOOOO.明朝体</p> <p><strong>ストロングテキスト</strong></p> <p><strong class="under">テキストテキストテキスト</strong></p> <p><ruby><rb>MGM</rb><rp>（</rp><rt>エムジーエム</rt><rp>）</rp></ruby></p> <p> </p> <h2>テーブルフォーム</h2> <table id="form" width="100%"> <tbody> <tr> <th>会社名</th> <td> </td> </tr> <tr> <th>代表取締役</th> <td> </td> </tr> <tr> <th>設立</th> <td> </td> </tr> <tr> <th>事業案内</th> <td> </td> </tr> </tbody> </table> <h2>テーブルレスポンシブ</h2> <h3>セル内の折り返しをしない</h3> <div class="table-responsive"> <table class="table text-nowrap table-bordered"> <tr><th>項目</th><td>詳細テキストテキスト</td></tr> <tr><th>項目</th><td>詳細テキストテキスト詳細テキストテキスト</td></tr> <tr><th>項目</th><td>詳細テキストテキスト詳細テキストテキスト詳細テキストテキスト</td></tr> <tr><th>項目</th><td>詳細テキストテキスト詳細テキストテキスト詳細テキストテキスト詳細テキストテキスト</td></tr> <tr><th>項目</th><td>詳細テキストテキスト詳細テキストテキスト詳細テキストテキスト詳細テキストテキスト詳細テキストテキスト</td></tr> </table> </div> <p> </p> <h3>一番上の行と左端のthだけ折り返ししない</h3> <div class="table-responsive"> <table class="table table-bordered"> <tr class="text-nowrap"><th></th><th>項目項目項目</th><th>項目項目項目</th></tr> <tr><th class="text-nowrap">項目</th><td>詳細テキストテキスト詳細テキストテキスト</td><td>詳細テキストテキスト詳細テキストテキスト</td></tr> <tr><th class="text-nowrap">項目</th><td>詳細テキストテキスト詳細テキストテキスト詳細テキストテキスト</td><td>詳細テキストテキスト詳細テキストテキスト</td></tr> <tr><th class="text-nowrap">項目</th><td>詳細テキストテキスト詳細テキストテキスト詳細テキストテキスト詳細テキストテキスト</td><td>詳細テキストテキスト詳細テキストテキスト</td></tr> <tr><th class="text-nowrap">項目</th><td colspan="2">詳細テキストテキスト詳細テキストテキスト詳細テキストテキスト詳細テキストテキスト詳細テキストテキスト</td></tr> </table> </div> <p> </p> <h2>カード</h2> <div class="card"> <div class="card-header"> <p><img src="https://www.mgm-design.jp/wp-content/uploads/2020/12/q.png" alt="質問"> タイトルタイトルタイトルタイトル</p> </div> <div class="card-body"> <p><img src="https://www.mgm-design.jp/wp-content/uploads/2020/12/a.png" alt="答え"> テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div> </div> <p> </p> <h2>リンク</h2> <div class="row"> <div class="col-md-6"> <p class="page-area pa_canter"><a href="../#a">○○○○はこちら <i class="fa fa-angle-down"></i></a></p> </div> <div class="col-md-6"> <p class="page-more"><a href="#">○○○○はこちら <i class="fa fa-angle-right"></i></a></p> </div> <div class="col-md-6 offset-md-3"> <p class="page-more2"><a href="#">○○○○はこちら <i class="fa fa-angle-right"></i></a></p> </div> </div> <p> </p> |