overflowを使ってfloatの問題を解決するスタイルシートのテクニック | コリス
フロートした子要素を内包するコンテナが高さを拡張しない問題を解決するためのテクニックはさまざまなものがあります。 その中から、overflowを使った方法とその際に生じる問題点とその解決方法を紹介します。 CSS: Clearing Floats with Overflow [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに Demo 1: overflow:auto; Demo 2: overflow:hidden; overflowを使って生じる問題点と解決方法 はじめに フロートベースのレイアウトをする際、ラッパーとなるコンテナがフロートしている子要素に対して高さを拡張しないことは、普通によくある問題です。 デモ：１ フロートをクリアする要素を配置して解消した例 しかし、この問題を解決するために、「overflow」プロパティでもできることを知っていましたか？ これは
[SEO]デザイナー・コンテンツライターのためのSEOのテクニック
SEO担当者はもとより、デザイナー、コンテンツライターのための、サイトのユーザーエクスペリエンスも強化するSEOのテクニックを紹介します。 User-Friendly SEO [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに 1. 見出しの最初にプライマリキーワードを 2. キーワードのために太字のテキストを 3. リストの活用 4. 重要なリンクにはキーワードを 5. タイトルの始めにプライマリキーワードを 6. 内部リンクの強化 7. イメージの最適化 多くのキーワードが必要ですか？ デザイナーとSEO担当者とライターのチームワーク はじめに 若干のデザイナーが、そして多くのコンテンツライターが、ウェブの効果的な戦略においてSEOを必要悪だと見なします。 しかしながら、SEOを適切に行えば、それは減るよりむしろ、ユーザーエクスペリエンスの強化をはかることができます。こ
[CSS]今、そして近い将来に使用するであろうスタイルシートのテクニック集
CSS3のテクニックはさまざまなものがありますが、その中からまさに今、そして次のプロジェクトに使用したくなるテクニックを紹介します。 The Bright (Near) Future of CSS [ad#ad-2] 下記は各ポイントをピックアップして意訳したものです。 はじめに Styling HTML5 Classing like HTML5 Media Queries Styling Occasional Children Styling Occasional Columns RGB Alpha Color HSL and HSL Alpha Color Shadowy Styles Multiple Backgrounds 2D Transforms はじめに ここでフォーカスするのは、今、そして近い将来に使用するであろうスタイリングのテクニックです。HTML5の要素のスタイリング
写真画像をかっこいいモノクロにするPhotoshopのテクニック集 | コリス
Photoshop, Photoshop Elementsを使用してカラーの写真画像をモノクロにするテクニックはさまざまなものがあります。その代表的なテクニックとそれぞれの利点・欠点を紹介します。 元にした画像：Chase the sun 下記は各ポイントを意訳したものです。 はじめに 1. 調整レイヤー：白黒 2. モード：グレースケール 3. 調整レイヤー：色相・彩度 4. モード：Labカラー 5. 調整レイヤー：グラデーションマップ 6. 調整レイヤー：チャンネルミキサー 7. Photoshop Elements：モノクロバリエーション 8. 調整レイヤー：色相・彩度x2 9. 調整レイヤー：白黒（カラースライダー） はじめに モノクロの写真は、ファッション雑誌をはじめ、Flickrのようなソーシャルウェブサイトでも非常に人気の高いジャンルです。デジタルが到来したことで、一つ重要
[CSS]CSSスプライトの利点と潜在的な問題点、そして解決方法
CSSのテクニックに中でも最も使用されている一つ、CSSスプライトの利点と潜在的な問題点、そしてその解決方法を紹介します。 Transparent CSS Sprites デモ [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに CSSスプライトの利点と潜在的な問題点 CSSスプライトの潜在的な問題の解決方法 解決方法のデモ おわりに はじめに 最近のフロントエンドの開発に必要不可欠なテクニックの一つにCSSスプライトがあります。このテクニックはA List Apartの記事「CSS Sprites」によって普及されたものです。 CSSスプライトは一度理解したら本当にシンプルなテクニックで、あらゆる方法に応用することができます。一般的に利用されるのはナビゲーションで、他にもボタンや見出しにも使用されています。 スプライトは複数のイメージを一つのファイルにマージして使用します
購買意欲をコントロールするサービス・商品の価格一覧表を作成する7つのテクニック
ウェブサービスの価格一覧表をサンプルにし、ユーザーの購買意欲をコントロールする価格一覧表を作成するテクニックを紹介します。 価格の一覧表を見るユーザーの一番の目的は、価格を知ることです。しかしながら、価格を強調しすぎて、お金を使うということを意識させすぎないでください。苦労して手に入れたお金を使っているように感じると、ユーザーはより使わないように思ってしまいます。 価格のデザインはソフトにし、それ自体の特徴やベネフィットにフォーカスをあてるようにします。 ユーザーがどの商品を選択するか決めている時に、あなたはその決め手として価格にフォーカスを合わせることを望んでいますか？ それとも特徴やベネフィットにフォーカスを合わせてほしいですか？ もし、ユーザーが価格にフォーカスを合わせるのであれば、それは最も安いものに決めるでしょう。しかし、特徴やベネフィットにフォーカスを合わせるのであれば、ユーザ
ウェブデザイナーのための実用的なデザインとコーディングテクニック集
Five Useful Design Techniques and Coding Solutions For Web Designers [ad#ad-2] 下記は各ポイントを意訳したものです。 PHPはWordPressでのものとなっています。 1. 複数の項目がある棒グラフのエフェクト 2. ホバー時に追加情報を表示 3. カテゴリごとに異なるカラーを適用 4. ちょっと面白い画像のキャプション 5. ウェブのための印刷風デザイン おわりに -developersではなく、designers 1. 複数の項目がある棒グラフのエフェクト 下記のサイトで使用している棒グラフでは、上：タグの種類と数、下：コメントのついた記事と数、をそれぞれ素晴らしいエフェクトで実装しています。 こういった数値化されたデータは、ユーザーに対して有用なコンテンツの手がかりを提供し、ユーザビリティを改善することに
伝えたいことを伝えるための８つのテクニック - もっこもこっ
「どうしたら、複数の人に伝えたいことを伝えられるか」 そのことについて考えていること多いです。 今日は、これまで考えてきたことを整理するために書いてみたいと思います。 伝えたいことを伝えるための８つのテクニック １．一文をできるだけ短くしよう。 ２．直球ストレートな文にしよう。 ３．箇条書きで書いてみよう。 ４．順序だてよう。 ５．具体例をあげよう。 ６．専門用語に気をつけよう。 ７．ゆっくり話そう。 ８．改行しよう。 １．一文をできるだけ短くしよう。 口頭、文書、どちらも一文は短くした方が伝わるように思います。 文章の長さ メリット デメリット 長文 読みごたえ有 読むのに疲れる。読む気をなくす人もいる。途中で読むのをやめてしまう可能性が高い。読み違える可能性も高い。 短文 読みやすい 文をいくつも並べないといけない。幼稚な文章に見えてしまう。 とにかく伝えたいと思うなら、一文は短く、で
ケータイサイトのtableタグの特徴と、5つのデザイン例＆ソース : LINE Corporation ディレクターブログ
※文中のケータイ livedoorのPVに誤りがあり、修正いたしました (2010/9/22) こんにちは、『プチペット』を担当している吉沢です。 Webサービスのケータイ対応がやっと当たり前になってきたかと思ったら、今度はスマートフォンの対応と、モバイル業界の時の流れはものすごく速いですね。 そんな中、ケータイは新しい端末のシェアが増えていく度に、サイトで表現できる自由度が高くなり、単に作るだけではなく、デザインで差をつける時代が来ています。 それが読み取れる世の中の動きとして、たとえばモバイルデザインアーカイブさんは、年鑑が出るくらい書籍・サイト共に人気ですよね。また、ちょっと前に発売された書籍『ケータイサイト解体新書 デザインパターンから理解する実装テクニック』は、いろいろなデザインパターンからHTMLを引けるため、デザインをする上でとても参考になります。 携帯サイト年鑑2010 著
[CSS]条件付きコメントを使用した際にレンダリングを早くするテクニック
IE用に条件付きコメントを使用してスタイルシートを配置した際に、ブラウザのレンダリングをすこし早くするテクニックを紹介します。 ※下記の画像はクリックで拡大 Conditional comments block downloads 上：test 1の測定結果（適用前：CSSの後に読み込み開始） 下：test 2の測定結果（適用後：CSSと並列で読み込み） [ad#ad-2] 下記は上記ページを参考にしたものです。 はじめに スタイルシートの構成 test 1：ごく普通に条件付きコメントを使用 test 2：条件付きコメント使用時に並列読み込みを可能にする その他の解決方法とまとめ はじめに 条件付きコメントを使用しない場合は通常、CSSファイルと次のファイルが並列で読み込まれます。 条件付きコメントを使用した場合 詳しくは後述のtest 1：ごく普通に条件付きコメントを使用を参照 これを並
floatを使わずにinline-blockで横並びにする方法｜web bibo
/* CSS（スタイルシート）に関する知識・テクニックなどの備忘録 */ 文字サイズ 大 中 小 現在のページ： HOME » CSS レイアウト・ボックス » floatを使わずにinline-blockで横並びにする方法 floatを使ってボックスを横並びにする場合、その中で高さが違うボックスが混ぜっていると、そこでレイアウトが崩れてしまいます。ブログやCMSなど自動的にボックスを生成するとき、高さの違うボックスがでてくる場合があるので、この方法を知っておくと便利だと思います。 floatで横並びにするとレイアウトが崩れる場合がある 先述しましたが、floatで横並びにすると高さが違うボックスが混ぜっている場合、レイアウトが崩れてしまいます。 <div class="wrap"> <div class="box">float 1</div> <div class
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
[CSS]実用的なものをはじめ、ちょっと使ってみたくなるCSS3の14のテクニック
お金について心得えておくべき5つのこと ：投資十八番 
IDEA * IDEA
IDEA * IDEA