CSS

B!KUMAテーマの画像にリボンをつけて、かわいいわたしを演出する。…ことができなくなった…けどちょっと何とかした

.entry-content object,.entry-content iframe,.entry-content span[itemtype] img,.entry-content .hatena-fotolife img,.entry-content .http-image img {max-width:628px;border: 6px solid #fff !important;-webkit-box-shadow: 0 2px 8px rgba(0,0,0,0.…

社内LTで3つ発表しました「more feedback for the creation」「酵母と暮らそう」「TextScalableなコンポーネントのスタイル」

11月から id:aereal さんが社内LT大会を開催されているので、私もいくつか発表をしました。ので、発表した内容をさらっと紹介しておこうと思います。 more feedback for the creation LigatureSymbolsというフォントを公開してから得られた知見などをまとめ…

Web・HTML・CSSのテキスト改行と複数半角スペースの処理に関して

Webで開発をしていてたまに上がってくる問題として、テキストの改行についてあると思います。特にWebサービスのような編集者以外のユーザーがテキストを入力した任意のメッセージなどを表示する場合、改行に関して様々なトラブルが起きたりすることがありま…

CSS Filtersで写真加工するWebApp - CSS PhotoEditor

iOS6も発表されて、あとはNew iPhoneのリリースが待たれる季節ですね。私は3Gの発売時に買い替えて、2年後iPhone4にし、また2年が経とうとしているので今年は新しいのに買い換えようという気持ちです。 世間ではAppleのマップでいろいろと騒いでいたりします…

【完全版】Ligature Symbols フォントセットの自作方法

今月の初めにLigature Icon フォントセットの自作方法とWebFontというエントリーを書きました。これはsymbolsetというサイトにinspireされて、Ligature機能を使ったSymbol Web Fontを自作しようという試みを書いたものです。しかし、この時はsymbolsetで実現…

Ligature Icon フォントセットの自作方法とWebFont

去年の10月に「iOS5のMobile Safariから使えるようになったHTML5・CSSを試してみました【前編】」というタイトルのエントリーで、Web Symbols TypefaceというWebFontを使って、タイプフェイスでアイコンを表示する方法について紹介しました。それ以来、似た…

スマートフォンブラウザのjQuery Clickイベントに関すること

最近、はてなブックマークで「スマートフォンブラウザ不具合特集」というのを見つけました。知らなかったのもいくつかあったのですごく参考になりましたよ。 特にAndroid系は私も認識していないことが多いので、その辺りをきちんと見てる人はすごいなぁと思…

CSSのみでテキストにグラデーションやリフレクトをかけるテクニック(ちょっと更新)

CSS

前回はiOS5のMobile Safariから使えるようになったHTML5・CSSについて前編と後編に分けてご紹介しましたが、そのなかで説明していない小さなテクニックについて少し紹介したいと思います。 今回はCSSでテキストにグラデーションをかけるテクニックについてで…

iOS5のMobile Safariから使えるようになったHTML5・CSSを試してみました【後編】

前編ではiOS5のMobile Safariから使えるようになったHTMLやCSSの要素などについて試してみた、半分だけ紹介・解説しました。まだ前編を読んでいないという方は先に前編を読んでおくことをおすすめします。 →iOS5のMobile Safariから使えるようになったHTML5…

iOS5のMobile Safariから使えるようになったHTML5・CSSを試してみました【前編】

iPhoneがでた当初はWebApp押しだったAppleも3Gを出してからすぐにネイティブアプリに手のひらを返してしまって、WebAppはすっかり影がさしてしまいました。 それでも、jQTouchやSencha Touch、jQuery mobileなどWebAppの開発支援となるJavascriptライブラリ…

PrePANというサイトのお手伝いをしました。

CSS

id:antipop さんに頼まれてantipopさんが作っているPrePAN(http://prepan.org/)というサイトのデザインをしました。 > Perlモジュールのレビューサイト PrePAN をオープンしました PrePANはモジュールをつくったけど、「既に似たようなものがあるのでは?…

CSS3だけで作るClickableなUI

CSS

最近はHTMLやCSSぐらいしか書いていませんが、HTMLやCSSでできることを考えたりしています。 HTML5やCSS3はクロスブラウザ(主にIE)を考えたりすると、現実的でないような気さえしますが、Mobileデバイスに限れば、もう既に一般的な技術です。HTMLはフォー…

CSS3によるTransition Effects 30

最近、はてブでも話題になったAppleのHTML5 Showcase。 iPhoneやらiPadのWebApp開発の勉強として、HTML5やCSS3についてもう少し勉強しておこうということで、差し当たってHTML5 Showcaseを参考にTransition Effects Sampleを作って見ました。 CSS3 Transitio…

第2回コーディングコンテストの課題をやってみた(締め切り過ぎてたけどね)

つい最近まで第2回コーディングコンテストというのがCSSNiteの企画で行われていたのですが、なんとなーく面白そうなので参加してみた。 参加したといっても、出された課題(Webページを1ページコーディングする)をやって、それを期限までにメールで送るとい…

CSS画像リサイズを使用する際のIE8のバグ修正について

また、このネタですが、だいぶ前に書いた「CSSだけで画像のリサイズを処理する(IE6に対応させて、しかもハイクオリティ)完全版」を使ってWebページを作成していたところ、IE8でおかしな動作をするということが分かりました。具体的には、下の画像の用に変…

CSSだけで画像のリサイズを処理する(IE6に対応させて、しかもハイクオリティ)完全版

よくあるCSSの使い方ですが、画像をサムネイル表示するときにJSとかPHPとか書くのがウザイのでCSSでやるパターンのやつのメモです。要は、CSSで画像のWidthとHeightを制御してやるわけですが、 今回はデカイ画像をサムネイル表示させるので、max-widthとmax-…

IE6でmin-Widthやmax-heightを適応させる

前回のエントリー「ヘッダーとフッターを固定して、PNGの透過画像を用いて立体的に見せる(IE6対応)」でヘッダー・フッターを固定させるレイアウトを作ったのだけれど、どうせならリキッドレイアウトにさせようと思い。width:100%でカチャカチャ作っていた…

ヘッダーとフッターを固定して、PNGの透過画像を用いて立体的に見せる(IE6対応)

バリエーションとして覚えておこうと思う。 HTMLとCSSだけで、ヘッダーとフッターを固定して表示させるにはCSSのpositionプロパティでfixedを設定する。 これは閲覧者のブラウザに対して固定した位置に配置することができるので、スクロールしても配置がずれ…

背景画像のCSSテクニック

最近ではどのCSSテクニックを見ても、「あーこれこうなってるんでしょー」ぐらいにしか思わなくなっていたのですが、久しぶりに面白いテクニックを紹介していたので紹介。 http://bizcaz.com/archives/2009/01/18-055214.php http://www.askthecssguy.com/20…