HTMLだけでボタン風
<div style="display:inline-block; background:#bf0000; padding:8px; border-radius:8px; text-align:center; width:100px;"> <font color="#ffffff" size="4"> <b> 楽天 </b> </font> </div>
いろんな枠色付き
https://www.moca-memo.com/2019/10/kakomiwaku.html
タイトルの装飾いろいろ HTMLだけ
http://emporionote.blog.jp/archives/13425586.html
https://blog.frankul.net/2022/03/30/html-box/
ダウンロードURL
https://www.kentei-uketsuke.com/app/webroot/img/sys/rekiken/rekiken41_b3.jpg
https://www.kentei-uketsuke.com/app/webroot/neko/nekoC.png
↑拡張子までいれること
画像の枠線をつける。例：太さ5ピクセル
<img src=”../../logo.gif” width=”140″ height=”53″ border=”5″>
■HTML文書にCSSを適用する
<style type="text/css">
p {color:blue; line-height:1.5;}
</style>
style>要素で文書単位に適用する
HTML文書の<head>要素内に<style>要素を記述して、文書単位にスタイルシートを設定します。 適用されるスタイルがCSSによるものであることをブラウザなどに知らせるために<style>要素のtype属性の値にはtext/cssを指定します。
尚、スタイルシート部分を<!-- -->でコメントにするのは、スタイルシートに対応していない古いブラウザで<style>要素の内容がそのまま表示されてしまうのを防ぐためです。ただし、近年ではほとんどのブラウザは<style>要素をサポートしているので、<!--と-->を省略してもほぼ問題ないでしょう。
<html>
<head>
<style type="text/css">
<!--
p {color:blue; line-height:1.5;}
-->
</style>
</head>
<body>
<p>段落となります。</p>
</body>
</html>
td幅の固定方法
tableに「width」と「table-layout: fixed」を指定します。
「table-layout: fixed」はテキスト量による自動調整をなくします。
<style> .example6{ width: 100%; table-layout: fixed; } .example6 td:first-child{ width: 100px; } </style>
<table class="example6" border="1">
HTMLタグとは <> と </> で挟んだ間の詳細が設定できるやつです。
たとえば<font color="red">赤い文字</font>だよ
とすると、「赤い文字」の部分だけ赤く、「たとえば」と「だよ」だけ黒い文字になる仕組みです。
かんたんなタグおいておきます。
■改行 ※これはひとつおけば成立するタグです
<br>
■段落
<p></p>
■フォントサイズ
<font size=""></font>
※"の間に数字を入れてください。平均は10くらい。
■フォントカラー
<font color=""></font>
※"の間に色の英単語か#から始まるカラーコード（http://html-color-codes.info/japanese 参照）
を入れてください。
■太字
<strong></strong>
■線
<hr>
■フォントへのアンダーライン
<u> </u>
■見出し ※hの隣に数字を入れると見出しの大きさ指定
<h>
■リンク ※"の中にサイトのURL
<a href=""></a>
■リンク：別ウインドウでリンクを開く
target="_blank"
という文字列を、リンクタグ内に入れてください。
<a href="http://なんちゃら" target="_blank">
■ソース中にコメントをいれたり、表示させない
<!-- -->
■ルビを入れる
<ruby><rb>漢字</rb><rp>（</rp><rt>かんじ</rt><rp>）</rp></ruby>
【カラーチャートタグ】
http://www.asahi-net.or.jp/~ax2s-kmtn/ref/html/hp2.html
http://www.colordic.org/
■タグ名称を付けてリンク先として飛ぶ
<a name="entry-area"></a>
#entry-area
タグ名称を付けてリンク先として飛ぶ②
<h3 id="entry">インターネットからのお申し込み</h3>
<要素名 id="id名">要素内容</要素名> の書式で要素にid名を付ける
要素にid名を付けることで、リンク先として指定できるようになる
ひとつのウェブページ内では、重複して同じid名を付けることはできない
background-colorで背景色の指定方法
スタイルシートを使用せずに、HTMLの特定の箇所で背景色を指定する場合は、その箇所を<div style="background-color:#色彩の数字;"></div>で囲います。
■<div>で囲む場合
例えば、このように記述したとします。
<div style="background-color:#EDF7FF;">この箇所は薄い青色で囲んでいます。</div>
すると、このように表示されます。
この箇所は薄い青色で囲んでいます。
ただし、この<div>はブロック要素になるため、その前後で改行されてそのブロック全体に背景色が設定されることになります。
■幅や余白も指定する場合
幅や余白、枠線も指定する場合、widthやpadding、borderも指定しておくとよいでしょう。
<div style="background-color:#EDF7FF;width:240px;padding:20px;border:1px solid #ccc">幅や余白、枠線も指定した場合</div>
幅や余白、枠線も指定した場合
■<p>で囲む場合
同様に、段落タグの<P>タグにスタイルを指定した場合、文章の段落全体でこのように表示されます。こちらもその前後で改行されます。
<p style="background-color:#EDF7FF;">この箇所は薄い青色で囲んでいます。</p>
この箇所は薄い青色で囲んでいます。
意味的な繋がりや流れのあるコンテンツ中で背景色を指定する場合、<div>よりも<p>にスタイルを指定することをおすすめします。<div>はコンテンツから独立して切り離せる広告などで使用するとよいでしょう。
■<span>で囲む場合
一方、改行を入れずにピンポイントで指定したい場合には、インライン要素のspan styleを使用します。
例えば、このように記述したとします。
この箇所は<span style="background-color:#FFCC00;">黄色</span>で囲んでいます。
すると、改行がされずにこのように表示されます。
この箇所は黄色で囲んでいます。
〇HTMLのみで実装できるアコーディオン
<details>
<summary>ラーメン</summary>
ラーメンとは、中華麺とスープを主とし、様々な具を組み合わせた麺料理。漢字表記は拉麺、老麺または柳麺。別名は中華そばおよび支那そば、南京そばなどである。中華人民共和国や中華民国では日式拉麺または日本拉麺と呼ばれる。
</details>
<details>
<summary>焼肉</summary>
焼肉とは、牛・豚などの肉を焼いたもの。また、肉や内臓にタレをつけ、直火で焼きながら食べる料理である。
</details>
<details>
<summary>寿司</summary>
寿司とは、米飯と主に魚介類を組み合わせた日本料理である。 大別すると、酢飯と生鮮魚介を用いた「早鮨」と、魚介類を飯と塩で乳酸発酵させた「なれ鮨」に区分される。
</details>
■テーブル例
<table style="table-layout: fixed;">
<tbody>
<tr style="border-color: #000080;">
<td style="border-color: #000080; background-color: #f0f8ff; text-align: center;"><span style="color: #000000; font-size: 12pt;"><strong>初級</strong></span></td>
<td style="border-color: #000080; background-color: #f0f8ff; text-align: center;"><span style="color: #000000; font-size: 12pt;"><strong>中級</strong></span></td>
<td style="border-color: #000080; background-color: #f0f8ff; text-align: center;"><span style="color: #000000; font-size: 12pt;"><strong>上級</strong></span></td>
</tr>
<tr style="border-color: #000080;">
<td style="border-color: #000080; text-align: center;">
<p><strong class="point-lv2">2021年6月5日（<span class="saturday">土</span>）</strong></p>
<p>1日2回（午前／午後）実施します。</p>
<ul class="sup weak">
<li><span class="attention">※午前／午後は指定できません。</span></li>
</ul>
</td>
<td style="border-color: #000080; text-align: center;">
<p> </p>
<p><strong class="point-lv2">2021年6月6日（<span class="sunday">日</span>）</strong></p>
<p><strong>第1課題受験者</strong><br />1日1回実施します。</p>
<p><strong>第1課題免除者</strong><br />1日2回（午前／午後）実施します。</p>
<ul class="sup weak">
<li><span class="attention">※午前／午後は指定できません。</span></li>
</ul>
<p> </p>
</td>
<td style="border-color: #000080; text-align: center; white-space: normal;">
<p><strong class="point-lv2">2021年6月6日（<span class="sunday">日</span>）</strong></p>
<p>1日2回（午前／午後）実施します。</p>
<ul class="sup weak">
<li><span class="attention">※午前／午後は指定できません。</span></li>
</ul>
</td>
</tr>
</tbody>
</table>
■レスポンシブ対応？
<div class="note02 section">
<h3 class="ttl-text" style="color: #36c; font-size: 150%;">
</div>
■テーブル例２
<!--枠線-->
<table style="table-layout: fixed;">
<tbody>
<tr>
<td style="background-color: #f5f5f5; border-color: #808080; white-space: normal;">
<div class="wakubox">
<ul class="sup weak" style="width: 100%;">
<!--枠線-->
<!--枠線-->
</ul>
</div>
</td>
</tr>
</tbody>
</table>
<!--枠線-->
■レスポンシブ対応？
<div class="orderBox">
<img src="../../../app/webroot/img/sys/NTEST_Toul_2021.png" width="700" height="663" />
</div>
HTML文書の入力フォームにはテキストボックスやラジオボタン、チェックボックスといった項目を作成することができます。入力フォームの内容はサーバーへ送信されますが、名前や住所などのテキスト情報だけでなく、画像ファイルや音声ファイルなどを送信するフォームを作成することができます。<input>タグを使いますが基本の書式は以下の通りとなります。
●input001.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="uft-8">
<title>HTML入門-ファイルのアップロード</title>
</head>
<body>
<form action="#">
<p>アップロードするファイルを選択して下さい。</p>
<p><input type="file" name="s_file"></p>
</form>
</body>
</html>
inputタグのtype属性に"file"を設定するとファイルアップロードのボタンが表示されます。
コメント
最新を表示する
NG表示方式
NGID一覧