IDEA * IDEAドットインストール代表のライフハックブログ
overflowを使ってfloatの問題を解決するスタイルシートのテクニック | コリス
フロートした子要素を内包するコンテナが高さを拡張しない問題を解決するためのテクニックはさまざまなものがあります。 その中から、overflowを使った方法とその際に生じる問題点とその解決方法を紹介します。 CSS: Clearing Floats with Overflow [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに Demo 1: overflow:auto; Demo 2: overflow:hidden; overflowを使って生じる問題点と解決方法 はじめに フロートベースのレイアウトをする際、ラッパーとなるコンテナがフロートしている子要素に対して高さを拡張しないことは、普通によくある問題です。 デモ：１ フロートをクリアする要素を配置して解消した例 しかし、この問題を解決するために、「overflow」プロパティでもできることを知っていましたか？ これは
少しのコードで実装可能な20のjQuery小技集
2016年6月22日 jQuery 素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、以前書いた「少しのコードで実装可能な20のCSS小技集 」に続き、今回はプラグインなしで実装できるjQueryの小技を紹介します！「jQueryってなんだ？」という人もコピペで実装できますよ！サンプルも用意したのでぜひご覧ください！ ↑私が10年以上利用している会計ソフト！ 追記：この記事で紹介されているいくつかの方法が、今ではCSSのみで実装可能です！詳しくは「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」をご覧ください。 jQueryの基本的な使い方 まずはjQuery本家からjQueryファイルをダウンロードします。<head> 内に下記を記述し、jQueryファイルを読み込みます
伝授しましょう。あなたのショートムービーの完成度がグっと良くなる22の秘訣
伝授しましょう。あなたのショートムービーの完成度がグっと良くなる22の秘訣2010.09.25 15:00 junjun 9月の大型連休最後の週末。 この週末を利用してショートフィルムにトライしてみようなんて思っている人にオススメな、これさえ心得ておけば、なんとなくイイ感じの映像が撮れちゃうっていうWally woodの22のテクニックをご紹介したいと思います。 １）フレーム一杯の顔の大写し ２）パーツの超アップ ３）後頭部の一部と、後頭部越しの顔のアップ ４）背景無しの横顔 ５）陰影 前景が暗くなる ６）何もオブジェクトが無いシーンで始まり、車が横切り、また何もないシーン。 ７）全体的に黒 ８）大きなオブジェクトを１つ（手、銃、電話など） ９）オブジェクトの全身のみのショット １０）リバース シルエット 黒か陰影 １１）小さな人影 １２）奥行き １３）ダウンショットと影 １４）L字型のシ
手軽にWebを彩るCSSコーディングテクニック50 - 海外デザイン事情第7回 - MdN Design Interactive
第7回「手軽にWebを彩るCSSコーディングテクニック50」 2010年03月15日 基本的なCSSを使ったWeb制作はそれほど難しくないが、より高いレベルのデザインを実現しようとすると、難易度はグッと上昇する。そんなときは、世界中のデザイナーやデベロッパーが提供しているCSSテクニックを使ってみるとよいだろう。ここでは、世界各国のデザイナーやデベロッパーが紹介している、ビジュアル表現やレイアウトなどを中心としたCSSのコーディングテクニックを紹介していこう。 翻訳元サイト：Smashing Magazine http://www.smashingmagazine.com/ 原文：50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) http://www.smashingmagazine.com/2010/0
PNG画像をより美しく、より軽量に最適化するテクニック | コリス
先日、紹介した「JPEG画像の最適化テクニック」に続いてSmashingMagazineから、PNG画像をより美しく、より軽量に最適化するテクニックを紹介します。 追記：2009/07/27 本エントリには続きがあります。 続：PNG画像をより美しく、より軽量に最適化するテクニック Clever PNG Optimization Techniques 下記、各ポイントをピックアップして紹介します。 最後のはCS3向けで不明だったので、途中省略しています。 はじめに PNG画像フォーマットの概要 1. ポスタリゼーション 2. 手のはいってない透過 3. 透過による分離 4. マスクを活用 はじめに ウェブデザイナーとしてあなたは既にPNGのフォーマットに精通しているかもしれません。PNGは劣化のないフォーマットとして、GIFの非常に良い代わりとなります。 Photoshop（あるいは他の画
ウェブデザインにアクセントを加える画像加工のテクニック7選
レイアウトもばっちり、配色構成もＯＫ、いざガシガシとデザインを組んで行ってはみたものの、何か物足りない。。。 そんなまとまりすぎたデザインに、ピリッと印象的なアクセントを加える7つのテクニックをお届けしちゃいます！ どれもカンタン、ひと手間ちょいと加えるだけでデザインが引き締まるコト間違いなし!? そんなこんなで今回のエントリーは、いまいちインパクトの足りないウェブデザインにアクセントを与えるテクニックをご紹介してまうでー。 ウェブデザインにアクセントを加える画像加工のテクニック 1.1pxのドロップシャドウ これは文字と背景色の兼ね合いが少し悪い（視認性があまり良くない）場合に文字を少し目立たせたり、単純に文字にパキッとした印象を付加したりしたい場合に使えるテクニックです。 ポイントは「はっきりとした色差で、くっきりと1px」って感じで、Photoshopならドロップシャドウで「距離1、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]実用的なものをはじめ、ちょっと使ってみたくなるCSS3の14のテクニック