理解しておきたい、CSSによるインラインレイアウトの仕組み（font-size／line-height編）Inline Layout─Frontrend Conference 高津戸壮（株式会社ピクセルグリッド） この記事は、Frontrend Conferenceのセッション「Inline layout」でお話させていただいた内容を基に、連載記事（全4回）として書き起こしたものです。今回は第１回目です。 はじめに Frontrend Conferenceでは、皆さんが新しい技術について話していた中、私からはCSS2.1のお話をさせていただきました。私が解説したのは、CSSを書く上で欠かせない、以下の4つについてです。 font-size line-height vertical-align inline-block トレンドとはほど遠い内容ではありますが、多くの人にとって、なんとなく感覚
再販売だけがNGで、個人でも商用でも無料で利用でき、バックリンクやクレジット表記も不要の太っ腹なライセンスで提供されているアイコン素材を紹介します。 ダウンロードできるアイコンはSVGとアイコンフォントで利用できます。 SVG 各アイコンが .svg で用意されています。 Fonts アイコンフォント用に .eot, .woff, .ttf, .svg が用意されています。 ライセンスはOFLで、個人でも商用でも無料で、さまざまなメディアに利用でき、改変や再配布も可です。唯一ダメなのは素材自体の販売だけです。 詳しくはダウンロードファイルの「readme.txt」をご覧ください。 アイコンは、こんな感じのが300種類以上揃っています。
Webフォント導入のきっかけWebフォントを導入しようと思ったのは以下の記事を拝見したのがきっかけでした。 WEBフォントで簡単に！STINGER3の細かいところにアイコンを入れてみた これを見て「わー、細かいけどこういうの素敵！これは私もパクりたい！オマージュしたい！」と思いたち、やってみることにしました。 で、いきなり結果から書くと、こんな風になります。 黄色の○で囲まれたハートやフォルダのアイコン。これが今回導入したWebフォントなのです。 これがフォント？って思いますよね。そうなんです、こういう一見画像（アイコン）風のデザインをフォントだけできちゃうのがWebフォントの優れたところなんです！ あくまでフォントなので拡大・縮小しても画像が荒くなったりしませんし、CSSでの装飾だって可能です。画像じゃないので表示も軽いです。 どうですか？ちょっと興味わいてきましたか？気になってきたら続
SVGをちょっと始めてみたいな、という人にもちょうどよさそうなテキストの周りに表示するボーダーをアニメーションで表示するデモを紹介します。 SVG Border Animation コードは簡単、コピペで利用できます。 HTML <div class="svg-wrapper"> <svg height="60" width="320" xmlns="http://www.w3.org/2000/svg"> <rect class="shape" height="60" width="320" /> <div class="text">coliss</div> </svg> </div> CSS html, body { background: rgb(20,20,20); text-align: center; height: 100%; overflow: hidden; } .svg
Twitterのボタンをホバーすると、蝶番を軸に開くかわいいアニメーションを実装したスタイルシートのデモを紹介します。 パタリと開いた後、ぷら〜んとするのいいですね。 Hinged Twitter Button 実装は、こんな感じです。 HTML TwitterのアイコンにはFont Awesomeが使われており、アイコン、アカウント、蝶番をそれぞれspan要素で配置しています。 <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> <a href="http://twitter.com/jonitrythall"> <span class="button"> <i class="fa fa-twitter"></i> </span> <span cl
最小限のシンプルなHTMLとCSSで実装する、アニメーションで表示されるメガメニューのデモを紹介します。 デモ：Mega Menuオープン時 HTML HTMLは、トリガーとなるチェックボックス、メガメニューのリスト、コンテンツ、の3つで構成されています。 デモのコードをシンプルにしてみました。 <input type="checkbox" id="nav"> <label for="nav" class="entypo-menu"></label> <nav> <ul> <h2>カテゴリ</h2> <li><a href="#">アイテム</a></li> <li><a href="#">アイテム</a></li> <li><a href="#">アイテム</a></li> </ul> <ul> <h2>カテゴリ</h2> <li><a href="#">アイテム</a></li> <l
画像は一切使用せず、その文字をホバーするとパタっと開くエフェクトを実装するスタイルシートを紹介します。 単に開くだけでなく、シャドウも開きに応じて変化してるのがスゴイ！ 日本語、しかも漢字でもOK 実装はこんな感じになります。 HTML 文字はspan要素で配置し、上に表示されるホワイトの文字はdata-letterに記述します。 <div class="foo"> <span class="letter" data-letter="A">A</span> <span class="letter" data-letter="B">B</span> <span class="letter" data-letter="C">C</span> ... ... </div> 日本語は、こんな感じです。 <div class="foo"> <span class="letter" data-lett
p要素などで実装したテキストの天地に、美しいグラデーションのボーダーと背景を適用するスタイルシートのデモを紹介します。 カルピスもちはおやつにもらったのがおいしかっただけで、スタイルシートには何の関係もありません。 上記は当方でテキストやサイズを変更したもので、デモは下記にあります。 Gradient Borders 実装はシンプルなので、他にも応用がききそうですね。 HTML p要素をdivで内包します。 <div class='backbox'> <p>This is the future.<br>Live it & love it.</p> </div> CSS まずは、Webフォントと背景カラーの設定です。 @import url(http://fonts.googleapis.com/css?family=Josefin+Slab); html { background-colo
こんにちは、机に置いたおもちゃの日焼けが気になるもりたです。 今回は、前からちょっと気になっていたウェブフォントをカーニングできるJS「HTMLで文字詰めするタイポグラフィー用JS」を試してみました。 http://fladdict.net/blog/2011/02/auto-kerning.html ※現在はアクセスできなくなっています。 ご存知のとおり、jsを使わなくてもletter-spacingを使ってcssだけで設定しようと思えばできるんですが、ひと文字ずつの設定となるとhtmlもcssもすっきりしなくなる上にめんどくさい！ こうパッとガッとスッと設定したい！ そんな希望を叶えてくれるのが「FLAutoKerning.js」です！ ポイント1：導入が楽です 手順は簡単、サイトからファイルをダウロードしてjqeryと一緒に読み込ませて<head>内に設定を書くだけ。 入れてみたデモ
HTML & CSS Please copy & paste this code to your HTML file or Stylesheet. <p>Simple use for mailto link.</p> <a href="mailto:mail@example.com" class="lsf">mail</a> <p>Use tha icon with text.</p> <a href="http://twitter.com/" class="lsf-icon" title="twitter">Twitter</a> <p>Use tha icon with unicode.</p> <a href="http://amazon.com/" class="lsf-icon amazon">Amazon</a> /* CSS */ @font-face { font-fami
html5一見、コピーできるように見えますが、ペーストしてみると・・・。ツイートする
html5先日公開した 絶対にコピペできない文章を作ったったwwww はおかげさまで好評だったようで嬉しい限りです。「不思議！」「どういう仕組みなんだ？」という声も多かったので裏側を紹介します。コピペできない訳ではないタイトルは「コピペできない」としていいますが、実際にはコピペはできます。正確に表現すると「コピーすると違う文字になる」という状態になっています。 ではなぜ違う文字になるのでしょうか。結論をいってしまうと「そこにある文字が、人間の目に見える文字とは違う」からです。といっても、これでは分からないですね。今回のために作成された独自フォントトリックの肝は「フォント」です。フォントといえば、文字の見た目を変えるために利用するものです。たとえば、「ほ」という文字を「メイリオ」フォントで表示するとこうなります。フォントを変えて「HG創英角ポップ体」フォントで表示すると、ポップな雰囲気になり
<ul id="menu"> <li><a href="#">html</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">PHP</a></li> <li><a href="#">Perl</a></li> </ul> HTMLは最後まで変更しません。 #menu { width:530px; padding:0; margin:0; list-style-type: none; } #menu li { width:20%; float:left; padding:0; margin:0; text-align:center; } #menu li a { width:auto; color:#fff; font-size:12px; font-weight:
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く