[CSS]サイズが分からない要素を真ん中に配置するテクニック
width, heightのサイズが分からない要素を天地左右の真ん中に配置するスタイルシートのテクニックを紹介します。 Centering in the Unknown [ad#ad-2] 下記は各ポイントを意訳したものです。 要素のサイズが分かっている場合 要素のサイズが分からない場合 まとめと対応ブラウザ 要素のサイズが分かっている場合 「真ん中に配置するエレメント」と「その親エレメント」両方の高さと幅のサイズが分かっているのであれば、エレメントを真ん中に置くのは簡単です。 「真ん中に配置するエレメント」を「position: fixed;」にし、topとleftを50%、marginのtopとleftをエレメントの半分のサイズでネガティブマージンで配置します。 CSS .centered { position: fixed; top: 50%; left: 50%; margin-t
[CSS]大きい画像を背景にする時のスタイルシートの３つの実装例 | コリス
Web Designer Wallのエントリーから、大きい画像を背景に使用する時のスタイルシートの３つの実装例を紹介します。 How to: CSS Large Background 一枚の画像を使用する方法 demo 実装のポイントは、使用する背景画像（background image）の端と背景色（background color）に同じ色（#f8f7e5）を使用します。 サンプルコード <textarea name="code" class="css" cols="60" rows="5"> body { padding: 0; margin: 0; background: #f8f7e5 url(wdw-bg.jpg) no-repeat center top; width: 100%; display: table; } </textarea>
allintitle:コマンドを使いこなせ、○○件中1位はSEOの指標にならない、 | 海外SEO情報ブログ・メルマガ
今日のトピックは、SEOを正しく理解している人にとっては当たり前の情報です。 しかし、多くのウェブマスターが“勘違い”している可能性が高いと予想できる情報でもあります。 よくSEO関連のサービスや製品のセールスページで、次のようなコピーを見かけますよね。 「Yahoo!で、3,820,000件中、第1位獲得！」 「Googleで、11,500,000件中、第1位獲得！」 これが、すごくもなんともないことはご存知でしょうか？ 検索結果数が多いキーワードで上位表示することは、SEOに成功し競合に打ち勝ったという証明には、決してならないのです。 検索結果数には、検索キーワードが含まれたページがすべて含まれます。 しかも複数キーワードの場合は、どれか１つでも含まれたページもカウントされるかもしれません。 検索に該当するページのすべてが、競合とは限らないのです。 たとえば、「バナナダイエット」という
SlickMap CSS: A Visual Sitemapping Tool for Web Developers | Astuteo™
Slickmap CSS is a simple stylesheet for displaying finished site maps directly from HTML unordered list navigation. It's suitable for most web sites – accommodating up to four levels of page navigation and additional utility links – and can easily be customized to meet your own individual needs, branding, or style preferences. Features and Benefits Eliminates the need for additional softwarePlan s
JPEG画像をより美しく、より軽量に最適化するテクニック
JPEG画像をより美しく、より軽量に最適化するテクニックをSmashingMagazineから紹介します。 Clever JPEG Optimization Techniques 1. 「8ピクセル」のグリッド 2. カラーの最適化 3. JPEG最適化の一般的なTips 1. 「8ピクセル」のグリッド JPEG画像は、あなたが既に知っているように8x8のピクセルのブロックから成り立っています。画質を低くするとよく分かります。 この8x8ピクセルを利用して、JPEG画像を最適化します。 画質10で作成したサンプル 二つの正方形は同じ大きさ（8x8ピクセル）です。左上のはきれいに見え、右下のは汚く見えると思います。 これらは、それぞれ8x8のグリッドに並べたもので、左上はグリッドに揃えたもの、右下はグリッドに揃っていないものです。 保存する際に画像は、8x8ピクセルのブロックに分けられるため
写真をちょっと面白くする構図のくずし方 - ハックルベリーに会いに行く
すでにGW真っ盛りですが、この時期、観光地に行かれて写真を撮る機会なども増えてくるのではないでしょうか。そうした時に、どうせ撮るなら面白くしたい、ちょっとした工夫で、パッと目を引く写真にしたい、そんなことを考えるものです。そうすれば、後で見返した時にも面白いし、友だち見せた時にも楽しんでもらえたり、あるいは企画書やホームページなどのイメージにも使えるかも知れません。 そこでここでは、写真を簡単に面白くする、構図のくずし方をいくつかご紹介します。写真の良し悪しというのは、もちろんさまざまな要素で決まってきますが、その中でも大きいのが構図です。構図の取り方で、写真の印象は大きく違ってきます。そして構図さえ面白ければ、どんな写真でも、それなりに面白く、目を引くものにすることができるのです。ここでは、そんな一目見てパッと目を引く、写真を魅力的にする構図の取り方をご紹介していきます。 構図の基本ご紹
テキストを動的にアンチエイリアスがかった綺麗な画像にする仕組み色々:phpspot開発日誌
Dynamic Text Replacement Solutions | Dezinerfolio テキストを動的にアンチエイリアスがかった綺麗な画像にする仕組みが色々とあるみたいです。 FlashやPHP、CSS、JavaScriptの要素をトリッキーに混ぜ合わせているところも見所です。 P+C DTR PHP+GDで綺麗なテキストを生成し、JavaScriptでbackground-image設定して表示します。 そもそもがテキストになっているので、HTMLもクリーンです。 見え方は以下のように、綺麗なテキスト 生成されたHTMLはh5要素として、次のようになっています。 <h5 style="background-image: url(image.php?text=You%27re+Look%27n+At+It&tag=h5);">You're Look'n At It</h
photoshop- 1ピクセルラインで質感を高めるテクニック - WEBデザイン BLOG
下記の画像はこのサイトのトップページの画像です。両者の違いは、1ピクセルのラインが入っているか、いないかの違いです。左の画像はピクセルラインあり、右側はラインなしです。（画像クリックすると原寸表示されます。） ピクセルラインを入れることで、立体感を演出することができ、さらに質感を高めることができます。 さらに拡大した画像も下記の画像をクリックすることでご覧いただけます。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
今日から始めるデジカメ撮影術 - ITmedia +D LifeStyle
Scriptを使わないCSSエフェクト、Tipsいろいろ - DesignWalker