カテゴリー: Markup

  • FacebookページをWebサイトに貼り付ける方法

    FacebookページをWebサイトに貼り付けるためのコードを取得する

    FacebookページのタイムラインをWebサイトに貼り付けるためには、貼り付け用のコードを取得する必要があります。コードは ページプラグイン から取得できます。

  • flex box

    cssのflex boxの使い方メモ

    基本的な使い方

    横並びにしたいブロック要素を囲む要素にdisplay: flexを指定する。

    見やすいように背景色を指定してあります

    プロパティ

    flex-direction : 子要素の配置方向

  • HTML5 要素一覧

    要素タイプの一覧

    要素名説明
    ルート要素
    <html>文書のルート要素
    文書のメタデータ
    <head>メタデータの集まりを表す
    <title>文書にタイトルを付ける
    <base>相対リンクの基準となるURLを指定する
    <link>別の文書類と関連付ける
    <style>スタイルシートを指定する
    <meta>文書に関する様々なメタデータを表す
    セクション
    <body>文書の本体を表す
    <article>自己完結したセクションを表す
    <section>一般的なセクションを表す
    <nav>ナビゲーションを表す
    <aside>補足的なセクションを表す
    <h1>–<h6>見出しを付ける
    <hgroup>見出しをグループ化する （廃止）
    <header>ヘッダを表す
    <footer>フッタを表す
    <address>連絡先を表す
    コンテンツのグループ化
    <p>段落を表す
    <hr>テーマの区切りを表す
    <pre>整形済みのテキスト
    <blockquote>引用セクションを表す
    <ol>順序付きのリストを作る
    <ul>順不同のリストを作る
    <li>リストの項目を表す
    <dl>記述リストを作る
    <dt>記述リストの名前部分を表す
    <dd>記述リストの値部分を表す
    <figure>参照される図版を表す
    <figcaption>図版にキャプションを付ける
    <main>文書のメインコンテンツを表す
    <div>特定の範囲をグループ化する
    テキストの意味
    <a>リンクを設定する
    <em>強調を表す
    <strong>重要性を表す
    <small>細目のような注釈を表す
    <s>すでに正確ではない内容を表す
    <cite>作品のタイトル・著者名・URLを表す
    <q>引用フレーズを表す
    <dfn>定義される用語を表す
    <abbr>略語や頭字語を表す
    <code>ソースコードを表す
    <var>変数を表す
    <samp>プログラムの出力サンプルを表す
    <kbd>ユーザーが入力する内容を表す
    <data>コンピュータ向けのデータを指定する
    <sub>下付き文字を表す
    <sup>上付き文字を表す
    <time>日付や時刻を表す
    <i>他と区別されるテキストを表す（思考・専門用語 等）
    <b>他と区別されるテキストを表す（キーワード・製品名 等）
    <u>軽めのラベル付け
    <mark>テキストのハイライト表示
    <ruby>ルビ（ふりがな）を振る
    <rb>ルビの対象テキストを表す
    <rt>ルビテキストを表す
    <rtc>ルビテキストのコンテナ
    <rp>ルビテキストを括弧で囲む
    <bdi>隔離されたテキストを表す
    <bdo>書字方向を指定する
    <span>特定の範囲をグループ化する
    <br>改行する
    <wbr>改行位置の候補を表す
    訂正
    <ins>追加された部分を表す
    <del>削除された部分を表す
    コンテンツの埋め込み
    <img>画像を表示する
    <picture>レスポンシブイメージ（画像内容の最適化） （HTML 5.1）
    <iframe>インラインフレームを作る
    <embed>プラグインデータを埋め込む
    <object>外部リソースを埋め込む
    <param>パラメータを指定する
    <video>プラグインを使わずに動画を再生する
    <audio>プラグインを使わずに音声を再生する
    <track>動画・音声と同期するテキストトラック
    <source>メディアリソースの候補を指定する
    <map>イメージマップを作る
    <area>イメージマップのリンク領域を設定する
    テーブル
    <table>表を作る
    <caption>表にキャプションを付ける
    <colgroup>表の列をグループ化する
    <col>表の列を表す
    <tbody>表の行をグループ化する（本体部分）
    <thead>表の行をグループ化する（ヘッダ部分）
    <tfoot>表の行をグループ化する（フッタ部分）
    <tr>表の行を表す
    <td>データセルを表す
    <th>見出しセルを表す
    フォーム
    <form>入力フォームを作る
    <fieldset>フォーム部品をグループ化する
    <legend>部品グループにキャプションを付ける
    <label>フォーム部品とラベルを関連付ける
    <input>入力欄・選択肢・ボタンを作る
    <select>プルダウンメニューを作る
    <option>プルダウンメニューや入力候補の選択肢を作る
    <optgroup>プルダウンメニューの選択肢をグループ化する
    <textarea>複数行のテキスト入力欄を作る
    <button>内容を持つボタンを作る
    <datalist>入力候補のリストを作る
    <keygen>暗号鍵を生成する （廃止予定）
    <output>計算結果の出力欄を作る
    <progress>作業の進捗状況を示す
    <meter>特定範囲内の数量や割合を示す
    スクリプティング
    <script>JavaScriptを埋め込む
    <noscript>スクリプトが利用できない環境用の内容
    <template>スクリプトで利用するHTMLコードのテンプレート
    <canvas>スクリプト使ってグラフィックスを描く
    インタラクティブ
    <details>リクエストに応じて詳細情報を提供する （HTML 5.1）
    <summary>詳細情報のキャプションや要約を表す （HTML 5.1）
    <menu>ポップアップメニューを表す （HTML 5.1）
    <menuitem>ポップアップメニューの項目を表す （HTML 5.1）
    <command>コマンドを表す （廃止）

  • CSSプロパティの初期値

    CSS3のプロパティ初期値をまとめてみました。
    ※アルファベット順
    ※ショートハンドプロパティは省略

    A

    プロパティ名 初期値 説明
    animation-delay 0s アニメーションを遅れて開始させる
    animation-direction normal 繰り返しの際に逆再生で戻す
    animation-duration 0 アニメーションの再生時間
    animation-iteration-count 1 アニメーションを繰り返す回数
    animation-name none 実行させるキーフレーム
    animation-timing-function ease アニメーションの速度の変化パターン
    azimuth center 音の聞こえる横方向の位置

    B

    プロパティ名 初期値 説明
    backface-visibility visible 裏側の表示・非表示
    background-attachment scroll 背景画像の固定配
    background-clip border-box 背景の表示領域の設定
    background-color transparent 背景色
    background-image none 背景画像
    background-origin padding-box 背景画像の基準位置の設定
    background-position 0% 0% 背景画像の表示位置
    background-repeat repeat 背景画像の並び方
    background-size auto 背景画像のサイズ
    border-collapse separate セルの枠線の表示形式
    border-image-outset 0 ボーダー画像の表示領域
    border-image-repeat stretch ボーダー画像の並び方
    border-image-slice 100% ボーダー画像のスライス
    border-image-source none ボーダー画像
    border-image-width 1 ボーダー画像の表示幅
    border-radius 0 角丸の一括指定
    border-spacing 0 セルとセルの間隔
    border-top-color currentColor 上の枠線の色
    border-bottom-color currentColor 下の枠線の色
    border-left-color currentColor 左の枠線の色
    border-right-color currentColor 右の枠線の色
    border-top-left-radius 0 左上の角丸
    border-top-right-radius 0 右上の角丸
    border-bottom-right-radius 0 右下の角丸
    border-bottom-left-radius 0 左下の角丸
    border-top-style none 上の枠線の形式
    border-bottom-style none 下の枠線の形式
    border-left-style none 左の枠線の形式
    border-right-style none 右の枠線の形式
    border-top-width medium 上の枠線の太さ
    border-bottom-width medium 下の枠線の太さ
    border-left-width medium 左の枠線の太さ
    border-right-width medium 右の枠線の太さ
    bottom auto 下からの位置
    box-shadow none ボックスに影をつける
    box-sizing content-box width・heightにパディングとボーダーを含めるか

    C

    プロパティ名 初期値 説明
    caption-side top 表タイトルの表示位置
    clear none 回りこみの解除
    clip auto 見える範囲
    column-count auto 段の数
    column-gap normal 段と段の間隔
    column-rule-style none 段の境界線の線種
    column-rule-width medium 段の境界線の太さ
    column-width auto 段の幅
    content normal 内容の追加
    counter-increment none 連番の値を進める
    counter-reset none 連番のリセット
    cue-after none 要素の直後に識別音を鳴らす
    cue-before none 要素の直前に識別音を鳴らす
    cursor auto カーソルの形状

    D

    プロパティ名 初期値 説明
    direction ltr 文字表記の方向
    display inline 表示形式

    F

    プロパティ名 初期値 説明
    float none 左右への配置と回り込み
    font-size medium フォントサイズ
    font-style normal イタリック
    font-variant normal スモールキャップ
    font-weight normal フォントの太さ

    H

    プロパティ名 初期値 説明
    height auto ボックスの内容領域の高さ

    L

    プロパティ名 初期値 説明
    left auto 左からの位置
    letter-spacing normal 文字間隔
    line-height normal 行間
    list-style-image none リストマーカーの画像
    list-style-position outside リストマーカーの表示位置
    list-style-type disc リストマーカーの形式

    M

    プロパティ名 初期値 説明
    margin-top 0 上マージン
    margin-bottom 0 下マージン
    margin-left 0 左マージン
    margin-right 0 右マージン
    max-height none 最大の高さ
    max-width none 最大の幅
    min-height 0 最小の高さ
    min-width 0 最小の幅

    O

    プロパティ名 初期値 説明
    opacity 1 透明度
    orphans 2 ページ最後の段落の必要行数
    outline-color invert アウトラインの色
    outline-offset 0 ボーダーとアウトラインの間隔
    outline-style none アウトラインの形式
    outline-width medium アウトラインの太さ
    overflow visible はみ出る部分の表示方法
    overflow-x visible はみ出る部分の表示方法（横）
    overflow-y visible はみ出る部分の表示方法（縦）

    P

    プロパティ名 初期値 説明
    padding-top 0 上パディング
    padding-bottom 0 下パディング
    padding-left 0 左パディング
    padding-right 0 右パディング
    position static 相対配置・絶対配置・固定配置
    page-break-after auto 要素の直後で改ページ
    page-break-before auto 要素の直前で改ページ
    page-break-inside auto 要素内での改ページの禁止
    pause-after 0 要素の直後の読み上げ休止時間
    pause-before 0 要素の直前の読み上げ休止時間
    perspective none バース（遠近感）の度合い
    perspective-origin 50% 50% perspectiveの原点を設定
    pitch medium 読み上げ時の声の高さ
    pitch-range 50 読み上げ時の声の高さの変化幅
    play-during auto 読み上げ時のバックグラウンド音

    R

    プロパティ名 初期値 説明
    resize none ボックスのリサイズを可能にする
    richness 50 読み上げ時の声の明瞭度
    right auto 右からの位置

    S

    プロパティ名 初期値 説明
    speak normal 音声読み上げ時の読み方
    speak-header once 表の見出しの読み上げ方
    speak-numeral continuous 数字の読み上げ方
    speak-punctuation none 句読点や記号の読み上げ方
    speech-rate medium 読み上げる速度
    stress 50 読み上げ時のアクセントの強さ

    T

    プロパティ名 初期値 説明
    table-layout auto テーブルの表示形式
    text-align left 行揃え
    text-decoration none 下線・上線・取消線・点線
    text-emphasis-style none 圏点の種類
    text-indent 0 1行目のインデント
    text-shadow none 文字の影
    text-transform none 大文字・小文字
    top auto 上からの位置
    transform none 移動・回転・拡大縮小・傾斜
    transform-origin 50% 50% トランスフォームの原点を設定
    transform-style flat 子要素の2D/3Dの設定
    transition-delay 0 トランジションを遅れて開始させる
    transition-duration 0 トランジションの再生時間
    transition-property all トランジションを適用するプロパティ
    transition-timing-function ease トランジションの速度の変化パターン

    V

    プロパティ名 初期値 説明
    vertical-align baseline インラインまたはテーブルセル要素の縦方向の整列
    visibility visible 表示・非表示

    W

    プロパティ名 初期値 説明
    white-space normal 空白・改行・タブの処理
    width auto ボックスの内容領域の幅
    word-spacing normal 単語間隔

    Z

    プロパティ名 初期値 説明
    z-index auto 重なる順序