CSS Writing Modes Level 4 （日本語訳）
◎要約 CSS Writing Modes Level 4 は、 様々な書字~mode, および それらの組合nのための， ~CSSによる~supportを定義する。 これらの~modeには、［ 右向き, 左向き ］~text順序付け, および［ 縦書き, 横書き ］方位も含まれる。 ◎ CSS Writing Modes Level 4 defines CSS support for various writing modes and their combinations, including left-to-right and right-to-left text ordering as well as horizontal and vertical orientations. ~CSSisaLANG ◎位置付け これは、編集者草案の公な複製です… 【以下、この節の他の内容は，~SOT
文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング - ICS MEDIA
游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較！ 和文フォントが使える5つのサービスの利点まとめ」を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境：ほぼすべてのブラウザで利用可能 これだけ便利なCSSですが、どれだけの
[CSS]レスポンシブ用にフォントのサイズと行の高さを可変で指定する極上テクニック -The math of CSS locks
CSS lockはレスポンシブWebデザインのテクニックで、フォントのサイズなどを指定した2つの値の間でスムーズに移行させることができます。レスポンシブのテクニックは通常、指定した値でフォントのサイズが急に変化しますが、常にビューポートの現在のサイズに依存して変化します。 レスポンシブ用にフォントのサイズと行の高さを可変で指定するテクニックを紹介します。 「math」とあるように、もう完全に数学です。 The math of CSS locks 下記は各ポイントを意訳したものです。 検証やスタディ部分は省略しているので、元記事をご覧ください。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSS lockとは px単位のブレイクポイントを使ったCSS lock em単位のブレイクポイントを使ったCSS lock CSS lockまとめ CSS lockとは ビュー
![[CSS]レスポンシブ用にフォントのサイズと行の高さを可変で指定する極上テクニック -The math of CSS locks](https://cdn-ak-scissors.b.st-hatena.com/image/square/aa274fa204c0989fce8a28f04876115be7ee34a7/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201604%2F2016100201.png)
SkyBlue CSS Framework
About This is not Bootstrap killer, I just think Bootstrap is way too bloated. SkyBlue is a minimal framework that is meant to be starting point for my projects. Uses grid system with 12 columns. I made it for my own needs. Feel free to use it and abuse it, in both free and commercial products. SkyBlue is available on bower: bower install skyblue Framework is made in SASS and source is available o
CSS基礎文法最速マスター
最近ネット界隈で流行中の「基礎文法最速マスター」シリーズ。 Parlから始まったこのシリーズですが、いまやPHPやRubyをはじめ、JavaScriptからVBA、果てはjQueryに至るまで、かなりの数の言語が「基礎文法最速マスター」シリーズ化されています。 そこでワタクシもどーにか便乗してやろーと画策しまして、得意分野のCSSについてまとめてみたいと思います。 まぁCSSはプログラム言語とは呼びませんが、プログラマさんなんかは結構苦手意識のある方も多いようなので、ちょっとでも参考になればと思いますー。 CSSの基礎 CSSとは 一言で言えば、(X)HTMLでマークアップされたページの見栄えをコントロールするためのものです。 CSSを使う事で、(X)HTML側ではページの内容や構造だけの記述に留める事が出来るので、検索エンジンにも優しく、デザインの変更も容易になる（と言われてますが、実際
CSS の pointer-events プロパティでマウスイベントを制御する - Qiita
Twitter Bootstrap の .btn に .disabled をつけると、click イベントが発生してないことに今さら気がついて、なんでだろうと思ってコードをみてみたら、こういう指定があった。 .btn.disabled, .btn[disabled], fieldset[disabled] .btn { pointer-events: none; /* これなに */ cursor: not-allowed; filter: alpha(opacity=65); -webkit-box-shadow: none; box-shadow: none; opacity: .65; } pointer-events はデフォルト値 auto 、 これを none とすると、マウスイベントを拾わなくなるらしいです。 モダンブラウザではサポートされてるけど、IE は11から。 SVG
かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技
2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変える フォームにテキストを入れておき、フォーカスで消す（文字色も変更） ラジオボタンとチェックボックスを装飾する スライドパネル アコーディオン ツールチップ 言語によってスタイルを変更 横並びのdivの高さ揃える ボックスを上下左右中央に配置する それでは実際にどんな事ができるのか見てみましょう！サンプルも作ったのでコードと
[16-1] table（表）を作ろう（まずは基本の table, tr, th, td）
[16-1] table（表）を作ろう（まずは基本の table, tr, th, td） 最終更新日：2017年11月11日 （初回投稿日：2011年06月13日） 今回から、table（テーブル = 表）を作ってみましょう。 テーブルはデータをまとめて表組みにしたいときに使用します。 テキストだけで説明するよりわかりやすくするのが表組みです。 HTMLでの テーブルは、表組みにする必要がないモノに使ってはならないことになってます。例えば、レイアウトだけのためにテーブルを使うのはNGです。 使用する要素 ● 2017年10月、本文を大幅に書き換えました。 最小単位 <td>要素だけの構成から <tr>要素でグルーピングするという流れに書き換え、サンプルは本文内に記載し、外部サンプルをやめました。 最小の部品「テーブルセル」があってこそテーブル <table>要素は中身が何も無ければ、ぺっ
![[16-1] table（表）を作ろう（まずは基本の table, tr, th, td）](https://cdn-ak-scissors.b.st-hatena.com/image/square/f528719e5157b3361ee24d4244bf8c5a7ba0b84c/height=288;version=1;width=512/https%3A%2F%2Fblog-imgs-37.fc2.com%2Fh%2Fo%2Fn%2Fhonttoni%2F110609.gif)
[CSS][縦書] CSS研究部Webサイトを立ち上げました｜TechRacho by BPS株式会社
お久しぶりです、hachi8833です。 9月に弊社内にてCSS研究部会が結成され、このたび以下の公式ページを公開いたしました。 CSS研究部 -- BPS株式会社 第一回部会 -- part 1 弊社では日本語縦書きビューアエンジン[超縦書]電子書籍での縦書き表示に力を入れており、CTOのbabaさんを始めとするメンバーが、W3CのCSS仕様と各ブラウザでのCSS実装の違いなどの先進的な課題に日々取り組んでいます。 部会での成果は今度上のページにて継続的に発表いたしますので、どうぞご期待ください。 ブラウザごとに縦書き表示がいかに異なるか CSS部ページのお披露目代わりに縦書き表示のサンプルをご紹介します。CSS研究部トップページの冒頭に掲載されている縦書きサンプルを使用して、ブラウザによる縦書き表示の違いを確認できます。皆様の環境ではどのように表示されるでしょうか? ご自由にさまざまな
![[CSS][縦書] CSS研究部Webサイトを立ち上げました｜TechRacho by BPS株式会社](https://cdn-ak-scissors.b.st-hatena.com/image/square/688799418e6705d87fd79219f7e27f11b84a007b/height=288;version=1;width=512/https%3A%2F%2Ftechracho.bpsinc.jp%2Fwp-content%2Fuploads%2F2014%2F11%2Fcsslab-square-e1416377125309.png)
なんでCSSすぐ死んでしまうん
The document discusses schema design patterns for MongoDB databases. It introduces common patterns like attributes, subset, computed, and approximation. Attributes store optional fields as field-value pairs to index them easily. Subset duplicates a small subset of dependent documents to reduce working set size. Computed pre-calculates values to avoid repeated computations. Approximation uses fewer
Web制作者のためのCSS設計の教科書を読んだ - satococoa's blog
久しぶりに仕事で Web 側の view を作っていて web のフロントエンドの技術からだいぶ遅れてしまっていたことを実感したので、キャッチアップするために以下の本を読みました。 Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 作者: 谷拓樹出版社/メーカー: インプレス発売日: 2014/07/24メディア: 単行本（ソフトカバー）この商品を含むブログ (3件) を見る 例によって PDF が欲しかったので達人出版会で買いましたが、ちょうどポチった翌日から kindle 版が半額以下になるという悲しい現実。(いや、でもどうせ PDF が欲しかったのできっとどちらにせよ達人出版会で買ったと思いますが...。) 以下感想です。 どんな本？ CSS の "設計" について書かれた本です。 フロントエンドの "設計" というと JavaSc
CSSだけで簡単に吹き出しを作成する方法4つ！
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <style type="text/css"> * { box-sizing: border-box; } .wrapper { padding: 30px; position: relative; } .box { position: relative; background: #ccc; height: 50px; width: 100px; margin-bottom: 20px; } .box:after { content: ''; position: absolute; border-top: 10px solid #ccc; border-right: 5px solid transparent; border-left: 5px solid tran
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
このドメインは お名前.com から取得されました。 お名前.com は GMOインターネットグループ(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込です。 ※サービス品質維持のため、一時的に対象となる料金へ一定割合の「サービス維持調整費」を加算させていただきます。 ※1 「国内シェア」は、ICANN(インターネットのドメイン名などの資源を管理する非営利団体)の公表数値をもとに集計。gTLDが集計の対象。 日本のドメイン登録業者(レジストラ)（「ICANNがレジストラとして認定した企業」一覧（InterNIC提供）内に「Japan」の記載があるもの）を対象。 レジストラ「GMO Internet Group, Inc. d/b/a Onamae.com」のシェア値を集計。 2023年5月時点の調査。
抽象化と組み合わせができるレイアウト言語があれば、CSSは必要ない | POSTD
Web上の視覚的なスタイルを指定するCSSは、あまりにも複雑で、恐らく今までに一度も正確に実装されたことはないだろう。それにもかかわらず、バージョンが上がるにつれて、その複雑さは増すばかりだ。一方で、CSSではできることが限られており、初歩的なデザインでさえ不可能であるか、あるいは法外に難しいことも少なくない。加えて状況依存的（または計算的）な側面を持つものは、すべて外部で対応しなければならないという有様だ。その結果、CSSに関するほとんどの手引きでは、希望する外観に何とか近づけたり、非互換性を回避したりするための頼りないハックに多くの労力が費やされている。 – Bret Victor 私は近年、クライアントサイドの開発技術を数多く見てきました。そして、その中でも特に興味深いと思ったのが Elm です。関数型のプログラミング言語としては、Elmはそれほどワクワクするようなものではありません
CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 | バシャログ。
Backjoyを買ってみたらほんとに腰が楽なminamiです。 CSSで要素を上下中央寄せする方法は古くから色々と試されてきました。 今回は海外のサイトで知って目から鱗だった方法をご紹介します。 基本的な設定 上下左右中央寄せしたい要素に以下のCSSを設定します。 position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 任意の値 height: 任意の値 これだけ。これだけで親要素に対しての上下左右中央寄せを実現できます。 追記： 親要素にはposition: absolute;かposition: relative; を設定してください。body に対してセンター寄せしたい場合はそのままでOKです！ 今までtop とleft の値を50%にとって、要素の高さと幅の分だけマイナスのmarg
CSS Lint
Errors (All) | (None) Beware of broken box sizing Require properties appropriate for display Disallow duplicate properties Disallow empty rules Require use of known properties Compatibility (All) | (None) Disallow adjoining classes Disallow box-sizing Require compatible vendor prefixes Require all gradient definitions Disallow negative text-indent Require standard property with vendor prefix Requi
MVCSSとか言うCSSフレームワークについて
[追記] 続編記事書きました! MVCSSを使ってみる 1 MVCSSを使ってみる 2 概要 MVCSSはSassベースのcssフレームワークです。 Twitter Bootstrapなどと異なって、cssを効率よく管理するためフレームワークです。 webシステムに組み込まれたcssが複雑になりすぎるという問題は他にも解決策があり oocss BEM SMACSS などが有名ですが、フレームワークというよりレギュレーションに近いかもしれません。 MVCSSではCSS必要な構成を6つのファイルに分けて管理しています。 また、CSSに関する6つのファイルと全体構成に関する処理をそれぞれを3つの主要なセクションに分類してCSSに関する部分(実際にメンテナンスされる部分)を分離しています。 基本 Section1 Application application.sass MVCSSで利用するコンポ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Rubyist のための CSS 勉強会 / nishiwaki. kobe css
CSS Arrow Please - By Simon Hoejberg - @shojberg
ブラウザにやさしいHTML/CSS
