タグ

CSS3とhtml5に関するedamaxのブックマーク (2)

  • HTML5+CSS3の「カンタン装飾設定」で今風デザイン

    的にグラデーションや角丸はジェネレータからコピペして設定できるので、作業自体は簡単です。HTML5+CSS3サンプルを使って表現してみましょう。 (1)装飾のキモは「グラデーション・線・角丸・影・テクスチャー」 前回HTML5+CSS3の「レイアウトを自在に使いこなす」では、限られたいくつかのCSSプロパティを組み合わせて、さまざまなレイアウトができることをお見せしましたが、今回はそれに装飾を加えていきます。 いざ装飾しようとすると、どこから手を付ければ良いのか迷ってしまうかもしれませんが、アイコンなどの絵を除けば、装飾の要素は「グラデーション」「線」「角丸」「影」「テクスチャー」くらいなものです。それらを整理して組み合わせることで、全体として一体感のあるデザインに仕上げられます。 「それが難しいんだよ!」というお叱りの声が聞こえてきそうですが(笑)、以下の2つを見比べてみましょう。上

    HTML5+CSS3の「カンタン装飾設定」で今風デザイン
  • HTML5でWebページをマークアップするための基礎知識

    HTML5の文法で押さえておきたい3つのポイント HTML5で規定された文法は、既存のHTMLとも最大限互換性が保たれるように設計されました。例えば「<p>の終了タグがない」といったHTMLはWeb上に無数に存在するわけですが、それらをエラーとするのではなく、むしろ「それらを許容する、そして、そのことを仕様上明記する」という方法が取られています。 これにより、XHTMLに比べてコンパクトな記述でマークアップしつつも、HTML5に準拠したWebブラウザ上であれば、同一のDOMが生成されることが保証されます。 ではHTML5の文法について、詳しく見ていくとしましょう。 【1】タグの記述を省略できる要素 HTML5では、要素によってはタグの記述を省略できます。具体的には「終了タグを書いてはいけない」「終了タグを省略できる」「開始タグを含め、タグ自体を省略できる」の3パターンがあります。 以下に、

    HTML5でWebページをマークアップするための基礎知識
  • 1