How To: Resizeable Background Image - CSS-Tricks Is there a way to make a background image resizeable? CSSで背景画像をリサイズするテクニック デモサイトを見ると、驚くべきことに、背景画像のサイズがビローンと伸びて表示されます。 記事中では3種類の手法について書かれていますが、JavaScriptなしで、CSSだけで実現する3つ目の方法がスマートです。 background-image ではなく、画像に次のようなCSSを宛てることで実現しているみたい。 #img.source-image { width: 100%; position: absolute; top: 0; left: 0; } body { overflow: hidden; } 背景が伸びるというと、ちょっと珍しいので
マイクロソフトの「IE 11」で旧版IEを動かす--互換モード「Enterprise Mode」 米国時間1月12日以降は、サポートされる各Windows OS向けの最新版IEだけが技術サポートを受けられることになるが、旧バージョンのIE向けに作成されたイントラネットのウェブサイトや社内アプリを閲覧する方法はある。 2016-01-13 11:12:00 注目される「WebGL」--プロが示すHTML5でのフロントエンド演出の勘所 W3Cから正式に勧告されたHTML5は、標準技術として普及が予想されている。あるセミナーの基調講演からHTML5がウェブコンテンツ制作の世界をどう変容させるかを見ていく。 2015-01-26 16:59:00
Steve Jobs氏のプレゼンテーションと他のプレゼンテーションを比べることは不可能だ。彼は、独自の境地にいる。Appleの最高経営責任者(CEO)である彼は、現在のビジネス界でもっともカリスマ性のある宣伝マンだ。彼のプレゼンテーションは、顧客や従業員、そしてコンピュータ業界全体をエバンジェリストに変えてしまう、視覚的な物語りの素晴らしい実演だ。AppleのウェブサイトにはJobs氏の基調講演の動画があり、優れた学習ツールとなる。 2007年1月、Jobs氏はiPhoneを紹介するプレゼンテーションを行ったが、これはおそらく彼の最高のプレゼンテーションだ。この講演では、彼やその他の、人を奮い立たせることのできるリーダーが使う、聴衆を引き込むテクニックが示されている。読者もこのテクニックを次のプレゼンテーションで使うことができる。 ステップ1:自分の熱意に火を付ける ゴール:自分の熱意によ
未修正バグ一覧 以下の一覧は、IE7においても未修正のバグである。IE6以下でも同じ問題が発生する。 バグ 関連タグ/プロパティ 症状 リンク インライン要素の罫線や余白が切れる問題 border / padding インライン要素に罫線やpaddingによる余白を指定し、親要素に横幅や高さを指定した場合、罫線や余白の上下が切れる。 解説/問題回避: beta2 03-02 垂直方向の位置揃えの問題 vertical-align vertical-alignプロパティで「top」「bottom」と指定しても、「text-top」「text-bottom」と同じ表示になる。 解説: beta2 03-04 / 問題回避: 正式版 03-03 横幅や高さの指定で上下マージンが消える問題 margin-top、margin-bottom 親要素に横幅や高さを指定すると、デフォルトスタイルシートで
今日ちょっとひっかかったIE7のCSSバグをメモしておきます。 どうやらborder付きのbox内に2重に入れ子にしたfloatさせたboxの親要素(ややこしい!)のmarginが効かなくなるようです。 口で言い表しづらいので、以下のソースを見てください。 XHTML <div id="page"> <div id="content"> <ul> <li id="hoge">hoge</li> <li id="huga">huga</li> </ul> </div> </div> こうなっている時、#contentにborderが設定されると、UL要素のmarginが効かなくなります。 CSSサンプルは以下の通り。 CSS * { list-style: none; margin: 0; padding: 0; line-height: 1; } div#page { width: 350
IE6で、floatで指定した値と同じ方向にmarginの指定をすると、指定値の倍程度になってしまうっていう有名なバグ。 その対策として、marginの代わりにpaddingを使うとか、親要素でpaddingを取るとかあったりしますけど、一番手っ取り早い感じで、問題が無さそうなdisplay: inline;を指定する方法がありますよね。えぇ。 何となく他のブラウザに影響ないの!?って思ってしまうかもですが、 こういう矛盾しちゃいそうな指定がされた時はどーしたらええの?っていうのがちゃんと仕様で決まってるので仕様通りに動いてくれるブラウザさんなら問題ないわけです。 そうなんですよ。仕様通りにね、動いてくれるブラウザさんならね。 仕様通りに... そこで登場するのが、IE7。 IE6に比べればだいぶ良くなったもののやっぱり色々問題があるIE7。 そんなIE7さん、こんなトコロにも影響があった
モニターの輝度を適切な値まで下げて使用すると,作業後の目の疲労度が低下する——。ナナオが行った長時間のパソコン作業による眼精疲労に関する調査で,こんな結果が出た。パソコンの使用時間の増加に加え,液晶モニターの高輝度化もパソコン作業による眼精疲労の要因になっていると仮定し,独自の調査を行ったもの。モニター輝度の変更,作業中に休憩やVDT指導を加えた場合など,モニターの使用条件を変えた3つの場合を設定し,目の疲労度を測る実験を行った。なお,同社の液晶モニターの輝度は,7年前と比べて1.7倍になっているという。 目の疲労度の測定には,ものがはっきり見える一番近い距離(調節近点距離)を用いた。一般に目が疲れると,ピント調節力の低下により,調節近点距離が遠くなるためである。1日のパソコンの作業前と作業後の調節近点距離の延長率を疲労度の尺度とした。調査におけるパソコンの作業には,同社の液晶モニター「F
茨城県出身。1980年生まれ。専修大学経営学部卒業後,1年弱のニート生活を経て販売代理店の営業職を経験後,有限会社アイエイトワンに入社。主に,Webディレクション,マークアップを務める傍ら,講師活動・執筆活動を行う。allWebクリエイター塾ではCSS講習の講師。著書に「XHTML&CSSデザイン |基本原則,これだけ。」(共著,MdN発行)がある。 弊社は土日が完全休日なのではありますが,まぁ,それはそれで,休日も見事にガッツリとマークアップしているわけです。今回は,以前に行っていた案件(マークアップのみの案件)があまりにもヒドイのでは?ということで,「マークアップする人から見た,こんなディレクター(案件の進め方)は嫌だ!」ということを書き連ねて行きたいと思います。 1. サイトマップが見づらい クライアント様にお見せするという理由から,サイトマップをとてもビジュアル豊かにされるのは良い
MacBook Air 11インチ欲しい! やっぱSSDの起動はハンパじゃないっすよねー。 core i5のMac Book Proよりsafariの起動が早くてビビりました。 というわけで欲しいです! 今日のお疲れ!BGM♪ Moon Light Drive/The Yellow Monkey HTML5のロゴが発表されましたね! なぜか集中線つきで、「デデーン!」っていう感じ全開の。 で、この機会に他の言語(フレームワーク?)のロゴも集めてみました。 探してみたら意外と見つからなかったり、「これはロゴか・・・・?」というものも あったので、もし間違ってたら指摘もらえると嬉しいです。 ・HTML5 デデーン! ・JAVA よく見ます。 こちらはマスコットのDUKE。 ・PHP シンプル。 ・.NET なんかSilverlightとかぶりますね。 ちなみにSilverlightはこちら。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く