ほんっとにはじめてのHTML5とCSS3：【31】OpenType機能を直接指定できる font-feature-settings
OpenTypeフォントとは OpenTypeフォント（Open Type Font = OTF）は、デジタルフォントの規格です。 デジタルフォントは、大昔は等幅のビットマップフォントだけでした。文字コードは ASCII だけの時代です。 その後1990年代はじめ、Adobe の PostScript（ポストスクリプト = PS ）、Apple の TrueType（トゥルータイプ = TT ）といった「アウトライン情報を持つフォント」が登場しました。 OpenType は、Microsoft と Apple が共同開発した規格で「TrueType を発展させ、PostScriptフォントのアウトラインデータも収録できるようにしたもの」だそうです。 Unicode に対応し、6万個以上の字体を収録した、多言語に対応できるんだって。 同じフォントを、Win・Mac・インクジェットプリンタ・ポ
Noto Sans Hinted と font-feature-settings: 'palt' | blog.jxck.io
Intro Noto Sans のサブセット生成を見なおし、 Noto Sans Hinted から pyftsubset で生成し、ついでに font-feature-settings を有効にした。 作業と検証の記録を兼ねて、実施結果を記す。 fonttools これまで、フォントのサブセットの生成には以下の 2 つのツールを使用していた。 サブセットフォントメーカー WOFF コンバータ しかし、 macOS を Catalina にあげたところ、これらが起動できなくなり、フォントが生成できなくなった。 これまで GUI で行なっていたが、せっかくなので自動化するために、代替コマンドを探し、プロセスを組んだ。 いくつかツールがあるが、今回は fonttools に同梱された pyftsubset を採用することとした。 fonttools/fonttools pyftsubset こ
君は真に理解しているか？z-indexとスタッキングコンテキストの関係 - ICS MEDIA
CSSで要素の重なりを表現する時はスタッキングコンテキストによって決められています。スタッキングコンテキスト（Stacking Context）はウェブページ上の仮想的な奥・手前方向の概念であり、「重ね合わせコンテキスト」、あるいは「スタック文脈」とも言います。 z-indexによる重なり位置の指定もこのスタッキングコンテキストのうちの一つです。今回はz-indexより広い概念のスタッキングコンテキストの深淵を覗いてみます。 z-index:5がz-index:53万に勝つ方法 重なりといえば、z-indexです。z-indexはWeb初心者キラーなプロパティで、その値が必ずしも重なりの順序になりません。例えば次のようなz-indexが53万と5の要素があったとします。この場合、53万の要素が上にきます。 <div class="wrapper wrapper-freeza"> <div
Using SVG to Shrink Your PNGs
07 Sep 2014 Wouldn’t it be great if you could get the compression of a JPEG with the transparency of a PNG? Well, you can, sort of. Here’s a little trick that I discovered while working on the new Sapporo Beer website. Notice how the beer can on the Sapporo website has a transparent area around the edges (it’s hard to notice but there’s a video playing behind it). As a PNG, the beer can graphic wo
Center and crop thumbnails with CSS - Jonathan Nicol
Here is a handy CSS centering technique I first noticed in the WordPress media library, where it is used to centre and crop irregularly sized thumbnails within a square container. The technique uses CSS3 transforms, so it works in all modern browsers, including IE9 and above. <div class="thumbnail"> <img src="landscape-img.jpg" alt="Image" /> </div> <div class="thumbnail"> <img src="portrait-img.j
CSSの背景設定background:none;の正しい書き方
長くなりましたんで、先に結論書いておきますね。 結論 CSSで背景をナシにしたいときは、 background : none; を使う 以下、詳細解説です。 CSSのバックグラウンドプロパティで、背景をオフにしたい場合、次のようないくつかの書き方があります。 background-image : url(none); background-image : none; background-image : url(); background : url(none); background : none; background : url(); W3CのCSSValidatorに通すと、どれもエラーはありません。つまり、CSSの文法的にはどれも正しい。 じゃあどれでもいいじゃん、という話になりそうですが、しかし、サーバーのログを見てみると、この中のいくつかはnoneというファイルを実際にサーバ
CSSサンプル集
.play { color: #ffba16; font-family: 'FB Condor Bold', sans-serif; font-size: 100px; letter-spacing: 0.2em; padding: 10px 0; -moz-transform: skew(-25deg) rotate(5deg); -ms-transform: skew(-25deg) rotate(5deg); -webkit-transform: skew(-25deg) rotate(5deg); transform: skew(-25deg) rotate(5deg); text-shadow: 0 1px #ff9b0d, 1px 0 #f79100, 1px 2px #ff9b0d, 2px 1px #f79100, 2px 3px #ff9b0d, 3px 2px #f79
HugeDomains.com
Captcha security check stack3.com is for sale Please prove you're not a robot View Price Processing
なぜリセットではなく Normalize.css を使うのか | Yomotsu net
まずは、歴史をみてみよう。 初期* { margin:0; padding:0; border:none; } table レイアウトから CSS レイアウトへの移行期に考案された。すべてゼロにするというコードで、実装者が書いたコードのみが適用できるという手法。弊害として input 要素の枠線など、本来、スタイルをゼロにする必要がない箇所までスタイルが消えてしまい、しょうがないので更に上から枠線を加えるなどが必要になっていた 中期今から 5 年ほど前の 2008 年、エリックメイヤー氏によるリセット CSS や YUI のリセット CSS が登場した。全称セレクター「*」 ではなく、要素セレクターそれぞれに対して CSS をゼロにするという手法。 ただし、p や見出し要素の上下マージンや li のリストスタイルまでも依然としてゼロになっていたため、次のような、本末転倒な HTML まで
第一回 プログラマ向けデザイン勉強会 #design4p で「ズルいデザインテクニック」発表させていただきました。 - 納豆には卵を入れる派です。
どうも。 書くのが遅くなりすぎてもう半月ほども前のことになってすごく今更感があるのですが、書いておくべきことを書きそびれると、その後出てくる他の書きたい小ネタがどんどん書けなくなっていってドンづまるパターンになるので、やはり書いておきますね。。 先日、第一回 プログラマ向けデザイン勉強会というイベントで下記のスライド発表させていただきました。 少ない手間と知識でそれなりに見せる、ズルいデザインテクニック// Speaker Deck 反響の大きさに驚き！ありがとうございました。 実はあんまり発表自体は、盛り上がったという手応えがあまりなくて、一方で他の2人の発表が素晴らしすぎて、割としょんぼりしながら帰ってきたんですが、スライドをアップロードしたらあれよあれよという間に2000ブクマ超え…驚きました。読んで下さった皆様、ありがとうございました。何が原因だったのか考えてみたのですが、デザイン
CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
1ランク上の「HTML5」制作に欠かせないサイト・ツール・アプリのまとめ21個！
「HTMLファイ部」のほんだです(・Å・)∫ jsdo.it、nakamap、Paberish、HTML5実力テストといった自社運営Webサービスの HTML5エンジニアをやっているものです。 よろしくお願いします！ 「HTMLファイ部」創立1周年！ 非常に手前味噌ではございますが、 弊社HTMLファイ部が創立から1年になりましたっ！・u・ HTMLファイ部は、「HTML5」技術を軸に、様々な表現に挑戦していくエンジニアを集めた部署となっています。 今回の記事では、HTMLファイ部の一周年を勝手に記念して、 HTMLファイ部のメンバーからかき集めてきた、HTML5サイト制作ツールをまとめます！ ツール系のサイト
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック// Speaker Deck
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック with Sass / Compass (English Version) https://speakerdeck.com/ken_c_lo/zurui-design-technique-english-version 第一回…
手軽に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
意外と知られていない? 画像置換のテクニック | サイブリッジラボブログ
このあいだ iPhone アプリに今までいくら使ったのか調べたら、3万くらい使ってたことに気付いてちょっと反省しているハシモトです。（App Store Expense Monitor で調べられます） 今日は画像置換について書いてみたいと思います。 画像置換とは 画像置換とはCSSのテクニックのうちの一つで、HTMLでマークアップしたテキストをCSSでテキストを隠し、画像に置き換えて表示させる手法のことを言います。 この手法はalt属性が必要でない画像を使用するとき、つまり完全にデザイン目的だけで画像を使用するときに使われたりします。 メリット 文書構造とデザインをHTML・CSSで分離でき、CSSだけで見た目のコントロールができる altのテキストを検索対象に含めない検索エンジンに対してSEO的に効果があるかもしれない background-positionプロパティを応用して、ロール
Nine Techniques for CSS Image�Replacement - CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! CSS image replacement is a technique of replacing a text element (usually a header tag) with an image. An example of this would be including a logo on a page. You may want to use a <h1> tag and text for this for the accessibility and SEO benefits, but ideally you’d like to show your logo, no
Automatic Image Slider w/ CSS & jQuery | Simple Image Slider Tutorial | jQuery Slider | jQuery Image Rotator
With the release of the iPad and its lack of support for flash, it has stirred up a lot of debates regarding the future of flash. With this in mind, I believe it is wise to build simple widgets like the image slider using HTML/CSS/Javascript, and leave more interactive applications for flash if needed. The html based image slider will have its benefits with SEO and will also degrade gracefully for
Simple Inline Modal Window w/ CSS and jQuery - CSS Popups - jQuery Popups - Inline Popups | jQuery Tutorials | Web Design Tutorials and Front-end Development Blog by Soh Tanaka
Please note: This tutorial requires intermediate knowledge of CSS and jQuery. For best results, please be sure to learn the proper foundations before attempting to take this tutorial. Learn one step at a time :-) There are many elegant and easy to install modal window (Popup) plugins out there, but there are times where the script interferes with some of the logic processed on the page. I recently
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Background image jumps when address bar hides iOS/Android/Mobile Chrome
WordPressでアイキャッチ画像に任意のデフォルト画像を設定する方法 * prasm（プラズム）
