タグ

ブックマーク / www.htmq.com (73)

  • box-sizing-CSS3リファレンス

    box-sizingプロパティは、ボックスサイズの算出方法を指定する際に使用します。 値にcontent-boxを指定すると、 widthとheightで指定する幅と高さが内容領域に対して適用されます。 幅と高さにはパディングとボーダーは含まれません。 これはCSS2.1の仕様通りの解釈で、DOCTYPEスイッチの標準モードのような表示になります。 値にborder-boxを指定すると、widthとheightで指定する幅と高さがボーダーボックスに対して適用されます。 内容領域にパディングとボーダーを含んだ範囲に対して幅と高さが適用されるため、 パディングとボーダーの分だけボックスサイズが小さくなります。 DOCTYPEスイッチの互換モードのような表示になります。 ■値 content-box パディングとボーダーを幅と高さに含めない(初期値) border-box パディングとボーダーを

  • <section>-HTML5タグリファレンス

    <section>タグは、ウェブページ内のその部分が、一つのセクションであることを示す際に使用します。 セクションとは、文書やアプリケーションの一部分となる、意味や機能のひとまとまりのことです。 ウェブページ内のセクションとしては、例えば、導入部分、新着情報、連絡先などが考えられます。 <section>タグは汎用セクションを表しますが、その定義が漠然としていて使いどころが分かりにくいものの一つです。 <article>、<aside>、<nav>もセクション要素ですが、それぞれ記事、補足情報、ナビゲーションという、より具体的な意味を持っています。 それに対して<section>は一般的なセクションを表します。 <section>は一般的なセクションを定義するタグであるため、 要素内容を記事として配信する意味合いが強い場合には、<article>を使用することが推奨されています。 また、

  • <aside>-HTML5タグリファレンス

    <aside>タグは、その部分がウェブページ内における余談・補足情報のセクションであることを示す際に使用します。 ここで言う余談・補足情報とは、文と関連してはいるけれど区別して掲載するべき内容のことです。 例えば、印刷物などで文の補足として欄外に掲載されるような内容です。 <aside>でタグ付けした要素は、あくまでも文から外れる余談・補足情報ですから、 文の流れの一部となる挿入句(カッコでくくって差し込むような内容など)に対して、<aside>タグを使用するのは適切ではありません。 ■HTML4.01からHTML5へのバージョンアップによる変更点 aside要素は、HTML5から新たに追加された要素です。 ■使用例 HTMLソース <p> アンパンマンは、飢えた人々を主人公のおじさんが助けるという地味な内容で、発表当時には人気はあまり出ないだろうと言われていました。現在、アンパン

  • :after擬似要素-スタイルシートリファレンス

    :after擬似要素は、要素の直後に内容を挿入する際に使用します。 挿入内容はcontentプロパティで指定しますが、例えば、文字列・引用符・カウンタ・画像・音声などを挿入することができます。 ■セレクタの書式・スタイルを適用する対象 スタイルシート部分は外部ファイル(sample.css)に記述。 h2:before {content:"★";} strong:before {content:"『";} strong:after {content:"』";} HTMLソース <html> <head> <link rel="stylesheet" type="text/css" href="sample.css"> </head> <body> <h2>今日のお天気</h2> <p>今日は<strong>晴れ</strong>です。</p> <h2>明日のお天気</h2> <p>明日は<

  • CSSでのURL(URI)の指定-CSSの基本

    CSSでのURL(URI)の指定 url()関数で指定する CSSでURI(Uniform Resource Identifier)を指定する場合は、url()関数を使用します。 指定するファイルへのパスは、ダブルクォーテーション( " )、 または、シングルクォーテーション( ' )の引用符で囲みますが、引用符を省略することもできます。

  • background-size-CSS3リファレンス

    background-sizeプロパティは、背景画像のサイズを指定する際に使用します。 長さやパーセンテージで指定する場合、値を2つ記述すると、それぞれ記述した順に幅と高さを表します。 1つだけ指定した場合には、もう1つはautoと解釈されます。負の値を指定することはできません。 ■値 auto 自動的に算出される(初期値) contain 縦横比は保持して、背景領域に収まる最大サイズになるように背景画像を拡大縮小する cover 縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する 長さ 背景画像の幅・高さを指定する パーセンテージ 背景領域に対する背景画像の幅・高さのパーセンテージを指定する CSSソースは外部ファイル(sample.css)に記述 p.sample1 { width:300px; height:80px; padding:15px; bo

  • <col>-HTML5タグリファレンス

    <col>タグは、表の縦列に属性やスタイルを指定する際に使用します。 <col>は表の縦列をグループ化しませんが、複数の縦列に対して同じ属性やスタイルをまとめて指定することができます。 span属性には、属性やスタイルを適用する縦列の数を指定します。 span属性の値に指定できるのは0より大きい正の整数で、負の数値を指定することはできません。 <col>は、必ず<colgroup>~</colgroup>の中に配置します。 ただし、<colgroup>がspan属性を持っている場合には<col>を配置することはできません。 ■<colgroup>と<col>の違い <colgroup>と<col>は混同しがちですが、以下の点を意識すると理解しやすいでしょう。 <colgroup>は、表の縦列グループを表す要素です。 <col>は、<colgroup>によってグループ化された縦列グループ内の

    kathew
    kathew 2016/06/16
  • border-image...画像ボーダーを指定する

    border-imageプロパティは、画像ボーダーについてまとめて指定する際に使用します。 border-imageプロパティでは、 border-image-source、 border-image-slice、 border-image-width、 border-image-outset、 border-image-repeatの各プロパティの値を、まとめて指定することができます。 省略された値はそれらの初期の値に設定されます。 現在のところ、個別のプロパティをサポートしているブラウザは無いようなので、画像ボーダーを実現する際には、border-imageプロパティを利用するのが一般的です。 border-imageプロパティでも、border-image-outsetの値はブラウザでサポートされていないようです。 画像は上下左右それぞれのボーダー用に4枚必要となるわけではなく、1枚

  • <video>タグで動画を埋め込む-HTML5リファレンス

    ■<video>タグで動画を埋め込む 現在、インターネット上で動画が提供される場合には、Flashなどの独自フォーマットを利用するのが一般的です。 こうした独自フォーマットの動画を再生するには、 それぞれのフォーマットを再生するのに必要なプラグインを、ブラウザに追加インストールする必要があります。 HTML5では、任意の動画フォーマットを文書に埋め込むための<video>タグが追加されています。 この<video>タグを使用することで、ユーザーにプラグインをインストールしてもらうことなく、 HTMLからシンプルに動画を扱えるようになります。 感覚的には<img>タグで画像を扱うような感じです。 <video>タグで文書に動画を埋め込む場合には、例えば以下のように記述します。 とてもシンプルです。 ■ユーザー環境への配慮 <video>タグは、旧いブラウザではサポートされていない場合がありま

  • <colgroup>-HTML5タグリファレンス

    <colgroup>タグは、表の縦列(カラム)をグループ化する際に使用します。 <colgroup>を使用すると、表の1つ以上の縦列をグループ化して、 その縦列グループに対して同じ属性やスタイルをまとめて指定することができます。 span属性には、グループ化する縦列の数を指定します。 span属性の値に指定できるのは0より大きい正の整数で、負の数値を指定することはできません。 <colgroup>は<table>~</table>の中の、 <caption>より後、 <thead>・ <tbody>・ <tfoot>・ <tr>より前に配置します。 <colgroup>はspan属性を持つ場合には空要素となり、子孫要素を含むことはできません。 反対にspan属性を持たない場合には、子要素として<col>を含むことができます。 尚、<colgroup>と<col>の使い分けについては、 <c

    kathew
    kathew 2015/07/18
  • <input required>-HTML5タグリファレンス

    HTMLソース <form action="xxx.php" method="post"> <fieldset> 名前: <input type="text" name="yourname" required> ※入力必須<br> <input type="submit" value="送信"> </fieldset> </form>

  • location.reload()-JavaScriptリファレンス

    locationオブジェクトのreload()メソッドは、現在表示されているページのリロード(再読み込み)を行います。 一般的なブラウザの[更新]ボタンを押したときと同じ動作です。 location.reload(true)とするとウェブサーバのデータからリロードされ、 location.reload(false)とするとキャッシュからリロードされます。 ■構文・引数・戻り値 構文 location.reload() 引数 true を指定するとウェブサーバのデータからリロードされ、false を指定するとキャッシュからリロードされる(任意) 戻り値 なし HTML + JavaScriptソース <html> <head> <title>location.reload()の使用例</title> <script> setTimeout("location.reload()",5000);

  • HTMLクイックリファレンス

    HTMLタグ・スタイルシート・特殊文字等の早見表

    kathew
    kathew 2012/09/10
    [[html5][CSS][CSS3]