Forking Chrome to turn HTML into SVG - Fathy

2022/11/14 12 users Standards height width

Forking Chrome to turn HTML into SVG November 11th 2022 I've been working on a program called html2svg, it converts web pages to SVG. It's based on a fork of Chromium to support modern web standards. This post explains most patches. Take a picture SkiaBlinkPDF<div style="width: 50px; height: 50px... 続きを読む

CSSの関数はどんどん便利になっている！minmax()を使うとMedia Queries無しでレスポンシブが簡単に実装できる | コリス

2017/06/14 917 users minmax コリス Calc CSS 関数

CSSの関数には便利なものがたくさんあります。例えば、div要素に「width: calc(100% - 50px);」と指定することで、幅いっぱいから50pxを引いた値を幅に適用できます。 minmax()関数はcalc()関数のように数字やキーワードを使って、要素の最小値と最大値を指定でき、簡単なCSSの記述でレスポンシブ対応の高度なレイアウトを作成できます。 下記のレスポンシブ対応のグリッド... 続きを読む

アイコンとかに便利なSassの書き方 | Workabroad.jp

2014/09/09 13 users CANPATH Sass マージン CSS アイコン

CSS Spriteでアイコンを表示させるってのは良くやるけども、 意外にもSassで書いたのは初めてだったので、メモ。 CANPATHで選べるアイコンを増やしました。 自分史を作るのがまたちょっと楽しくなると思います。 で、このCSSを作る方法。 まずは画像を用意します。 ひとつのアイコンは40px四方でマージンも合わせるとちょうど50pxになるようにしています。 なのでこの画像は、500px ... 続きを読む

[CSS]スマフォから大きいサイズのデスクトップまで考慮したレイアウト -Rubber Layouts | コリス

2011/09/04 173 users 可変 ウェブページ コリス しま テクニック

デモページ：幅480pxでの表示 ヘッダ・コンテンツ・サイドバーすべてを同じ幅に変更。 Rubber Layoutsの特徴 多くのウェブページで可変であるFluid Layoutが使用されています。このテクニックは非常に有用ですが、マイナスの面もあります。 スマートフォンで可変のレイアウトを表示するのを想像してみてください。サイドバーはたぶん50pxくらいで、コンテンツは250pxで表示されてしま... 続きを読む