CSS： marginの正しい理解 - kojika17
toggle()や変数、calc、:matchなど、今までにないCSSプロパティ、セレクタが提案・実装されて、CSS3, CSS4も楽しくなってきています。 border-radiusや、box-shadowなども、古いAndroidブラウザ以外なら、prefixなしで使える状況も増えてきました。 最新技術は、これから必要になってくるかもしれませんが、基本も大切です。 float や position など、CSSコーディングを悩ませるタネはいくつもありますが、今回はその中でも私がCSSで一番難しいと思う margin について書きます。 「marginはバグが多い」という声をたまに聞きます。 しかし話を聞いてみると、正常な動作をバグと間違って認識しているケースもあります。 marginを正しく理解することによって、効率的なレイアウトを構築できますので、基本的な内容ですが、読んで頂ければ幸
.NET Framework 4.6 インストール環境において正常に印刷できない場合があります - MSDN Blogs
In Visual Studio 2022 17.10 Preview 2, we’ve introduced some UX updates and usability improvements to the Connection Manager. With these updates we provide a more seamless experience when connecting to remote systems and/or debugging failed connections. Please install the latest Preview to try it out. Read on to learn what the Connection ...
画像なんていらない!! fontelloとCSS3を使って3Dボタンを作ってみた
こんにちは。 連日の暑さにとろけそう。井畑です。 今回は、前からやってみたかった事に挑戦してみました。 今はやりのWebフォントとCSS3を使って、 3Dボタンを作る事です。 以前から、機会があったらやってみようと思っていたのですが、 なかなか機会にめぐりあえず、どうせなら備忘録ついでに ブログに書いちゃえと思った次第です。 それでははりきってどうぞ！ 目次 1.Webフォントを「fontello」からダウンロード 1-1.Webフォントを「fontello」からダウンロード 1-2.解凍して中身を確認する 2.CSS3でボタンを作成 2-1.HTMLの設定 2-2.CSSの設定(WEBフォント) 2-3.CSSの設定(ボタンの装飾) 2-4.CSSの設定(ボタンのホバー時装飾) 1.Webフォントを「fontello」からダウンロード Webフォントを使うにあたり、最近とてもステキなサイ
Discover the Dark side with Shadow DOM
Is Shadow DOM something like the dark side of the DOM Tree? Actually it is! What’s inside? The above illustration perfectly shows what is Shadow DOM actually is. HTML5 video element is <video> tag and it is the only one you have. Really? Then, what about video player with all these user interface elements. What sorcery is this?! That is the dark side, these UI elements are basic HTML elements whic
オールドスタイルな数字を普通のものに
オールドスタイルな数字っていうのはGeorgiaとかで見るオシャレなあの数字のこと。Corbelというx-heightが高めでオープン・カウンターという読みやすさ重視のなかなか優秀なサンセリフ体もオールドスタイル。ただ和文とは相性が良くないので、どうにかして数字だけ普通のものに差し替えてみようという試み。 unicode-rangeプロパティー @font-faceディレクティブのunicode-rangeプロパティーでカスタム・フォントを作成するテクニックを使ってCorbelの数字をCalibriに置き換えてみる。 Demo: Use non oldstyle numbers for Corbel Chrome 20とInternet Explorer 9で反映される。それ以外ではunicode-rangeプロパティーが無視されるので、アルファベットや記号も含めて完全にCalibriにな
【完全版】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ライセンスで公開しており、ダウンロー
Readymag — Your own publishing platform
The intuitive drag-and-drop interface gives you everything you need. Designers can switch to Readymag seamlessly, and marketers quickly get used to it. The intuitive drag-and-drop interface gives you everything you need. Designers can switch to Readymag seamlessly, and marketers quickly get used to it.
Border Image CSS Code Generator - Easy Image Border - Border Image
Create now your custom border image CSS Border image generator allows programmers and developers to draw an image on the borders of an element. It provides room for efficient and perfect design. It is very complex to do it by yourself, you need this generator to assist you and it is a bit frustrating to properly take by hand. Though it is tricky, it allows users to create flexible borders with a s
CSS3 の border-image で簡単にリッチなボタンを作れる未来がいつの間にかきてた - latest log
画像を使ってリッチでフレキシブルに伸び縮みするボタンやフレームを作る時みなさんはどうしているでしょうか。 従来の方法だと デザイナーさんが画像を9分割 マークアップで頑張って再現する というハードワークを強いられていましたが、 昨今のモバイル開発環境では、それ、もう要らない苦労らしいですよ。 CSS3 の border-image を使うと、9 slice(9 patch)を CSS だけで実現可能です。 用意するものは、9つに分割する前のボタン画像です。 画像を用意したら、http://border-image.com のジェネレーターを使い border-image 用のCSSを生成します。 -webkit-border-image: url(img/btn.9.png) 27 24 30 25 round; とすると、 Android Browser 2.3.3 iPhone 4S
Learn web development | web.dev
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
HTML -> CSS -> SVG -> CSS
HTMLで参照しているCSSでSVGを参照する……まではマイナーとはいえ使っている人はいると思う。これでまぁスケーラブルな画像という条件は満たせるのだけど、せっかくSVGではCSSを参照できるのだから、そのCSSでSVGのスタイルも指定できたら色々便利でリソースの節約にもなるんじゃないかという実験……が失敗に終わった話。タイトルわかりづらい。 Demo: HTML -> CSS -> SVG -> CSS SVGでCSSを使う方法は簡単で、<?xml-stylesheet?>を使うだけ。CSSでスタイルを書きやすくするためid属性を指定しておくと良い。 <?xml version="1.0" encoding="UTF-8" standalone="no"?> <?xml-stylesheet type="text/css" href="test.css"?> <svg id="foo"
Lea Verouのフレシキブルな複数行定義リスト
Lea Verouの編み出したフレキシブルな複数行定義リストは目からウロコだった。このテクニックを知るまではfloatを使うと長い時(コンテンツ幅に収まらない時)に途中で改行とかうまくできないけどまぁしょうがないか……みたいな感じで我慢していた。LF(やCR)を擬似要素経由で挿入してwhite-space: preで改行させてしまうというのは頭良い。ただ複数のdd要素を持つケースにはうまく対応できないのでちょっと変えて使い始めた。 このテクニックはつまりdt要素とそれとセットになったdd要素を一行に並べるというもの。表的なものならばそれは単にマークアップが間違っているのでtable要素でマークアップし直した方が適切だけど、dl要素のが適切なケースも多くあるのでこのテクニックが生かされる場面は多い。 dt, dd { display: inline; } dd + dt:before { c
そのベンダー接頭辞はいつまで書くの？
ベンダー接頭辞（プレフィックス）については最近いろいろと議論が活発ですが、そういう難しい話ではなくて、現状のCSSについての話です。 新しいCSSモジュールを使うために、ブラウザごとに接頭辞をつけなくてはいけない場合があります。まあそれについては現状では仕方ないことなんですが、接頭辞なしでも動作するようになったものでも、いつまで経っても接頭辞つきのものを書くのはどうなのかなと思うわけです。 CSSのコードも冗長で読みづらくなりますし、もう使われていない（使われることもない）であろうものを残しておくのもちょっとなー。 実際に運用されているサイトなんかだとそうそう簡単に手を入れられないかもしれませんが……。 また、はてなダイアリーの方でも書きましたが、ブログのチュートリアルを見ていて「もうその接頭辞つきの役目は終わった（終わりつつある）のに、なんでそれしか書いてないの」と思うことが結構あります
Text masking — The standards way • Lea Verou
As much as I like .net magazine, I was recently outraged by their “Texturizing Web Type” article. It features a way to apply a texture to text with -webkit-mask-image, presenting it as an experimental CSS property and misleading readers. There are even -moz-, -o- and -ms- prefixes for something that is not present in any specification, and is therefore unlikely to ever be supported by any non-WebK
横並びのリストのセンタリング
リストを横並びにしてセンタリングというのはよく使う。ただよく使う(われる)わりには「これ！」というようなテクニックがないような気がする。inline-blockで並べた場合は項目の間に隙間ができ、floatで並べた場合はセンタリングがトリッキーすぎる。気分で色々使い分けてたけど最近はdisplay: inline-tableをよく使うようになって、これで良いかなーという感じ。 <nav class="paging"> <ul> <li><a href="foo">Prev</a></li> <li><a href="bar">Next</a></li> </ul> </nav> というようなマークアップの一般的なページング・ナビゲーションだと、 .paging { text-align: center; } .paging ul { display: inline-table; } .pa
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
)
Think of graphics in a new way (Internet Explorer)
How to disable text selection highlighting
3D Thumbnail Hover Effects
Google Bootstrap has moved!
pointer-events - JSFiddle - Code Playground