CSSに関する情報

jQuery samples - Ajax時にローディングを表示

jQuery samples - Ajax時にローディングを表示

本エントリーは「to-R JavaScript Advent Calendar 2015」17日目のエントリー、今回のjQuery samplesは、Ajax時にローディングを表示する方法についての解説です。

続きを読む »

  • 2015年12月21日 20:41
  • カテゴリー
  • jQuery

jQuery samples - jQueryでCSSの!importantを設定

jQuery samples - jQueryでCSSの!importantを設定

本エントリーは「to-R JavaScript Advent Calendar 2015」16日目のエントリー、今回のjQuery samplesは、- jQueryでCSSの!importantを設定する方法についての解説です。

続きを読む »

  • 2015年12月21日 20:18
  • カテゴリー
  • jQuery

jQuery samples - jQueryで設定したCSSを初期化する方法

jQuery samples - jQueryで設定したCSSを初期化する方法

本エントリーは「to-R JavaScript Advent Calendar 2015」15日目のエントリー、今回のjQuery samplesは、jQueryで設定したCSSを初期化する方法についての解説です。

続きを読む »

  • 2015年12月21日 20:03
  • カテゴリー
  • jQuery

IE6で透過PNGを利用するためのTIPS

本エントリーは「CSS 昔話 Advent Calendar 2015」16日目のエントリーです。

続きを読む »

  • 2015年12月16日 08:54
  • カテゴリー
  • CSS

今どきのCSS3グラデーションの指定方法 (2015年版)

今どきのCSS3グラデーションの指定方法 (2015年版)

昨年、「今どきのCSS3グラデーションの指定方法」という記事を書いてそこそこアクセスがあるのですが、今年に入って状況が変わってきたのでアップデートしておきます。

続きを読む »

  • 2015年11月 9日 13:58
  • カテゴリー
  • CSS

iOS 8.4.1の:hover問題

追記(2015年10月23日)
iOS 9.0.2で確認した所この問題は解決していました。

ネタ元:結構緊急リンクが飛ばない iOS 8.4.1からCSS :hoverも1クリックカウントっぽいSafari | WEBスキルアップ君

上記の件、結構やっかいな問題なのでiPhone6+をiOS 8.4.1にアップデートして色々と検証してみました。

続きを読む »

  • 2015年8月29日 12:29
  • カテゴリー
  • CSS, iPhone

[書評]Web制作者のためのCSS設計の教科書

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法メロン色の会社の hilokiさんから「Web制作者のためのCSS設計の教科書」を献本いただきました。

続きを読む »

  • 2014年7月24日 20:25
  • カテゴリー
  • books

gulpとnode.jsの連携

Gruntと比較してgulpがイケてるなと思うのはnode.jsつまりJavaScriptを利用してカジュアルにタスクをカスタマイズできるところです。

続きを読む »

  • 2014年5月13日 11:29
  • カテゴリー
  • tools

タスクランナーgulp入門

gulpGruntと同じように様々なタスクを自動化してくれるツール(タスクランナー)です。

続きを読む »

  • 2014年5月12日 18:30
  • カテゴリー
  • tools

Sass/Compassでコンパイルするとカラーコードが色名になってしまう件

先日行われた「CSS Nite LP, Disk 32: Sass」で「コンパイルするとカラーコードが色名になってしまいます。」という質問を受けたので対応方法を解説します。

続きを読む »

  • 2014年2月16日 18:59
  • カテゴリー
  • CSS

Sassで&による親セレクタ参照

ネタ元:第3回 LESS記法について(中級編:ネストの応用):LESSで3倍ラクするスマートフォンコーディング|gihyo.jp … 技術評論社

この記事を読んでSassで今までこれ知らなくて損してたわーと思った機能があったのでご紹介。ネタ元はLESSですがSassでも問題なく利用できます。

続きを読む »

  • 2013年10月 9日 20:07
  • カテゴリー
  • CSS

Gruntで始めるWeb制作の自動化

Grunt.jsとはWeb制作の様々なタスクを自動化してくれるツールです。

続きを読む »

  • 2013年8月28日 01:02
  • カテゴリー
  • tools

CSS3のFlexboxでパーセントで指定された要素を天地左右の中央に配置する

ネタ元:[CSS]パーセントで指定された正確なサイズが不明な要素を天地左右の中央に配置するスタイルシートのテクニック | コリス

これを読んでちょっとトリッキーだな。CSS3のFlexboxを利用すれば簡単にできるのにとおもったので紹介しておきます。

続きを読む »

  • 2013年7月11日 08:07
  • カテゴリー
  • CSS

CSS3で実現するアローアイコン

スマートフォンなどでリンク領域を示すことなどで使われることが多いアローアイコン。これをCSS3を使って表現する方法を紹介します。

続きを読む »

  • 2013年6月25日 23:41
  • カテゴリー
  • CSS

Android4系でoverflow: hiddenとposition: fixedで位置がおかしくなるバグ

表題のとおりですが、少しわかりにくいので詳しく説明します。

続きを読む »

  • 2013年6月 6日 11:26
  • カテゴリー
  • Android, CSS

Sass/Compassで保存した際に非圧縮と圧縮したCSSファイルを出力する

Sass/Compassでは保存の際にminify圧縮するか圧縮しないかを選択できますが、両方出力したい場合、次のような方法で出力できます。

続きを読む »

  • 2013年4月 8日 19:55
  • カテゴリー
  • CSS

Google ChromeでCSSがSassの何行目に記述されているか確認する方法

Google Chromeでは表示しているサイトのCSSがSassの何行目に記述されているか簡単に確認することができます。

続きを読む »

  • 2013年3月19日 10:36
  • カテゴリー
  • CSS

CodeKitで簡単にCSS Preprocessorを利用する!

本エントリーはCSS Preprocessor Advent Calendar 2012の12日目のエントリーです。

続きを読む »

  • 2012年12月12日 11:37
  • カテゴリー
  • tools

CSS3でのposition:relative

昨日「スマホサイトでtd/th要素へのposition:relativeはダメ!」と書いたところ仕様書を読め的な圧力がいろんな所からかかってきました。こわいですね。

続きを読む »

  • 2012年12月 4日 11:42
  • カテゴリー
  • CSS

スマホサイトでtd/th要素へのposition:relativeはダメ!

iOS4.x系やAndroid2.x系のブラウザだとtd/th要素に指定したposition:relativeが無視されます。

続きを読む »

  • 2012年12月 3日 14:46
  • カテゴリー
  • CSS

Compassでスプライト画象を高速に書き出す方法

CompassでRetina対応をするとコンパイルにやたらと時間がかかってしまいます。

続きを読む »

  • 2012年12月 3日 13:56
  • カテゴリー
  • CSS

CompassでCSS Spriteする際にスプライト画像間のマージンを取る方法

CompassでCSSスプライトを作成する際に画像間に余白を取らないとRetina対応した際に奇数のサイズの画像などがあると表示が少しおかしくなります。

続きを読む »

  • 2012年11月 9日 11:44
  • カテゴリー
  • CSS

CompassでデータURI スキーム

Sassの拡張機能であるCompassを利用するとCSS スプライトだけでなくデータURI スキームも簡単に作成できます。Compassすごい。

続きを読む »

  • 2012年6月17日 12:05
  • カテゴリー
  • CSS

CompassでCSSスプライト

Sassの拡張機能であるCompassを利用するとCSS Spriteが簡単に利用できるのでやり方をメモ書きレベルで書いておきます(SassもCompassも詳しくないのでおかしいところはツッコミを入れてください)。

続きを読む »

  • 2012年6月12日 20:10
  • カテゴリー
  • CSS

AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ

AndroidやiPhoneなどのスマートフォンではHTML,CSS,JavaScriptにバグが多くてコーディングが大変になります。そこでバグを紹介しているサイト、記事をまとめてみました。(中にはバグではなく仕様なものもあるかもしれません)

続きを読む »

Androidの場合のみbodyにclassを追加するJavaScript

ちょっとした修正でAndroidだけCSSを変更しなくてはいけないことがあったのでAndroidの場合のみbodyにclassを追加するJavaScriptを書いてみました。

続きを読む »

  • 2012年1月13日 13:44
  • カテゴリー
  • Android

Android2.2 とtransformのバグ

Android2.2(Regza phone)で検証していると色々とバグと遭遇しました。

続きを読む »

  • 2011年12月27日 15:13
  • カテゴリー
  • Android

スマートフォンとposition:fixedのバグ

iPhoneではiOS5からAndroidでは2.2からposition:fixedに対応されてスマートフォンでも固定配置が利用できつつあります。と思いきや色々と落とし穴が多いのでまとめておきます。

続きを読む »

Androidと-webkit-tap-highlight-color

Androidと-webkit-tap-highlight-colorの関係がよくわからず色々と悩んでいたのですが、ひと通りの結論が出たので紹介します。

続きを読む »

  • 2011年6月 9日 20:12
  • カテゴリー
  • Android, CSS

CSS3のtransitionでアニメーションするjQueryプラグイン「jQuery transition Animate」

iPhone / iPadではjQueryのanimateメソッドが重いのでCSS3のアニメーションを使いましょうというのがセオリーになっていますが、CSSでアニメーションって結構めんどくさかったりします。

続きを読む »

  • 2010年9月17日 18:34
  • カテゴリー
  • jQuery

Web Developerで行うCSSデバッグ

Web Developerナトラボさんが公開しているWeb制作をアシストしてくれるFirefoxの拡張機能(アドオン)です。

続きを読む »

  • 2010年7月 2日 06:27
  • カテゴリー
  • CSS, Firefox

iPhone用CSSをメディアクエリで分岐する問題点

これまで1つのHTMLソースでPC用とiPhone用のスタイルシートを切り替えるテクニックとしてCSS3のメディアクエリが用いられることが多かったのですが、iPhone 4の登場によりこのテクニックはバッドノウハウになりつつあります。

続きを読む »

  • 2010年6月16日 20:00
  • カテゴリー
  • CSS

CSS Nite LP, Disk 9.2(reprise)フォローアップ

先日のCSS Nite LP, Disk 9.2(reprise)で「jQueryの基本」というセッションでお話をさせていただきました。

続きを読む »

  • 2010年6月 6日 17:00
  • カテゴリー
  • seminar

Web creators (ウェブクリエイターズ) 2009年 09月号

Web creators (ウェブクリエイターズ) 2009年 09月号 [雑誌]Web creators (ウェブクリエイターズ) 2009年 09月号が発売されました。

今回、私はmarginを使った様々なTIPSについて解説をしております。

続きを読む »

  • 2009年8月 4日 16:25
  • カテゴリー
  • writer

Web Designing (ウェブデザイニング) 2009年 07月号で執筆しました。

Web Designing (ウェブデザイニング) 2009年 07月号 [雑誌]Web Designing 2009年 7月号 の「一段上の CSS にするヒント」で 「IE6でも透過pngを活かしたデザインに」と「CSSサイトに動きを与えるJavaScript」という記事を執筆しました。

続きを読む »

  • 2009年6月20日 02:00
  • カテゴリー
  • books

YUIのfonts.css

ブラウザ間やOS間のフォントの差異を吸収してくれるCSSライブラリにYahoo! Developer Networkで公開されているYUI(Yahoo! UI Library)の「fonts.css」があります。

続きを読む »

  • 2008年12月 8日 23:44
  • カテゴリー
  • CSS

知っておきたい15個のCSS TIPS

IN THE WOODSでまとめられている15 CSS Tricks That Must be Learnedを紹介します。

続きを読む »

  • 2008年12月 2日 06:39
  • カテゴリー
  • CSS

現場のプロから学ぶXHTML+CSS 発売されました。

現場のプロから学ぶXHTML+CSS現場のプロから学ぶXHTML+CSS』が本日発売しました。

続きを読む »

  • 2008年11月11日 15:12
  • カテゴリー
  • books

現場のプロから学ぶXHTML+CSS

現場のプロから学ぶXHTML+CSSCSS Nite ビギナーズの連動書籍『現場のプロから学ぶXHTML+CSS』が完成しました。

続きを読む »

  • 2008年10月21日 11:19
  • カテゴリー
  • books

CSS Niteビギナーズ 大阪版

CSS Niteビギナーズ 大阪版の募集が開始されています。

続きを読む »

  • 2008年9月29日 02:23
  • カテゴリー
  • seminar

「CSS Reloaded」CSS3の実践的な使い方をご紹介!の感想

先日、アップルストア心斎橋で行われたCSS Reloaded「CSS3の実践的な使い方をご紹介!」に行ってきました。

資料が公開されました。

CSS Reloaded Ja
View SlideShare presentation or Upload your own. (tags: css css3)

■出典元:CSS Reloaded
■著者;John Allsopp
■リンク:Web Directions East

以下、内容を復習もかねてまとめてみました。(サンプルやブラウザ対応などは私が補足したものです。)

続きを読む »

  • 2008年9月10日 04:22
  • カテゴリー
  • CSS

float方向のmarginが倍増するバグへの対応

IE6ではfloatしている要素にmarginを指定すると、float方向のmarginが倍近くに増加するというバグが存在します。

続きを読む »

  • 2008年8月25日 13:59
  • カテゴリー
  • CSS

tableにおけるmarginの相殺

ネタ元:tableのmargin相殺

Firefoxのtableにおけるmargin相殺はちょっとややこしいので補足しておきます。

続きを読む »

  • 2008年8月 3日 12:39
  • カテゴリー
  • CSS

marginの相殺

CSSにおけるmarginプロパティはボックスに対して余白部分を生成するというシンプルなものなのですが、『marginの相殺』という特徴があります。

marginの相殺について解説をしてみます。

続きを読む »

  • 2008年7月 9日 00:11
  • カテゴリー
  • CSS

Firefox3でメイリオを指定するとinputのsizeが倍増する

Firefox3でメイリオを指定するとinputのsizeが倍増する

Firefox3のデフォルトのフォントをメイリオに変更すると検索窓がグニョーンと伸びるよと教えていただきました。

続きを読む »

  • 2008年7月 1日 00:59
  • カテゴリー
  • CSS

CSSのレイアウトテクニック - Faux Absolute Positioning

ネタ元:CSSレイアウトテクニック"偽装絶対指定"

久々にCSSでの面白いテクニックですね。

続きを読む »

  • 2008年6月25日 02:44
  • カテゴリー
  • CSS

[Re:Creator's Party Kansai]第1回 CSSの操作 - jQueryによるJavaScript入門

火曜日ということでRe:Creator's Kansaiブログに寄稿しています。

第1回 CSSの操作 - jQueryによるJavaScript入門

jQueryを利用したCSS操作について解説しています。

続きを読む »

  • 2008年6月18日 03:53
  • カテゴリー
  • JavaScript

[書評]実践 Web Standards Design

実践 Web Standards Design ~Web標準の基本とCSSレイアウト&Tips~CSS + XHTML習得の際にぜひお勧めしたい一冊になります。

続きを読む »

  • 2008年1月22日 05:16
  • カテゴリー
  • books

re:HTML及びCSSは習得が難しい言語か!

ネタ元:HTML及びCSSは習得が難しい言語か![リンク切れ]

今まで人に教えてきた私の経験上(といってもまだそんなに多くの人に教えてはないんですけど)、HTML及びCSSは習得が非常に容易な言語だと思う。

続きを読む »

  • 2008年1月22日 02:22
  • カテゴリー
  • HTML

footerをウィンドウ下部に固定する『footerFixed.js』

footer部分を画面下部に固定するためのjsライブラリ『footerFixed.js』を作成しました。

続きを読む »

  • 2007年11月16日 01:22
  • カテゴリー
  • JavaScript

高さの異なるカラムをそろえるスタイルシート

ネタ元:高さの異なるカラムを揃えるスタイルシート[コリス]

高さの異なるカラムをそろえるのがはやっているようですので、色々考察。

続きを読む »

  • 2007年10月31日 19:44
  • カテゴリー
  • CSS

CSS最適化ツールの『CSS Optimizer』を公開

CSS TIPS』でCSS最適化ツールの『CSS Optimizer』を公開しました。

続きを読む »

  • 2007年9月 7日 00:54
  • カテゴリー
  • CSS

input要素などにおけるIEのバグ

ちょっと、はまったのでメモ書き

続きを読む »

  • 2007年8月24日 14:48
  • カテゴリー
  • CSS

CSSをデバッグするツール色々

Web標準の日々のグループディスカッションでCSSの編集を直感的(?)にできるライブラリの案が出てたのですが、世の中すばらしいツールがいっぱいあるので、今回はそんなツールを紹介します。

続きを読む »

  • 2007年8月 7日 22:03
  • カテゴリー
  • CSS

CSSでロールオーバーもどき

ロールオーバーの際に画像の輝度を上げるやり方がありますけど、CSSで簡単にできます。

続きを読む »

  • 2007年7月18日 22:10
  • カテゴリー
  • CSS

スタイルシート・デザイン

スタイルシート・デザイン矢野りんさん、益子貴寛さん(サイバーガーデン)、こもりまさあきさんの共著になります

続きを読む »

  • 2007年5月15日 23:05
  • カテゴリー
  • books

画面の下部にフッターを表示する

動的サイトで画面の下部にフッターを表示する事は非常に困難です。
さまざまなパターンを想定してフッターを設定することになります。

続きを読む »

  • 2007年1月18日 23:53
  • カテゴリー
  • CSS

vertical-alignの使い方【css tips】

vertical-alignは正しく理解していないと使いにくいプロパティである。
特にtableレイアウトからcssレイアウトに移行する際に混乱が発生しがちだ。

テーブルレイアウトでよく使う以下のようなコードがある。

続きを読む »

  • 2007年1月11日 14:20
  • カテゴリー
  • CSS

あなたがXHTML+CSSでサイトを作るべき10の理由

はやりの『10の理由
ありそで誰も書いてないテーマを探してたらこんな感じになりました。
(すでに書いてる人いたらごめんなさいね)

続きを読む »

  • 2006年5月24日 23:33
  • カテゴリー
  • HTML

CSSで無理やりfloatをclearする方法

MozillaやFirefoxで『親ボックスに背景画像や背景色を指定して子ボックスでfloatが行われている場合親ボックスの背景画像や背景色はloatが行われない子ボックスまでにしか反映されない』という挙動があります。

続きを読む »

  • 2006年3月12日 14:57
  • カテゴリー
  • CSS

フォームへの入力を操作する

フォームを作成する際に文字の制限ってどうしてます?

続きを読む »

  • 2005年7月20日 23:26
  • カテゴリー
  • CSS

widthの読み方

html上で横サイズを指定するwidthですけどなんて呼んでます?

続きを読む »

  • 2005年7月11日 22:46
  • カテゴリー
  • dialy

購読

フィードリーダーを利用して検索結果を購読し、今後投稿されるエントリーでタグ「CSS」が指定されているものにアクセスできます。 [フィードとは]

フィードを取得 フィードを取得