【完全版】Ligature Symbols フォントセットの自作方法 - くらげだらけ
今月の初めにLigature Icon フォントセットの自作方法とWebFontというエントリーを書きました。これはsymbolsetというサイトにinspireされて、Ligature機能を使ったSymbol Web Fontを自作しようという試みを書いたものです。しかし、この時はsymbolsetで実現されているようなものには及ばない不完全なものになってしまいました。 その後、いろいろと調べたり試したりする中でsymbolset相当のWebFontを自作することが出来ました。今回はそのプロセスと技術的解説について紹介したいと思います。 Ligature Symbols について まずは今回自作したWeb Fontのデモページをご覧ください。 【DEMO】 Ligature Symbols 今回作成したLigature Symbols FontはOFLライセンスで公開しており、ダウンロー
CSS Filtersで写真加工するWebApp - CSS PhotoEditor - くらげだらけ（くだくらげのBLOG）
iOS6も発表されて、あとはNew iPhoneのリリースが待たれる季節ですね。私は3Gの発売時に買い替えて、2年後iPhone4にし、また2年が経とうとしているので今年は新しいのに買い換えようという気持ちです。 世間ではAppleのマップでいろいろと騒いでいたりしますが、OSがアップデートされるたびに私がチェックすることといえばブラウザの仕様や機能の変更です。 去年はWebAppやスマホサイトを作るには嬉しい変更がありました。position:fixedやiframeの慣性スクロール、他にもSVGや縦書き、明朝フォントのサポートもありました。 その辺りはiOS5のMobile Safariから使えるようになったHTML5・CSSを試してみました【前編】と【後編】というエントリーでまとめて書いています。このときもデモ用にフルスクリーンで使えるWebAppを作成しました。 今回はCSS Fi
Web・HTML・CSSのテキスト改行と複数半角スペースの処理に関して - くらげだらけ
Webで開発をしていてたまに上がってくる問題として、テキストの改行についてあると思います。特にWebサービスのような編集者以外のユーザーがテキストを入力した任意のメッセージなどを表示する場合、改行に関して様々なトラブルが起きたりすることがあります。編集者（作り手側）の場合は適切な箇所で改行タグを入れたり、閲覧者が適切に読めるように文章を改変したりできるのですが、ユーザーにそこまで考慮させるのは難しいことです。 またWebサービスには他にもトラブルの原因となることがあります。Webは様々な環境で閲覧・使用することが可能だということです。PCや携帯、スマートフォン、タブレットなどのデバイスの差異ももちろんありますが、閲覧するソフトウェア（Webブラウザなど）によっても表示のされ方が異なってしまいます。 （できる範囲ではありますが）すべての環境でトラブルなく適切に表示するにはどうしたら良いか？
Webでの文字のレイアウトについて - 2011年に試してみたこと - - くらげだらけ
2011年の後半あたりから文字や文字組に興味を持ち始めました。元々、大学時代に文字についての勉強をちゃんとできていなかったことが、ある種のコンプレックスのように感じていました（今もそうです）。そのうえで「デザイナー」という肩書きを持っていることを嫌って、名刺にデザイナーではなく「制作」とわざわざ入れたこともありました。 そんなこんなで過ごしながら今年読んだ本が「文字をつくる―9人の書体デザイナー」と「文字講座」という本でした。どちらの本にも文字がどんなふうにできたのか、どんな想いでできたのかといったことが書かれていて、非常に面白かったです。それから書体や文字組に関する本を読んだりして少しずつですが勉強している毎日です。 最近では電子書籍が少しずつ読めるようになって来ました。私もiPhoneで読んだり、iPadで読んでみたりしています。私もWebに関する仕事をしているので、最近ではWebの文
CSSのみでテキストにグラデーションやリフレクトをかけるテクニック（ちょっと更新） - くらげだらけ
前回はiOS5のMobile Safariから使えるようになったHTML5・CSSについて前編と後編に分けてご紹介しましたが、そのなかで説明していない小さなテクニックについて少し紹介したいと思います。 今回はCSSでテキストにグラデーションをかけるテクニックについてです。 前回のWeb App Demoではフッタータブに特殊なWebFontを使ってアイコンを表示させるようにしていましたが、タブがActiveのときに色が変わってエフェクトがかかるようになっています。 このエフェクト効果はCSSでテキストにグラデーションをかけるテクニックをつかってやっています。 通常、CSSでテキストカラー（colorプロパティ）にグラデーションを指定することはできませんが「:after」擬似クラスや「mask-image」プロパティを組み合わせて使うことでグラデーションのような表現をすることができます。具体
CSS3によるTransition Effects 30
最近、はてブでも話題になったAppleのHTML5 Showcase。 iPhoneやらiPadのWebApp開発の勉強として、HTML5やCSS3についてもう少し勉強しておこうということで、差し当たってHTML5 Showcaseを参考にTransition Effects Sampleを作って見ました。 CSS3 Transitions Collection 30（Safari4以上で閲覧してください） 作ったEffectはHTML5 Showcaseで紹介されていたものを含めて30種類。 おなじみの「Cube」やアニメの登場のような「Squish」、Appleタイムマシンのような奥行きをイメージした「Flip Switch」、キーノートのEffectにあるような「Revolve」「Reflection」「Swap」なんかも用意しました。 中にはオリジナルのものもあります。（Fade
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
