CSS フレームワークを再認識 CSS フレームワークって、名前だけは知っていましたが、どういうものなのか全く知りませんでした。次の記事を読むまでは。 404 Not Found - ゆーすけべー日記 確かに、これは便利そうですね！ さっそく、CSS フレームワークを導入してみます。 BlueTrip を導入 CSS フレームワークはいろいろありますが、今回は先の記事で紹介されていた BlueTrip を導入してみます。 次のページからアーカイブをダウンロードし、解凍して css ファイルと画像を static フォルダに配置。 BlueTrip CSS Framework | A beautiful and full-featured CSS framework HTML の head 部に、下記を追加。 <link rel="stylesheet" href="css/screen.c
本を買わずに解決するWeb制作の小技 ホームページ作成でちょっとしたことを参考書を買わずに解決する方法をPHP CSS Webデザイン jQuery Flashを中心に便利な技をまとめていきます！現在、長野県長野市の制作会社でWeb作成中！ javascriptやphpを使わずに CSSだけで文字列を省略して「・・・」を付けて表示 させるテクニックを発見 前からできる感じだったが、つい最近知りました。 FirefoxとSafariのCSS対応--ボックスに収まらないコンテンツの表示方法 どうやるかというと text-overflow: ellipsis; を使う。 ellipsis は、はみ出した部分の最後に「・・・」を付け足す。 ちなみに clip は、何もつけません。 text-overflow: ellipsis; だけだと上手くいかないので やり方としては、 横幅(width)、w
スタイルシートでボックスの横幅や高さを指定すると、中身のコンテンツがボックスに収まらない場合がある。収まらないコンテンツをどのように表示するかは、overflowプロパティで指定することが可能だ。今回は、このoverflowプロパティを紹介したい。 また、overflowに関連したoverflow-xやoverflow-y、text-overflowプロパティも紹介する。これらはInternet Explorerが独自拡張したプロパティだったが、CSS 3での採用が進むとともに他のブラウザでもサポートされるようになっている。 overflowプロパティ overflowはボックス内に収まらないコンテンツの表示方法を指定するプロパティだ。CSS 2から定義されているプロパティで、主要なブラウザであるFirefox、Safari、Opera、Internet Explorerはすべて対応してい
スタイルシートの新たなWeb標準として現在策定が進められているCSS3に対して、日本語に対応した禁則、傍点（圏点）、縦書き仕様などの機能が追加されたドラフトが公開されました。 9月28日にPublickeyで公開した記事「電子書籍フォーマット「EPUB」で縦書きとルビのサポート、来年5月には仕様完成の見通し」では、EPUBでの縦書きやルビ、傍点などの仕様を策定中であることを紹介しましたが、EPUBはXHTMLやCSSをベースにした仕様であるため、仕様策定の作業はEPUBとCSSのそれぞれのグループが協力してCSS3に対して機能を追加する方法で行われていました。 これが最終的にCSS3の仕様として策定されれば、Webブラウザ上での禁則処理、傍点、縦書きなどの組み版処理が充実することになります（ルビはまだ作業中ですが）。大げさではなく、世界中のWebブラウザに対して日本の日本語文化に対応した表
深夜に友人とメッセで、画像のバナーを margin や padding 指定がキッチリできるよう横に並べることはできないかな？っていう話になったので、少し考えてみた。 1. imgタグにそのままリンクを貼る 多分、最も簡単な方法。imgタグをアンカータグで直接リンクを貼る。 <p id="banner"> <a href="./" title="page1"><img src="gazo1.gif" width="80" height="19" alt="gazo1" /></a> <a href="./" title="page2"><img src="gazo2.gif" width="80" height="19" alt="gazo2" /></a> <a href="./" title="page3"><img src="gazo3.gif" width="80" height=
Opera で DOM Mutation Event を使用するコードを追記しました。 まとめを追加しました。 Opera パート2に取得できないケースが見つかったため、パート3 を追加しました。 rhino.jpg(幅:300px, 高さ:227px) を、 <img id="rhino" src="rhino.jpg" width="100" height="75" /> と、100 x 75 で表示している場合を例に、画像本来のサイズを取得する方法をご紹介します。 Firefox, Safari, Google Chrome なら image.naturalWidth と image.naturalHeight を利用します。 image.naturalWidth と image.naturalHeight の初期値は 0 です。画像の読み込みが完了した時点で適切な値に更新されます。
[読了時間:2分] トップページで強制的にFlashムービーを再生させる最低の手法を筆頭にFlashコンテンツがどんどん減り、HTML5を中心とした技術に取って代わりつつある。現状では「FlashのほうがCPU能力を消費しにくい」というレポートがあるなど全面的に優位性があるわけではないが、このデモのようにマシンパワーを浪費しつつも、今まではできないとされていた表現の壁を崩しつつある。 冒頭のスナップショットは、最近リメイクされた映画「トロン レガシー」の旧作版「トロン」（1982年製作）の映像をリアルタイム画像処理にかけているところ。大層なサーバー群で演算→ストリーミングで配信しているのではなく、再生している端末上でHTML5ビデオを変換してCANVAS要素に表示させている。 このHTML5ビデオは1秒あたり30フレームを表現しており、筆者のMac Book (Core2Duo 2GHz、
We can’t change history, but we can change the future. Be nice to each other. @robertnyman Published on Tuesday, March 16, 2010 One of the most common CSS effects is using shadows in various ways. Before, we needed to resort to images, but now we can offer this to all major web browser with CSS! Web browser support Believe me or not, but all of these web browsers we can offer shadows with CSS: Fir
Dion Almaer みなさんこんにちは。このディスカッションでは、ここにいるBen Galbraithと、私Dion Almaerで司会をします。まずパネリストを紹介しましょう。 左から、司会のDion AlmaerとBen Galbraith。Tantek Çelik、Joe Hewitt、Elaine Wherry、Doug Crockford、Thomas Sha、Ryan Dahl 私とBenのとなりにいるのが、Tantek Çelik（テンテク・チェリック）。IE 5.5の開発に携わり、その後Web標準に関する活動もしてきました。 Joe Hewitt（ジョー・ヒューイット）はFacebookに所属していますが、Firebugの開発者でもあり、Facebook for iOSの開発もしています。もともとはNetscapeからMozillaになるときのFirefoxのオリジナル
最近のトレンドの一つでもある背景画像をブラウザの枠いっぱいに表示する実装方法はたくさんあります。その中から、理にかなった最新のテクニックや、より多くのブラウザに対応させるテクニックを紹介します。 Perfect Full Page Background Image [ad#ad-2] 下記は各ポイントを意訳したものです。 各デモはページ下部のDownload Files」で、まとめてダウンロードできます。 背景画像をブラウザの枠いっぱいに表示するテクニックとは CSS3を使ったテクニック CSSだけで実装するテクニック：その1 CSSだけで実装するテクニック：その2 jQueryを使ったテクニック 背景画像をブラウザの枠いっぱいに表示するテクニックとは 前提として、下記のポイントが挙げられます。 画像でページをいっぱいにします。 空きは無いようにします。 画像のサイズは必要があれば調整しま
下記の「旧FC2無料ホームページスペース」は2025年06月30日をもちましてサービスを終了いたしました。 FC2WEB http://www.fc2web.com GOOSIDE http://www.gooside.com k-free.net http://www.k-free.net Easter http://www.easter.ne.jp 55 STREET http://www.55street.net ZERO_CITY.com http://www.zero-city.com OJIJI.NET http://www.ojiji.net K-Server http://www.k-server.org Zero-yen.com http://www.zero-yen.com KTNET http://www.kt.fc2.com Finito http://www.fi
先ず、'min-height'の値が'max-height'の値よりも大きい場合、'max-height'の値を'min-height'と同じ値に設定し直します。 次に、水平方向に値として[auto]を使用した場合を元にして'height'の値を求めます。 結果、'height'の値が'max-height'の値より大きい場合、'height'の値として'max-height'の値を用いて、再度計算します。 結果、'height'の値が'min-height'の値より小さい場合、'height'の値として'min-height'の値を用いて、再度計算します。 関連プロパティ height min-height max-height
前回に引き続き、今回はfloatプロパティを利用した実用度の高いボックスの配置の実現方法を解説します。 練習用HTML floatプロパティを利用したレイアウトの練習に複雑なHTMLを用意する必要はありません。ボックスの配置方法さえ理解してしまえば、その手法はあらゆる要素に適用でき、また、配置された各ボックスがどのような内容を持とうともレイアウトには影響しないからです。 サンプルとなるHTMLは以下の通りです。 HTMLソース <div id="box-A"> <div id="box-B"> B </div> <div id="box-C"> C </div> <div id="box-D"> D </div> </div> CSSを個別に指定できるように、各要素にはid（#box-AからD）を振りました。解説ではid名ではなく、単にボックスA, ボックスB...と呼ばせていただきます。
こんにちは、市瀬裕哉と申します。『実践 Web Standards Design』では、floatプロパティとpositionプロパティを利用したレイアウトについての解説を担当しています。私は専門学校にてWebデザインを講義する立場にいるため、書籍に掲載したCSSレイアウトの解説は、私が講義していく中で得られた、生徒達からのさまざまなフィードバックを反映した内容になっています。書籍の発刊からはCSSレイアウトの習得を短期間で実現するための講義に必要な教科書として、実際に現場で利用しています。 本連載（第3回、第4回）では、floatプロパティを利用したレイアウト方法を学習する中で、必要なポイントと基本的なレイアウトの実現方法、その応用までを解説します。 1．ボックスに置き換えて考える CSSで装飾を行う際は、floatプロパティを使う、使わないに限らず、HTML文書の各要素が生成する「ボ
vertical-alignの使い方でline-heightでの垂直表示は説明しましたが、あの方法ですと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要素の開始位置を中央に設定します。 その後にmarginを使いp要素の中央とdiv要素の中央が同じ位置になるように変更します。 ポ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
