CSSのcalc()関数で、レスポンシブ対応のfont-sizeを可変にするスタイルシートを簡単に生成できる無料ツール
レスポンシブ対応で、可変のfont-sizeを定義するスタイルシートを記述するのは、なかなか面倒です。 スマホ表示での最小値、ワイドスクリーンでの最大値を決め、その間は可変サイズで表示されるfont-sizeのスタイルシートを簡単に生成できる無料オンラインツールを紹介します。 font-sizeは自由に定義できるので、日本語のフォントでも最適に利用できます。 Fluid-responsive font-size calculator Fluid-responsive font-size calculatorは、レスポンシブ対応のfont-sizeを可変にするスタイルシートもこの計算機で簡単に生成できます。font-sizeは最小値と最大値を決め、その間のサイズはcalc()関数でスムーズに変更させます。例えば、スマホなどの小さいスクリーンでは16px（最小値）に、ワイドスクリーンでは24p
Fluid-responsive font-size calculator
Generated CSS: What are fluid-responsive fonts / fluid typography? Also known as: Responsive typography (excellent article), Flexible Type, Fluid Type, Viewport Sized Typography, Fluid Typography, and even Responsive Display Text. They all leverage the viewport width, and / or height, to smoothly scale the font-size rather than switch at specific breakpoints. Some versions address the whole page,
CSSのコード整形ツール
公開日: 2015/08/28 | 更新日: 2017/05/29 Minify処理などで難読化してあるスタイルシートのコードに、インデントや改行を付けて見やすく整形するツールです。他サイトのCSSを分析したい時、間違えてMinify前のコードを消してしまった時などにご利用下さい。 変換「変換前」のフォームに、コードを入力するか、ファイルをドロップして下さい。「変換後」のフォームに変換結果が表示されます。
Autoprefixer CSS online
What is it Autoprefixer online — web repl for original Autoprefixer. It parses your CSS and adds vendor prefixes to CSS rules using values from Can I Use. It is recommended by Google and used by Twitter and Taobao. How does it work The Autoprefixer uses data on the popularity of browsers and support for vendor prefixes by browsers. Based on this information, it arranges and deletes the prefixes. I
Pretty Diff - The difference tool
☰Application Menu ⛶Toggle Fullscreen Pretty Diff - Austin Cheney Access the old Pretty Diff tool. Written 12 August 2023 I lived in Afghanistan for nearly 2 years for two separate US Army deployments. I write this just over 14 years after first stepping foot in Afghanistan. Travel Living and Waiting On the first Afghanistan deployment I was constantly traveling, and travel in Afghanistan was rough
HTML5・CSS3のブラウザ対応チェックサイト3選 | Webデザイン・Webデザイナースクール
Web業界で仕事をしていくにあたって、もっとも重要なことのひとつは、最新技術を追い続けるということです。しかし、そこで困るのが、最新技術を試してみたいけど、どのブラウザだったら対応しているのか、ということだと思います。 そこで、ブラウザごとの技術対応状況が一覧で分かるWebサイトをご紹介していきたいと思います。 Can I Use... HTML5、CSS3、JavaScriptまで、幅広く対応していて、Web技術者にとって欠かせないWebサイトといっても良いくらい有名なサイトです。調べたい技術を検索ボックスに入力することで、ブラウザごと、さらにバージョンごとにも詳しく対応状況を一覧することができます。 MOBILE HTML5 その名のとおり、モバイルブラウザに特化してHTML5やCSS3の対応状況を確認することができます。Can I Use... よりもモバイルブラウザに多く対応してい
CSS GridのIE11をはじめ、サポートするブラウザに合わせた最小限のコードを自動生成できるツール -Grid Wiz
CSS Gridで実装する際に悩ましいのが、サポートブラウザです。 IE11をはじめ、Chrome, Safari, Edgeなどの古いバージョンにも対応したコード、最新のバージョンに対応したコードなど、サポートするブラウザに合わせて最小限のコードを自動生成できるツールを紹介します。 Grid Wiz Grid Wiz -GitHub Grid Wizの特徴 Grid Wizの使い方 Grid Wizの特徴 Grid WizはCSS Gridで実装する際に、サポートするブラウザに合わせて最小限のコードを自動生成するツールです。デスクトップだけでなく、スマホやタブレットでも実際の表示を確認しながら、利用できます。 スマホで、コードベースのWeb制作をする日が近いかもしれませんね。 CSS Gridのレイアウトをサポート CSS Gridで実装するさまざまなレイアウトをサポートしています。 C
制作者はなんと15歳のイケメン！今風の美しいCSSグラデーションがコピペで簡単に利用できる -Gradient Hunt
Webサイトやスマホアプリで人気が高い、色相を変化させた美しいグラデーションがCSSのコード・デザイン素材で利用できるオープンソースの無料サイトを紹介します。 制作者（@fmaldonadoy）は15歳のデザイナー兼Webデベロッパーで、この美しいグラデーションは日々更新され、どんどん増えています。
激簡単にHTMLとCSSの共有が出来るリアルタイムオンラインエディタScrathpadが良い感じ！ | バンクーバーのうぇぶ屋
先日一通のメールが届きまして、ScrathpadというオンラインHTML＆CSSエディターのローンチをお知らせするメールでした。 新サービスの公開しましたメールはよく届くので、オンラインエディタであればjsfiddleをよく使う僕にとっては得に期待してたわけでは無かったのが正直な所ですが、いやコレはもしかしたら乗り換えるかもと思ったので、まずは皆さんとも共有させて頂ければと思います！ 似たサービスならCssizer.comやjsdo.itなんかが挙げられますが、僕のようなフロントエンド畑の人間であれば得に簡単なHTMLとCSSを仲間内と共有したい機会なんか多いわけで、とにかく”ド”シンプルなオンラインエディターの方が嬉しいっちゃ嬉しいわけです。 そういう”ド”シンプル、”ド”簡単って意味では今回ご紹介するScrathpadというサービスはなかなか僕の希望を叶えてくれましたので、まずは超カン
これなら簡単！Bootstrap 4.0のデザインがカスタマイズできる商用でも無料のオンラインツール -Bootstrap Magic
Bootstrap 4.0のテンプレートやコンポーネントのデザインを確認しながら、定義されている変数を簡単にカスタマイズできるオンラインツールを紹介します。 BootstrapでWebサイトやブログを作成する時に、BootstrapのUIコンポーネントを利用する時に、Bootstrapのテーマを作成する時に、便利なオープンソースの無料ツールです。 Bootstrap Magic Bootstrap Magic -GitHub Bootstrap Magicの特徴 Bootstrap Magicの使い方 Bootstrap Magicの特徴 Bootstrap 4.0対応 最新のBootstrap 4.0のすべてのテンプレート・コンポーネントに対応しています。 Sass対応 BootstrapはSassにも対応しているので、Bootstrap Magicでも同様にSassの変数が利用できます
Coveloping
box-shadowでふわりとした影をつくるCSSのジェネレーター、レスポンシブのチェック、アスペクト比の計算機、CSS/JSの軽量化など、たくさんの便利な時短ツールがありますが、それらの便利なツールを一つの場所にまとめたCovelopingを紹介します。 FacebookのOPGチェックやGoogle Mapsの地図生成ツールもあり、新しいプロジェクトを始める時にも役立つものが揃っています。 Coveloping 便利ツールは現在23種類、アスペクト比の計算や一つのカラーに黒と白を加えたバリエーションを生成したり、box-shadowでふわりとした影をつけたり、jQueryのアニメーションのエフェクトなどがあります。 これからもどんどん増えていくそうです。 その中から、いくつか紹介します。
ブラウザ上でHTML / CSS / Javascriptを書いてその場で実行、ブログ等にも貼付できるjsfiddleの基本的な使い方をざっくりと
個人的にお勧めしているjsfiddleですが、せっかくなのでちゃんと記事にして普及活動をしてみようかなと思います。jQueryのコードを気軽に試す、などにも最適です。 全部は書ききれないのでざっくりと、程度です。一応基本的な部分だけ・・jsdo.itでいいじゃんとか言われそうな空気満々ですが、いいならこんな記事書きませんのでお察し頂ければ幸いです。 jsfiddleとは、その場でjsコードを実行、動作テストできるツールで、人気のjsライブラリのjQueryの公式サイトでもバグを伝えるときはjsfiddleを使用して動作を見せるように薦められます。 When You Report A link to a reduced, working demo/test case that will never move (jsFiddle is good for this). （意訳：バグを報告するとき
JavaScriptとCSSファイルのHTTPリクエストを最小限にし圧縮・キャッシュする -BoxJSとBoxCSS
ウェブサイトで使用する複数のJavaScriptとCSSファイルのHTTPリクエストを少なくし、圧縮・キャッシュするサービスを紹介します。 [ad#ad-2] 複数のJSファイルをまとめる -BoxJS 複数のCSSファイルをまとめる -BoxCSS 複数のJSファイルをまとめる -BoxJS BoxJSは一つのJSファイル（box.js）を利用し、モジュール式のローディングシステムで複数のJSファイルをロードできます。 BoxJS BoxJSの使い方 最初に、box.js(1.4kb)を外部ファイルとして指定します。 <script src="http://www.boxjs.com/box.js"></script> ロードするJSファイルを指定します。 Box('http://mywebsite.com/scripts/', [ 'plugins/jquery.js', 'plugi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]見出し、本文、リストなど、文字周りをrem指定で簡単に設計できる便利なオンラインツール![[CSS]見出し、本文、リストなど、文字周りをrem指定で簡単に設計できる便利なオンラインツール](https://cdn-ak-scissors.b.st-hatena.com/image/square/debac5ced80c80ee248dfc210d9fa594af0e6ca3/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018080310.png)
CSSの単位「rem」を使ったフォントサイズの計算を自動で一覧表示してくれる便利ツール -PxtoRem
CodePen - Front End Developer Playground & Code Editor in the Browser
HTML/CSSも吐き出す超お手軽な世界地図素材作成サービス「Pixel Map」
IDEA * IDEA
CSS3の制作をぐっと楽にする厳選20のオンラインツール
背景に使えるドットパターンをCSSおよび画像で生成してくれるサイト「Patternify」 | ライフハッカー・ジャパン
