[B! css][Web] Kuichiのブックマーク

Flexbox Cheat Site

Webエンジニアとデザイナーのための CSS Flexbox チートシート

Kuichi 2020/05/26

リンク

HugeDomains.com

Captcha security check gakublog.com is for sale Please prove you're not a robot View Price Processing

Kuichi 2020/02/03

明日設定してみよ

リンク

2020年5月13日 CSS プログラミングではおなじみの変数。SassやLESSといったCSSプリプロセッサーをお使いの方もよく使うものですね。この一度定義しておけば繰り返し利用できる便利な変数が、CSSでも使えるようになりました！今回はCSS変数（カスタムプロパティ）の使い方と注意点をまとめていきます！ ↑私が10年以上利用している会計ソフト！ CSSカスタムプロパティとは？公式では「カスケード変数のためのCSSカスタムプロパティ（CSS custom properties for cascading variables）」としていますが、単に「CSSカスタムプロパティ」や「CSS変数」などとも呼ばれています。変数は文字列や数値などを入れる箱のようなものです。例えば数学では「y = 3x」のような式があり、この y や x の中には自由に数字を当てはめられます。これが変数というもの

Kuichi 2018/02/07

便利。ただIE11が…

リンク

「Web Componentsが来る！CSS設計はどうなる？」―CSSのエキスパートに聞いてみた！

「Web Componentsが来る！CSS設計はどうなる？」―CSSのエキスパートに聞いてみた！白石俊平（HTML5 Experts.jp編集長）こんにちは、編集長の白石です。 Safari 10.1からCustom Elementsが使えるようになったり、Microsoft EdgeもWeb Componentsの実装を約束していたりと、Web Componentsの足音は刻一刻と迫ってきています。そんな時代に、Web開発はどう変わるのか？まずはCSS設計というところに着目して聞いてみたいと思い、先日「Web Components時代のCSS設計」という座談会を開催し、エキスパートの方々にお話を伺ってみました。ゲストのエキスパート紹介高津戸壮さん株式会社ピクセルグリッドフロントエンドエンジニア Web制作会社、フリーランスを経て、株式会社ピクセルグリッドに入社。スケー

Kuichi 2017/04/18

リンク

一つの要素にCSSだけでどれだけ枠線を引けるかチャレンジ | SHIROMAG

要素に枠線を引く方法はいくつかありますが、今回は異なるプロパティでどれだけ枠線を引けるか挑戦してみました。疑似要素はなし。 html <div class="box"></div> css .box { width: 250px; height: 250px; background-color: #f0f0f0; border: solid #ddd 4px; outline: solid #aaa 4px; background-image: linear-gradient(#999, #999 8px,transparent 8px), linear-gradient(-90deg,#999, #999 8px,transparent 8px), linear-gradient(90deg,#999, #999 8px,transparent 8px), linear-gradien

Kuichi 2017/03/25

css
web

リンク

文字詰めできるCSSのfont-feature-settingsが凄い！日本語フォントこそ指定したい自動カーニング - ICS MEDIA

游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較！和文フォントが使える5つのサービスの利点まとめ」を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。対応環境：ほぼすべてのブラウザで利用可能これだけ便利なCSSですが、どれだけの

Kuichi 2017/02/20

リンク

picture要素やsrcset属性による画像のレスポンシブ、高解像度対応 | フロントエンドBlog | ミツエーリンクス

2016年12月22日 picture要素やsrcset属性による画像のレスポンシブ、高解像度対応 UI開発者宇賀数多の画面サイズ、従来に比べて2～3倍あるいはそれ以上の解像度を誇るディスプレイなど、日々Webサイトが閲覧される環境の種類は着実に増えています。そんな中Webサイトを制作していく上で、やはり画像のレスポンシブ対応や高解像度対応などが課題となることがあります。 picture要素やsrcset属性を用いることで、画像についてのそうした課題を解決することができます。 ※ この記事に登場するサンプルは、次のリンクでサポート状況が確認できます。サポート外の環境では正常に表示されません。 picture要素のサポート状況（Can I use） srcset属性のサポート状況（Can I use）画像のレスポンシブ対応通常、以下のように画面幅に応じて画像を拡縮させる対応方法が主だ

Kuichi 2016/12/27

画像の切り替えが手間なので、早く色々な環境で使えるようになると嬉しいなあ。

リンク

Webにおける縦書きの普及を目指す「縦書きWebデザインアワード」開催

電子書籍端末メーカー、印刷会社、通信事業者などの民間企業等により構成される「縦書きWeb普及委員会」（正式名称：次世代Webブラウザのテキストレイアウトに関する検討会）は、縦書きを利用したWebコンテンツの普及促進の一環として「縦書き Webデザインアワード」の開催を発表しました。 2016年1月に募集を開始し、表現的に優れた実用性の高い縦書きの作品、Webの新たな可能性を見せてくれるような縦書きの作品を表彰します。募集するのは「自由部門」「課題部門」「高校生以下の部」の3部門。自由部門では、CSSによる縦書き機能の「CSS Writing Modes」を用いて自由なWebコンテンツを募集します。課題部門では、主催者が提示したテキストや画像を素材に、CSSによる縦書き機能の「CSS Writing Modes」を用いたコンテンツを募集します。「高校生部門」は、上記2つの部門において高校生

Kuichi 2015/11/17

リンク

Android4系のデフォルトブラウザでwidthが効かないバグとbackground-colorで回避出来るというメモ | kanonjiのブログ

Android4系のデフォルトブラウザで、どうしてもレイアウトが崩れるという話を持ちかけられて、調べてみました。どうもviewportを指定してない場合に、widthがdevice-widthより大きな値を指定しても、無視されるというものみたいです。 widthが効かないというのがどういう事か、文章だとよくわからないと思うので、再現させるコードと、それを表示したスクリーンショットを下の方に載せてます。解決策なにが起きるかと言うと、 p要素のwidthを無視して勝手に横幅が設定されて幅が短くなる。 androidのバージョンによって変わるみたいで、 android2系だと問題ないけどandroid4系だとおかしい(端末の違いも考えられるけど)。いろいろやってみて、なぜかbackground-colorを入れると意図した幅で表示された。なんでbackground-c

Kuichi 2015/07/25

リンク

CSSを書く時、絶対に参考にしておきたいCSSガイドラインのまとめ

CSSはどちらかと言えばやさしく、雑にコードを書いてもなんとかなってしまう言語です。しかし、雑にコードを書いてしまうと、昨日書いたこのコードなんだっけ？とか、新しくスタイルを増やすと別のスタイルがおかしくなってしまうことはありませんか？大規模なプロジェクト、長期に渡るプロジェクト、複数のメンバーが関わるプロジェクト、そして明日の自分も一年後の自分も使える、メンテナンス性に優れた一覧性のある美しいCSSを書くのに役立つガイドラインを紹介します。 CSS Guidelines 2 CSS WizardryのHigh-level guidelinesの最新版（2014年8月リリース）。大規模で長期に渡るプロジェクト向けのメンテナンス性に重点をおいたスタイルシートのガイドラインです。スキルの異なる制作者、新規で加わる制作者などでも、統一されたコードでの制作が可能になるのを目的としています。