タグ

CSSに関するzoocreamのブックマーク (30)

  • 文字サイズ、行間隔、文字間隔の指定

    -- 文字の隠し味 -- 文字サイズ、行間隔、文字間隔 文字の大きさや行間隔などをピクセル値で細かく設定することができます

  • display-スタイルシートリファレンス

    displayプロパティは、ブロックレベル・インライン・テーブル・ルビ・フレックスコンテナ等の、要素の表示形式を指定する際に使用します。 ■初期値・適用対象・値の継承 インラインとブロック inline インラインボックスを生成する(初期値) block ブロックボックスを生成する list-item li要素のようにリスト内容が収められるブロックボックスと、リストマーカーのためのマーカーボックスを生成する run-in 文脈に応じてブロックまたはインラインボックスのいずれかを作成する inline-block インラインレベルのブロックコンテナを生成する。要素全体としてはインライン要素のような表示形式だが、内部はブロックボックスで高さ・横幅などを指定できる。 テーブル table table要素のような表示となる inline-table インラインレベルのテーブルとなる table-r

    zoocream
    zoocream 2012/05/01
    インライン要素の<IMG>などに display:block を指定すると、ブロック要素として表示されるようになります。
  • article 要素 - セクション - HTML要素 - HTML5 タグリファレンス - HTML5.JP

    4.3.2 article 要素 カテゴリー: フロー・コンテント 、ただし、子孫に main 要素がないこと。 セクショニング・コンテント パルパブル・コンテント この要素を使うことができるコンテキスト: フロー・コンテントが期待される場所 コンテントモデル: フロー・コンテント コンテント属性: グローバル属性 text/html におけるタグの省略: どちらのタグも省略できません。 指定可能な ARIA role 属性 の値: article (デフォルト - 指定不要), application, document or main. 指定可能な ARIA ステートとプロパティ属性: グローバル aria-* 属性 許可ロールに該当する aria-* 属性 DOM インタフェース: HTMLElement を使う article 要素は、ドキュメント、ページ、アプリケーション、サイト

    zoocream
    zoocream 2012/05/01
    article 要素は、ドキュメント、ページ、アプリケーション、サイトの自己完結したものを表します。つまり、シンジケーションのように、単独で再配布でき再利用できるよう意図したものです。
  • <nav>-HTML5タグリファレンス

    <nav>は、ナビゲーションであることを示す際に使用します。 ナビゲーションとは、ウェブサイト内の他のページへのリンクや、ページ内リンクなどのことです。 他のページにリンクした箇所のすべてを<nav>~</nav>で囲む必要はなく、主要なナビゲーションとなるセクションのみを示すのに適しています。 よく、ウェブページの下部に、利用規約ページ、著作権ページ、トップページへ戻る、などのリンクが配置されることがありますが、 このような場合には<nav>を使用せず、<footer>のみで十分です。 ■HTML4.01からHTML5へのバージョンアップによる変更点 nav要素は、HTML5から新たに追加された要素です。 ■使用例 HTMLソース <body> <header> <h1>浦島釣具店</h1> <p> <a href="news.html">お知らせ</a> <a href="blog.h

    zoocream
    zoocream 2012/05/01
    nav要素。
  • nav 要素を使ったセマンティックなナビゲーション - html5doctor - HTML5.JP

    サイト内検索 この記事は、html5doctor に掲載されている記事「Semantic navigation with the nav element」を日語訳したものです。この記事では、nav 要素の正しい使い方を解説しています。 原文タイトル Semantic navigation with the nav element 原文ページ URL http://html5doctor.com/nav-element/ 著者 Tom Leadbetter 氏 原文投稿日 2009-07-15 一部、直訳ではなく意訳した部分がございます。原文と表現が異なることがございますので、ご了承ください。この語訳には、翻訳上の誤りがある可能性があります。したがって、内容について一切保証をするものではありません。正確さを求める場合には、必ず各記事の原文を参照してください。当方は、この文書によって利

    zoocream
    zoocream 2012/05/01
    nav要素。使ってなかった。
  • HTML 5での<section>要素と<article>要素の違い。

    平成22年 3月11日 公開 テーマ HTML 5 HTML 5に於ける<section>要素と<article>要素の違いと使い分け方について。 <section>要素の位置付け。 HTML 5で導入される<section>要素は一般的なセクションです。 但し、HTML 5の仕様案では、他のセクショニング内容要素に該当しないセクションのみを<section>要素としてマークアップすべきであるとしております。 他のセクショニング内容要素とは、以下の三つです。 <article>要素 独立した記事のセクション。 <nav>要素 ナヴィゲータリンクのセクション。 <aside>要素 文との関連が薄いセクション(注釈や余談など)。 <article>要素とは。 HTML 5で導入される<article>要素とは、独立した記事のセクションです。 ウェブログやニュースサイトなら、複数の記事が一

    zoocream
    zoocream 2012/05/01
    HTML 5に於ける<section>要素と<article>要素の違いと使い分け方について。
  • <SPAN>-HTMLタグリファレンス

    <SPAN>タグはそれ自身は特に意味を持っていませんが、 <SPAN>~</SPAN>で囲んだ範囲をひとかたまりとして、スタイルシートを適用するのに用います。 同様な使い方をするタグに<DIV>がありますが、 <DIV>はブロック要素であり、<SPAN>はインライン要素です。 ブロック要素とは、見出し、段落、リスト、フォームなどのひとつのまとまった単位として表される要素で、 一般的なブラウザでは前後に改行が入って表示されます。インライン要素とは主に文章の一部として利用される要素であり、 その前後は改行されません。 ■使用例 HTMLソース絵の具の <span style="background-color: #0099FF">青色</span>と <span style="background-color: #FFFF00">黄色</span>を混ぜると <span style="back

  • 画像形式の違い[JPEG/GIF/PNG]

    当ページの概要 ホームページで良く使われる画像3形式「JPEG・GIF・PNG」の特徴比較情報!最適な画像形式を選んで、訪問者にやさしいホームページ目指そう! GIFアニメーションを使う前に 君のホームページにGIFアニメを使おうと思う前に、知っておいて欲しいことがあります。それは、GIFアニメのメリット・デメリットです。GIFアニメだと、画像が動いて楽しいのですが、作成者が気付かない落とし穴もあります。 他のGIF画像以外の画像形式(PNG,JPEG)の特性も知って、最適な選択をしましょう! ホームページで使える画像形式 よくホームページで使われる画像形式には、「JPEG・GIF・PNG」の3形式があります。それぞれの特徴を知って、使用用途に応じた画像形式を選ぶことで、綺麗で快適な表示の早いホームページになります。 画質をキレイに保ちキレイな画像を見せられたり、ファイルサイズを小さくして

  • CSSで垂直中央を実装する【css tips】

    CSSで垂直中央を実装する【css tips】 vertical-alignの使い方の続きです。 vertical-align:middleでの垂直表示は説明しましたが、あの方法ですと2行以上の場合は利用できないです。 2行以上の場合に垂直中央表示をするにはpositionプロパティを利用します。 (X)HTMLソース <div> <p>中央に表示<br />したい文字</p> </div> CSSソース div{ width:200px; height:200px; background:#39FF6B; position:relative; } p{ position:absolute; top:50%; left:50%; margin-left:-2.5em; margin-top:-1em; } サンプル positionを使いp要素の開始位置を中央に設定します。 その後にmar

    CSSで垂直中央を実装する【css tips】
  • css-eblog.com - このウェブサイトは販売用です! - css eblog リソースおよび情報

    This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.