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
CSSのborder-radiusは実はすごかった！あまり知られていない機能を使用して、かっこいいレイアウトを作る方法
border-radiusプロパティは角丸を定義しますが、カードなどの矩形の角を丸くするために使用するだけでなく、さまざまな形を作成することができます。 矩形や角丸だけのレイアウトではなく、さまざまな形を使用できるスタイルシートのテクニックを紹介します。 CSS border-radius can do that? 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに border-radiusの基礎知識 流れに逆らう（わないで） はじめに 今年開催されたFrontend Conferenceにて、Rachel AndrewはCSS Gridのレイアウトについて講演しました。中でも私が注目したのは、彼女の話の終わりにあったCSSの古いプロパティについてです。 イメージはborder-radiusプロパティを使用するだけで、用
ウェブデザイナー必見！美しいCSSグラデーションをコピペできる無料ツール17選まとめ
デザインでもっとも頭を悩ますことの多い「配色えらび」。配色を決まらずに、時間だけが過ぎてしまったという経験のあるひとも多いでしょう。 そんなときは、無料で使えるオンラインツールを利用してみましょう。今回は、グラデーションカラーに特化し、CSSコードも手軽にコピペできるツール17個をまとめてご紹介します。2018年のデザイントレンドをうまく反映したカラーリングだけでなく、お好みのグラデーションカラーも手軽に作成することができ、ウェブデザイン制作の時間短縮につながります。 ウェブデザイナー必見！美しいCSSグラデーションをコピペできる無料ツールまとめ Grabient ウェブサイトやグラフィックデザインに利用したくなる美しいグラデーションカラーを現在25種類揃え、お好みで色をカスタマイズ、作成できる無料の配色作成ツールです。 ボタンをクリックするだけで、Internet Explorer や
Noise Texture Generator v2.1
Warning: I recommend you up to 200 x 200 Changes will not affect the sample image, only the final product.
HTML Map, CSS Map, HTML Image Map Creator - Easily create your HTML image map
Create An HTML Map HTML image maps are one of the best ways to add multiple links to a single image. HTML maps are fully supported by all browsers. Below you can find a free tool that will allow you to generate an HTML map in the easiest way possible- just draw the areas and give them the links, alts and targets. The system will generate the HTML map code for you. Creating an HTML map is easy! Jus
素早く制作できた！Web制作に役立つトレンドのツール一覧
作成：2014/12/22 Web制作 > 2014年、WPテーマやコーポレートサイト作成時にお世話になったツールと2015年に使いたいツール。素早くコーディングを行うために知っておきたいツールをメモ。 エンジニア速報は Twitter の@commteで配信しています。 もくじ CSS ツール １．CSS スニペット ２．CSSアニメーションサンプル ３．背景を様々な形に切り抜く ジェネレーター ４．SCSS/CSSに変換するツール ５．CSS フレームワークとチートシート ６．CSS3 アイコン ７．CSS / JS / HTML コード整形 ８．レスポンシブ モックアップ作成 ９．ブラウザ対応表 SVG / ロングシャドー / ポリゴン作成 １０．SVG ブラウザサポート状況確認表 １１．SVG ローディングアニメ作成 １２．SVG 背景作成ジェネレーター １３．SVG パターン背景
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://codepen.io/amit_sheen/pen/xxZeyjO
Web制作者はブックマークしておくと便利！HTMLやCSSやOGPやTwitterカードなどのコードを生成できるオンラインサービス
CanvasやSVGによるパターンを作成出来る・「Halftone Patterns」
The Only CSS Gradient Tool You'll Ever Need
ローディング画像作成ジェネレータ
http://ie.microsoft.com/testdrive/Graphics/SVGGradientBackgroundMaker/Default.html
css2sass