コーディングしているときに、背景や線が途中で消えたり、floatした親要素のマージンがおかしくなることがあると思います。
これは、floatした要素が親要素の高さに反映されていないため起きる現象です。つまり、親要素の枠に対して子要素は独自に高さを持ったりしてるため、親要素の枠をはみ出したりするんですね。
clearfixはこういった現象を解決するための方法です。
HTML/CSSテクニック 一覧
携帯サイトを構築するとき、キャリア毎の分岐などがHTMLだと非常に面倒くさいので僕の場合はPHPで構築します。わかりにくいタイトルでごめんなさい。
各キャリアで使用できるタグや、セレクタにも差があり、特にDocomoなんかは拡張子をxhtmlにするとCSSが上手く適用される（解釈の違いはあると思いますが...）とか、CHTMLの独自の仕様があったりとコーダー泣かせ。もう辛抱たまらん。
みなさんは利用規約などでpreタグを使っていますか？
preタグで囲ったテキストは自動改行されないため、文章量が多いとコンテンツ領域を越えてしまったりします。
越えないように overflow: auto などを指定するのですが、利用規約などをpreでマークアップしたときにはちょっと見難いものになってしまいます。
縦横にスクロールバーが出てしまい、見る側にとって非常に確認しにくい...。
ブラウザ間の表示を統一するためにはCSSハックが必要不可欠です。
CSSハックにはチェッカーを通らないものや、様々な障害を作り出す可能性があります。
但し、うまく付き合えばコーディング業務もぐんと楽になります。
ここではよく扱うCSSハックを紹介していきます。
XML宣言は必ず付けなければならない、ということはありません。チェッカーを通すときにXML宣言をしていなければ引っ掛かってしまいますが、それ以外のデメリットは極論を言えばほとんどありません。
逆に、XML宣言を行うことによって様々なデメリットが発生することを覚えておかなければなりません。
できればXML宣言を行うほうが形式的には正しいと言えるのですが現在のところ「XML宣言を行わなくても文法的に間違いではない」ということを覚えておきましょう。
canvas要素は、JavaScriptを使うことで3Dアニメーションも可能としています。
canvas要素は、JavaScriptを使うことで様々なアニメーションを可能にしています。
3Dも対応しているのですが、非常に長いスクリプトになるので、今回は簡単な動きを実装します。
黒点をキャンバス内ではねさせる。これだけです。
一個だけでは寂しいのでたくさん跳ねさせてみました。
canvas要素は、JavaScriptで制御できるので、プログラムによるアニメーションを実現することも可能です。
ただし、アニメーションを実現する上で注意しなければならないのは、キャンバスに一度書いてしまったグラフィックスはその後動かすことができない、という点です。
例えば、キャンバスをしようしてアナログ時計のアニメーションを作成することを考えて見ましょう。1秒毎に角度を変えて秒針を描画します。
これ自体は大した処理ではありません。問題なのは1秒前に描画した秒針が残り続けることです。
これを避けるためには、新しい秒針を描画すると同時に古い秒針を消す必要があります。
このように、キャンバスを用いたアニメーションを作成する場合は、前に書いたグラフィックスをクリアするという作業が必要になります。
こうなると、パフォーマンスのことを考えてクリアする範囲を絞り込みたいところですが、そうするとクリアする処理を再描画する処理のコードが複雑になるのは避けられません。
そのため、多くの場合は一定間隔毎にキャンバス全体を描画し直すほうが、楽にアニメーションを実現できます。
canvas要素は、グラフィックスの自由な描画が可能な領域を表します。
キャンバスは固定の幅と高さを持ち、その範囲内であれば、丸や四角ばどの図形や線、画像などの2Dグラフィックスを自由に描画することができます。
キャンバスを用いるために必要な準備はごくわずかで、canvasタグをHTML内に記述するだけです。
↑画像ではないです。
<canvas id="canvas1" width="300" height="200"></canvas>
上記では縦200px、横300pxの背景が透明なキャンバスを定義することができました。
このキャンバスに対して、描画を行うにはcanvas要素が持つgetContex()を利用し、描画コンテキストを取得する必要があります。
宮城県仙台市在住のWebデザイナーです。Webデザインからコーディング、SEO対策とかもうWeb制作に関わることはなんでもやっちゃいます。