floatを解除する手法のclearfix と 次世代のレイアウトの話
floatを解除する手法のclearfix と 次世代のレイアウトの話 2013-06-20 / 2013-06-30 2011年にclearfixについて記事を書きましたが、Micro clearfixなどの新しい手法も出てきました。 記事を書いてから2年が経ち、色々思うところも出てきたので、改めてclearfixについて書きます。 floatを解除するには CSSでレイアウトの構築を行う際に、よくfloatプロパティが用いられます。 しかしfloatを使用すると、「親の背景が表示されない」「下の段のレイアウトが崩れる」などのトラブルが起こりやすくなります。 floatプロパティの特性 親の背景が表示されない理由は、floatプロパティを指定しているボックスが浮動化し、通常のボックスのフローから外されることが原因です。 通常フローから外されたボックスは、親のボックスの高さを認識できなくな
CSS： marginの正しい理解 - kojika17
toggle()や変数、calc、:matchなど、今までにないCSSプロパティ、セレクタが提案・実装されて、CSS3, CSS4も楽しくなってきています。 border-radiusや、box-shadowなども、古いAndroidブラウザ以外なら、prefixなしで使える状況も増えてきました。 最新技術は、これから必要になってくるかもしれませんが、基本も大切です。 float や position など、CSSコーディングを悩ませるタネはいくつもありますが、今回はその中でも私がCSSで一番難しいと思う margin について書きます。 「marginはバグが多い」という声をたまに聞きます。 しかし話を聞いてみると、正常な動作をバグと間違って認識しているケースもあります。 marginを正しく理解することによって、効率的なレイアウトを構築できますので、基本的な内容ですが、読んで頂ければ幸
よく分からずにトーンカーブを使っている人に。 - kojika17
画像の色調補正する時、何を使いますか？ 私の場合、基本的な画像補正はトーンカーブ1つでほとんど済ませてしまいます。 トーンカーブは使い方が分かれば、簡易的に明度、色調、コントラストなどを補正できる強力なツールになります。 Photoshopベースで紹介しますが、FireworksやGIMPでもトーンカーブを扱えますので、参考になれば幸いです。 トーンカーブのデモで使用する画像は、フリーで配布されているPAKUTASOさんから写真をお借りして、説明します。 トーンカーブ基本 縦軸と横軸は、0から255まで階調を表しています。 画像モードがRGBの場合、縦軸は上から下に向かって暗くなり、横軸は左から右に明るくなります。 横軸が入力、縦軸が出力を表します。もっと噛み砕くと、横軸が元画像の階調、縦軸が補正後の階調です。 斜めに走っている線にはいくつも点が打て、曲線や直角にしたりできます。 階調の出
Webデザイナーでもできる、サイトのパフォーマンスをあげる5つの方法
Webデザイナーでもできる、サイトのパフォーマンスをあげる5つの方法 2011-08-28 Webデザイナーが、Webサイトのパフォーマンスを重視する傾向はあまり無いように感じますが重要なことです。 Googleでは、0.5秒遅くなると、検索数が20%減少する amazonでは、0.1秒遅くなると、売り上げが1%減少する という報告もあるようです。Webサイトのパフォーマンスはコンバージョンにも影響する大切な部分。 今回はWebサイトのパフォーマンスを上げる方法を取り上げます。 パフォーマンスアップの前に 応答時間の限界 0.1秒までなら、結果はコンピューターではなく、ユーザーによって引き起こされたように感じる。 1秒までなら、"遅れている"と感じるが、ユーザーの思考は途切れずに、自由に動いていると感じる。 10秒までになると、ユーザーがコンピューターに振り回されている気持ちになり、ストレ
デザインの基礎、黄金比から大和比、第2黄金比まで - kojika17
よく黄金比という言葉を聞いたりしますが、実際にどういうものかわかっていなかったり、 デザインの当てはめ方が分からなかったりすることが多いので、簡単にまとめてみました。 貴金属比 nの場所に自然数が入り、第1貴金属比を黄金比、第2貴金属比を白銀比、第3貴金属比を青銅比といいます。 よく聞く黄金比は、貴金属比の１つです。 近似値 1.6180(約5:8) CSSで黄金比を見る 伝承では古代ギリシアから使われ始めたと言われています。 パルテノン神殿、モナリザなど数多くの建築物や美術、アートなどに使用されています。 白銀比 白銀比には、以下の2つがあります。 1:1+√2 の第2貴金属比に含まれる白銀比 1:√2 の日本で古くから使用されている白銀比(大和比) どちらも白銀比と呼ばれることが多いので、紛らわしいです。 白銀比(第2貴金属比) 近似値 1:2.414(約5:12) CSSで白銀比を見
最適な画像の書き出しは、JPG, GIF, PNG、どれを使うべきか
最適な画像の書き出しは、JPG, GIF, PNG、どれを使うべきか 2011-07-26 デザインされたものをコーディングする上で、画像はサイトのパフォーマンスにも影響する重要な要素の1つです。 画像形式には、jpg, gif, pngなど種類があり、それぞれの特性を理解した上で選定できているでしょうか？ 画像形式についてまとめてみます。 画像の種類 JPEG インターネットでよく使用される画像形式で、静止画像を圧縮する方法の1つです。 ブロック単位で圧縮変換を行うため、圧縮率を上げるとブロックノイズというノイズが生じます。 特に小さくすると赤の部分でノイズが発生しやすい。 IE6～8(IE9は未確認)において#02050aというバグがあり、 JPEG画像でopacityを使用すると#02050aの部分が透過jpgになるバグがあります。 上記の点を注意する必要がありますが、1670万色ま
IE6などのクロスブラウザに強くなる、22のHTML+CSSコーディングの基礎
IE6などのクロスブラウザに強くなる、22のHTML+CSSコーディングの基礎 2011-06-04 Twitterなどを見てると、 「IE6がー！」とか 「IE6,7,8,9、Firefox、webkit系、Operaで同じレイアウトにするの大変」などのツイートをたまに見るので、クロスブラウザでも差が出にくく、効率の良くなるコーディングの基礎を紹介します。 気をつけるHTMLの記述方法 HTMLの記述方法を間違えていると、ブラウザCSSの解釈が変わってきます。 以下のようなことは基本的なことですが大切な事です。 DOCTYPEを書く。 HTMLの先頭にDOCTYPEを入れるようにして下さい。 DOCTYPEがないと、ブラウザ間での誤差が起こりやすい状態になります。 DOCTYPE スイッチについてのまとめと一覧表 (HTML 5 や IE 8 Beta 2 のモードスイッチなどの情報も含
Webデザイナーが知っておく、DTPの基礎知識
Webデザイナーが知っておく、DTPの基礎知識 2011-05-08 CMYK RGB(加法混色)で表現される色を、塗料や染料では全ての色を再現できないため、印刷する場合はCMYK(減法混色)ににする必要があります。 CMYKは、シアン（Cyan）、マゼンタ（Magenta）、イエロー（Yellow）、キー・プレート（Key Plate）から成っており、シアン、マゼンタ、イエローの三色で理論上、黒も表現できますが、実際は強く表現されないためブラックを補ったCMYKが使用されています。 しかしCMYKの黒でも本当の黒には見えません。 そこで他の色も混ぜて、本当の黒に近づけることをリッチブラックといいます。 印刷会社によっては推奨されているリッチブラックの濃度もありますが、C30%＋M20%＋Y20%＋K100%で問題ないと思います。 入稿時にはCMYKの色指定を、5%刻みで指定する様にするよ
IDとclassを使わないで、HTML5とCSS3でコーディングしてみた。
IDとclassを使わないで、HTML5とCSS3でコーディングしてみた。 2011-05-02 Webサイトをコーディングする時に、IDとclassを考えるのが面倒臭くなったので、IDとclassを使わないでコーディングしてみました。 シンプルなサイトなら簡単でつまらないので、IDとclassを使っても難しそうなデザインにしています。 今回もJavaScriptは一切、使用していません。 完成したサイト ID, classなしで組んだサイトを見る。 サイトでやってみたHTML5 HTML5では、html, head, bodyタグを完全に省略しても構わないとされています。 省略してもDOMツリー上に存在しているので、 body {background:#f00;} というCSSの記述も認識してくれました。 サイトで使用したCSS, CSS3の簡単なまとめ Child Selector 結
float解除の決定版。clearfixを考えたら、進化した。
現在この中でclearfixでよく使用されているプロパティは display:inline-block; height:1%(min-height:1%) zoom:1; でも良く考えたら、全て微妙です。 zoom:1はIEの独自仕様ですし、heightを使用する場合は、IE6,7に対応させるために2つのプロパティが必要です。 display:inline-blockもボックスの要素を変形させることになります。 hasLayoutのスイッチを見た時に、一番理に適ったプロパティはwidthかなと思いました。 子要素を囲む要素として、divやulなどデフォルトCSSがdisplay:blockのプロパティのものが多く、display:blockのプロパティの場合、width:100%で問題ないと思ったからです。 現在のブラウザ状況に適したclearfix 上記を踏まえ見直したclearfixが
HTML5のarticleとsectionの違いを書いてみた - kojika17
article要素とsection要素の違いについては、様々なブログなどで書かれている内容だとは思います。 ただ「もう少し内容があったら、他の人もわかりやすいのにな」とよく思っていたので、策定中止になったXHTML2.0にも触れつつ、HTML5のarticleとsectionの違いについて書いてみます。 HTML5とXHTML2.0 2009年までHTML5とXHTML2.0と策定が行われていましたが、XHTML2.0は策定中止となり、HTML5に統合されるという形になりました。 しかしsection要素を説明する上で、XHTML2.0の方が分かりやすいので、現在は策定は中止されていますが、XHTML2.0のsection要素の使い方を見て頂きます。 XHTML2.0のsection要素とh要素(策定は中止されています) XHTML2.0ではh1～h6(以下、hxとします)までの見出しレベ
Webデザイナー必読？！著作権について知っておくべき10のこと - kojika17
Webデザインに限らず、制作したものに発生する「著作権」を知っておかないと、トラブルの元になるかもしれません。 特にWebデザインの場合は写真、文章、素材。 場合により動画など多岐の著作物を扱う場合が多々あります。 自分の頭の整理のためにも、Webデザイナー、ディレクターが知っておくべき著作権のことについて、まとめてみました。 1、著作権の基礎知識 著作権とは、知的財産権の一つです。 日本の著作権は「無方式主義」と呼ばれる方式で、制作物を制作すると自動的に著作権が発生します。 この時、著作者人格権と**著作権(著作財産権)**に分かれます。 「著作者人格権」と「著作権(著作財産権)」について 著作者人格権 簡単に言えば「制作者」 公表の時の手段、方法を決定できる権利です。 法律上、制作者の同意がなければ公表できません。 著作権(著作財産権) Webデザイナーにとっては、Webサイトなど制作
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
