ボックスレイアウトで簡単リキッドレイアウト - builder by ZDNet Japan
前回の「CSS 3における新しいレイアウト手法：ボックスレイアウト」に引き続き、「display: box」と指定して実現するボックスレイアウトの特徴を見ていきたい。 今回は、ボックスレイアウトでリキッドレイアウトを作成する方法と、段組みの段の表示順序を指定する方法を紹介する。これまでのfloatやpositionプロパティを使ったレイアウトと比較すると、簡単に設定できるのが特徴だ。 なお、ボックスレイアウトはCSS 3の「Advanced Layout Module」という草案で提案されている新しいレイアウト手法で、現在のところFirefoxとSafari、Google Chromeが対応している。 リキッドレイアウトで段組みを作成する ブラウザウィンドウの大きさに合わせて横幅が変わるレイアウトを「リキッドレイアウト」と呼ぶ。これまでのようにfloatプロパティを使ったレイアウトではネガ
CSS 3のセレクタ「:target」でタブメニューをつくる - builder by ZDNet Japan
CSS 3のセレクタ「:target」を利用すれば、リンクをタブメニューの形で表示して、1ページ内に記述したコンテンツを切り替えて表示するように指定することが可能だ。HTMLとCSSだけでタブメニューを作成する場合、これまではコンテンツごとにページをわけて作成する必要があったため、1ページで実現できるメリットは大きいと言える。 ここでは、positionプロパティを指定して「テキスト1」から「テキスト5」を同じ位置に重ねて表示している。その上で、リンクをクリックしてターゲットとして表示されたときにだけz-indexプロパティを適用して、手前に表示するように設定した。 div{ position: absolute; top: 17px; left: 20px; } #text1:target{ z-index: 2; } #text2:target{ z-index: 2; } #text
CSS 3における新しいレイアウト手法：ボックスレイアウト - builder by ZDNet Japan
ウェブページのレイアウトでは、ヘッダーやサイドバー、コンテンツなどをどのように配置するかがポイントとなる。現在、配置のコントロールにはfloatやpositionプロパティを利用するのが一般的だが、CSS 3の「Advanced Layout Module」という草案では、新しいレイアウト手法が提案されている。 このレイアウト手法は「行と列のレイアウト」や「ボックスレイアウト」と呼ばれ、FirefoxとSafari、Google Chromeが対応している。 ボックスレイアウトの機能を利用すれば、これまでのfloatやpositionプロパティでは困難だった「段の高さを揃えた段組み」なども簡単に作成できるようになる。 そこで今回は、floatプロパティとボックスレイアウトを利用した段組みを比較していく。また、CSS 3で段組みのレイアウトを実現する「Multi Column」との違いも確認
初めてブログを訪問したときに「これがあると嬉しいな」と思う10の要素 - 山田井ユウキ - builder by ZDNet Japan
builder読者の皆さん、こんにちは。 金曜日担当の山田井ユウキです。 普段からブログを色々と渡り歩いているのですが、そんな中で「初めてブログを訪問したときにこれがあると嬉しいな」と思う要素を今回まとめてみようかなと思います。全部で10個あります。 1.過去に人気のあった記事の一覧 個人的に一番ほしいのがこれ。 過去の人気記事をサイドバーやヘッダーに出しておいてくれると、初めてブログを訪問したときに何を読めばいいのかわかりやすいので助かります。 これがないとそのときの最新記事を読むしかないのですが、それでブログの印象が決まるのが不本意だという場合もあるでしょうし。 何でも初見が重要ですので、まず一番美味しいところを教えてほしいなと思います。 自分で人気記事一覧を作るのが面倒なら、はてなブックマークのウィジェットを貼り付けておくと便利です。 2.ブロガーのある程度詳細なプロフィール いわゆ
HTMLをDBみたいに使えるスゴイライブラリ『htmlSql』を CakePHPで使う - h2ospace - builder by ZDNet Japan
APIやRSSなどを提供しているサイトは、情報を簡単に扱うことができますが、例えば Yahoo!の検索結果とか、mixiのニュースとか、あるサイトの一部を取り出したいことってよくあります。（とはいえ、著作権違反には注意 そんな時、PHPのライブラリである「htmlSql」を利用すると便利。このライブラリに、ファイルでもURLでも文字列でも、HTMLで作られたものなら何でも与えると、解析して取り出しやすくしてくれます。しかも、その取り出し方はSQL！ 例えば、「id属性が’test’の p要素の内容を取り出したい」という場合には、次のようなSQLを使います。 SELECT text FROM p WHERE $id=="test" 超パワフル。ということで、これを CakePHPで利用するためのテクニック。 まずは、ダウンロードしたファイルの中から次のファイルを「app/vendors」フォ
ネット文化圏の勢力図を作ってみた。 - ネットナナメ読み - 山田井ユウキ - builder by ZDNet Japan
※本記事は、11/29 13：18に最新の追記・修正が入っています。 builder読者の皆さん、こんにちは。 職場で隣のデスクの先輩に「僕は今年のクリスマスも一人寂しくTVを見ることになりそうです」と言ったら、「俺は一人でイルミネーションを見に行く」と呟かれてしまった山田井ユウキです。 この先輩には一生勝てないと思います。 そんなことはさておき。 今回もネット黎明期を支えた個人サイトについて更新しようかと思ったのですが、急きょ別の企画を思いついたのでそっちを書くことにしますね。 題して、 です。 「ネット文化圏」って何よ？ という方のためにちょこっと説明すると、広大なネット世界には数多くの文化圏がそれこそ宇宙の星々のごとく点在しており、それぞれが独自のカルチャーやコミュニティを築いて発展しています。 たとえばmixiや2ch、ニコニコ動画など……。 そういった、ネットに大きな影響を与えて
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
