Flexboxを使ったページのレイアウトから要素の配置まで、レスポンシブ対応のコードが生成できるツール -Flexible Boxesレイアウトの選択 「Presets」に用意されているレイアウトは、3種類。 Simple ヘッダとフッタと1カラムのコンテンツ、シンプルなレイアウト。 Holy Grail ヘッダとフッタ、そしてサイドバー2つとコンテンツの3カラム レイアウト。 Centered 天地中央、左右中央、天地左右中央に要素を配置。 「Presets」でレイアウトを選択すると、それぞれの基本レイアウトが表示されます。
Flexboxでどういうレイアウトができ、各プロパティはどのように挙動するのかがよく分かる -Flexbox playground
2016年1月12日にIEの古いバージョンのサポートが終了し、Windows 7/8はIE11、VistaはIE9がサポートブラウザになりました。Vistaはアレなので、実質IE11を考えてWeb制作をすればよいことになります。IE11を対象した際に、Flexboxの導入を考える制作者も多いと思います。 ※Vistaは2017年にサポート終了（参考: Windows製品のライフサイクル） Flexboxでどういうレイアウトができるのか、各プロパティはどのように挙動するのかが分かるFlexbox playgroundを紹介します。 Flexbox playground Flexbox playgroundはページの埋め込みにも対応しており、Flexboxのコンテナとアイテムの各プロパティがどのような挙動をするかよく分かると思います。 Flexboxの各プロパティの詳しい解説は、下記ページをご
RegExr: Learn, Build, & Test RegEx
RegExr is an online tool to learn, build, & test Regular Expressions (RegEx / RegExp). Supports JavaScript & PHP/PCRE RegEx. Results update in real-time as you type. Roll over a match or expression for details. Validate patterns with suites of Tests. Save & share expressions with others. Use Tools to explore your results. Full RegEx Reference with help & examples. Undo & Redo with {{getCtrlKey()}}
Japont – 日本語Web Fontをダイナミックに生成
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Web Fontが流行っていますが、日本語はなかなか広まりません。なぜかと言えば、欧文フォントに比べて日本語フォントは文字数が多く、サイズが肥大化する傾向にあるからです。いくら綺麗でもダウンロードに時間のかかるフォントは使えないでしょう。 そのため、日本のWeb Font配布サービスではページ上で使われているフォントだけを抽出してダイナミックにWeb Fontを生成する仕組みを提供しています。それと同等の仕組みを提供するのがJapontです。 Japontの使い方 Japontのデモページです。見ての通り、特徴的なフォントで表示されています。 文字を書きました。テストという文字はWeb Fontが適用されていません。 再読込しました（一部文字を消してしまいました）。テストという文字
webfont|test
Test up to three fonts You can choose a Google Font or a Websafe font from the list, write the exact name of a System Font or Upload a custom font file. It's a tool to test and analyze webfonts that you intend to use in your websites or projects. You can compare fonts from different sources (Google Fonts, System Fonts or any font file downloaded from internet), analyze their x-height, weights, cha
ブラウザー上でサクッとコードの動作テストができるWebサイトいろいろ
2017年2月17日 便利ツール 作業中に、ふと動作確認がしたい…でも新規ファイルを作るのすらめんどくさい…なんてこと、ありませんか？（え？ない？w）そんな時はファイル不要！環境設定不要なオンラインテストサイトを使っちゃいましょう！動作確認用オンラインツールはいくつかありますが、実際に使っているもの、ブックマーク登録しているものをいくつか紹介します！ユーザー登録してコードを保存できるサイトもあるので、備忘録として使ってみてもよさそうです！ ↑私が10年以上利用している会計ソフト！ CodePen Webクリエイターボックスでも何度となく紹介してきたCodePen。フロントエンドの動作確認に最適です。Emmetの利用もOK！ライブプレビューができるので、いちいち保存したり実行ボタンをクリックして動作確認する必要はありません。作成したコードをブログへ埋め込んだり、シェアするのも簡単！ HTML
JSON Online Validator and Formatter - JSON Lint
To format and validate your JSON, just copy + paste it below: About the JSONLint EditorJSONLint is a validator and reformatter for JSON, a lightweight data-interchange format. Copy and paste, directly type, or input a URL in the editor above and let JSONLint tidy and validate your messy JSON code. What Is JSON?JSON (pronounced as Jason), stands for "JavaScript Object Notation," is a human-readable
のらもじ発見プロジェクト
古い町並みには、洗練されていないけれど個性的で味のある文字がたくさんあります。このプロジェクトは、そんなステキな文字たちを「のらもじ」と名付け、それを 発見 → 分析 → フォント化 を進めていく活動です。フォントはインストールしてお使い頂けます。 We can find a lot of font in old towns. Those may not be so sophisticated but has unique charm. In this project, we named such characters “NORAMOJI”. We aim to “Find > Analyze > Reproduce” them. Users can intall and use the font.
正規表現チェッカー PHP: preg_match() / JavaScript: match()
PHP: preg_match() / JavaScript: match() 正規表現チェッカー ver3.1 PHP及びJavaScriptコーディング中に正規表現を記述する際の動作チェック等にご利用ください。 正規表現と対象文字列を入力し、[チェック！]ボタンをクリックすると、PHP: preg_match()と JavaScript: match()の実行結果がフィードバックされます。 正規表現
Wanted Fonts
U.S. DollarEuroBritish PoundCanadian DollarsAustralian DollarsIndian RupeesChina Yuan RMBMore Info →
レスポンシブ対応用に複数のブレイクポイントで手軽に確認できるツール -Wood Cuttr
スマフォの横と縦のサイズっていくつだっけ？ タブレットは？ ネットブックは？ とウェブページの制作で、レスポンシブ対応用に複数のブレイクポイントで簡単に確認できるツールを紹介します。 Wood Cuttr Wood Cuttrの対応ブラウザ・デバイス Wood Cuttrの使い方 Wood Cuttrのセットアップ Wood Cuttrの対応ブラウザ・デバイス 対応ブラウザ・デバイスは、下記の通りです。 動作するブラウザ IE9+ Firefox 3.6+ Chrome 10+ Safari 5.1+ Opera 11.6+ ※Wood Cuttrが動作するブラウザです。 サポートしているデバイス iPad & iPhone Models Android スタンダードなTVスクリーン デスクトップ ※ビューポートのサイズをサポートしているデバイスです。 Wood Cuttrの使い方 使い方
正規表現と文字列がマッチしているか簡単にチェックできるオンラインツール -RegExp playground
正規表現と文字列を入力し、それがマッチしているかどうか簡単にチェックできるオンラインツールを紹介します。 NGの画面 正規表現のチートシート ページ下部にあるチートシートから。 . 任意の文字にマッチする（改行を除く） {n} n回の繰り返し {n,} n回以上の繰り返し {n, m} n回以上m回以下の繰り返し ? {0,1}と同じ * {0,}と同じ + {1,}と同じ \w アルファベット、数字またはアンダーバー、[a-zA-Z0-9_]と同じ \d 数字、[0-9]と同じ \s 空白文字、[\t\r\n ]と同じ […] キャラクタをクラス化 [^...} キャラクタを否定クラス化 (…) パターンのグループ化 (?:…) パターンの非格納グループ化 (?=…) 先読み (?!…) 否定先読み ^ 行の先頭にマッチする $ 行の終端にマッチする \b 単語境界にマッチ \B 単語境
CMD77 Daftar Situs Judi Slot Online Resmi Terpercaya
JUDI SLOT CMD77 Daftar Situs Judi Slot Online Resmi Terpercaya CMD77 situs judi slot online resmi terbaik dan terpercaya di indonesia yang terpilih menjadi situs paling sering memberikan kemenangan besar dengan deposit kecil di beragam provider slot ternama dunia. Meskipun judi slot online menawarkan kesempatan untuk memenangkan uang secara instan, penting untuk memastikan bahwa Anda memilih platf
回線速度が測定できるスピードテストサイト「ラピッドネット」
By Mark Fischer 「測定開始」ボタンをクリックするだけで回線速度を測定してくれるスピードテストサイトが「ラピッドネット」です。精度が若干低めながらも結果表示を高速で行うモードが用意されていますが、通常モードであってもわずか5秒ほどで測定が完了します。また、Flashを使用していないので、Flashの使えない端末からでも測定が可能です。 ラピッドネット｜回線速度の測定、PC・スマフォに対応した国内最速のスピードテストサイト http://www.rapidnet.jp/ 測定は画面中央の「測定開始」を押すだけ。定量ファイルのダウンロードによる測定方法を採っているため、測定にかかる時間は回線速度によって変化するとのこと。 今回測定した環境は光回線だったためか、通常モードで測定にかかった時間は5秒弱でした。結果は、下りが36.8Mbps、上りが14.7Mbpsでした。 別ブラウザで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Home - Use & Modify
スマホ・タブレットのさまざまなデバイスの表示チェックに対応！レスポンシブの確認ができる無料オンラインツール -.resizr
CSS3 Keyframes Animation Generator
クラッシュしない分IETesterより便利。browserstack « デザインブースト｜designboost
Responsive Web Design Test Tool - Designmodo
Am I Responsive?