■ ヒントだよ！HTML & CSS ■

    topへ     序     HTML     CSS     表計算利用     ファイル     色指定     ソフト/機材     参考書など     単位     記号の例

    HTMLの構造     タグの基本     タグ(全体)     グローバル属性     head内タグ     body内タグ

    body内ダグ1     body内ダグ2     body内ダグ3     body内ダグ4     body内ダグ5     body内ダグ6

■ HTML
・body内タグ3

• <bdiバイディレクショナル 属性="属性値">～</bdi>
  テキストの書字方向を自動判別する。属性:グローバル属性。

• <bdoバイディレクショナル・オーバライト 属性="属性値">～</bdo>
  テキストの書字方向を指定する。属性:グローバル属性。
  例:<bdo dir="ltr">～</bdo>

• <wbrワード・ブレーク・オポチュニティ 属性="属性値">
  折り返し可能な箇所を指定する。属性:グローバル属性。
  ウィンドウズサイズより長い文字列の場合改行し、そうでない場合は改行しません。

• <insインサート 属性="属性値">～</ins>
  追記されたテキストを表す。属性:グローバル属性。
  例:<ins>あいうえお abcde</ins>     あいうえお abcde

• <delデリート 属性="属性値">～</del>
  削除されたテキスをを表す。属性:グローバル属性。
  例:<del>あいうえお abcde</del>     あいうえお abcde
  ※HTML5で廃止された<s>や<strike>の代用として使っています。

• <pictureピクチャー 属性="属性値">～</picture>
  レスポンシブ・イメージを実現する（？）。属性:グローバル属性。

• <sourceソース 属性="属性値">～</source>
  選択可能なファイルを複数指定する(?)。
  属性:グローバル属性、src、type、srcdet、media、sizes。

• <embedエンベッド 属性="属性値">～</embed>
  アプリケーションやコンテンツを埋め込む。
  属性:グローバル属性、src="ファイル名"、type="MIMEタイプ"、width="幅"、height="高さ"。
  • MIMEタイプ

    種類	拡張子	MIMEタイプ
    HTML	.html .htm	text/html
    CSS	.css	text/css
    JavaScript	.js	text/javascript
    画像	.gif	image/gif
    画像	.png	imgage/png
    画像	.jpg .jpeg	image/jpeg
    画像	.webp	image/erbp
    動画	.mp4 .m4v	video/mp4
    動画	.ogg .ogv	video/ogg
    動画	.webm	video/webm
    音声	.acc	audio/aac
    音声	.mp4 .m4a	audio/mp4
    音声	.mp1 .mp2 .mp3 .mpg .mpeg	audio/mpeg
    音声	.ogg .ga	audio/ogg
    音声	.wav	audio/wav
    音声	.webm	audio/webm

  • 例:mp4の場合
    タグ:<embed src="vi/240131.mp4" type="video/mp4" width="350" height="197"
    
    ※コントール表示が出来たりすのでvideoタグの方がいいです。
  • 例:mp3の場合
    <embed src="../../kasi/oto/kagayk.mp3" type="audio/mpeg" width="350" height="80">
    
    ※audioタグの方がいいです。
  2024.4.28.動画/音声ファイルの例を追加。

• <imgイメージ 属性="属性値">～</img>
  画像を埋め込む。
  属性:グローバル属性、src、srcset、sizez、crossorigin、usemap、ismap、width、height、decording。
  例:<img src="../../img/kinutop.png" width="199" height="39" alt="KinutaHandicraft log" class="kyo0" title="画像の表示例です。">
  
  ※画像周りの線表示が必要なときや不必要なとき、boder="～"での指定が便利でしたが、
  ※boder="～"が使用禁止になったので、
  border="0"/border="1"をcss(class="kyo0"/ class="kyo1")で表現しています。

  cssの例

  .kyo0 { border:non; }
  .kyo1 { border:1px solid #000000; }

• <iframeアイフレーム 属性="属性値">～</iframe>
  他のHTML文書を埋め込む(YouTube動画の埋め込み)。
  属性:グローバル属性、scr、srcdoc、name、sandbox、allow、allowfullscr een、allowpaymentrequest、width、height。
  例:<iframe src="2300.htm" width="400" height="250"></iframe>
  
  ※前は、fframesetやframeを使っていたんですけど…。

• <objectオブジェクト 属性="属性値">～</object>
  埋め込まれた外部リソースを表す。
  属性:グローバル属性、data、type、name、usemap、form、width、height。

• <paramパラメーター 属性="属性値">～</param>
  外部リソースが利用するパラメータを与える。属性:グローバル属性、name、value。

• <videoビデオ 属性="属性値">～</video>
  動画ファイルを埋め込む。
  属性:グローバル属性、crossorigu\in、poster、preload、autoplay、playslnline、loop、muted、controls、width、height。
  例:<video controls src="vi/240131.mp4" width="350" height="197"></video>
  

• <audioオーディオ 属性="属性値">～</audio>
  音声ファイルを埋め込む。
  属性:グローバル属性、src、crossorigin、preload、loop、muted、controls。
  例:<audio src="../../kasi/oto/kagayk.mp3"controls="controls" title="曲名「輝きのために」"></audio>
  

• <trackトラック 属性="属性値">～</track>
  テキストトラックを埋め込む(?)。
  属性:グローバル属性、kind、src、srclang、label、default。

• <mapマップ 属性="属性値">～</map>
  クｒッカブルマップを作成する。属性:グローバル属性、name。
• <areaエリア 属性="属性値">～</area>
  イメージマップの(クリッカブルマップにおける)領域を指定する。
  属性:グローバル属性、alt、coords、shape、target、download。
  shape="属性値"
  • 全体-リンクなし:shape="default" nohref
  • 円:shape="circle"  coords="円の中心のX座標,円中心のY座標、円の半径"
  • 多角形:shape="poly"  coords="点1のX座標,点1のY座標,点2のX座標,点2のY座標,点3のX座標,点3のY座標,…"
  • 長方形:shape="rect"  coords="左上のX座標,左上のY座標,右下のX座標,右下のY座標"
  例:
  <img src="img/test.jpg" width="300" height="150" usemap="#test" class="kyo0">
  <map name="test" id="test">
  <area target="_blank" href="#" shape="poly" coords="10,23,62,140,102,72,80,32" alt="多角形">
  <area target="_blank" href="#" shape="rect" coords="224,15 289,140" alt="長方形">
  <area target="_blank" href="#" shape="circle" coords="166,71,43" alt="円形">
  <area shape="default" nohref>
  </map>
  

    body内ダグ1     body内ダグ2     body内ダグ3     body内ダグ4     body内ダグ5     body内ダグ6

    HTMLの構造     タグの基本     タグ(全体)     グローバル属性     head内タグ     body内タグ

    topへ     序     HTML     CSS     表計算利用     ファイル     色指定     ソフト/機材     参考書など     単位     記号の例