CSSの美しいシャドウもこれなら簡単！ box-shadowを重ねた面倒なコードを簡単に生成できるツール -boxshadows.xyz
直感的なインターフェイスで、CSSのbox-shadowを使用した複雑で美しいシャドウを簡単に作成できるツールを紹介します。 シャドウはさまざまなパラメータで正確に調整でき、リアルタイムにシャドウの見た目とCSSのコードが生成されます。CSSの初心者でも経験豊富な人にとっても便利だと思います。 boxshadows.xyz boxshadows.xyzとは boxshadows.xyzの使い方 boxshadows.xyzとは boxshadows.xyzは直感的なインターフェイスで、レイヤー化された複雑なシャドウを正確に、そして簡単に作成できるオンラインツールです。シャドウのタイプ、シャドウのぼかしと広がり、オフセットの調整など、さまざまなパラメータを調整しながらリアルタイムにシャドウを確認しながら作成できます。
これは簡単で楽！ スクロールバーのデザインを変更するCSSを確認しながら生成できるツール -Scrollbar.app
スクロールバーは、長いコンテンツのWebサイトに不可欠な要素です。ブラウザにはスクロールバーのデフォルトのスタイルがありますが、サイトのデザインに最適とは限りません。スクロールバーのデザインを変更するのは、CSSで簡単にできます。 スクロールバーのデザインを変更するCSSを確認しながら生成できるオンラインツールを紹介します。 Scrollbar.app Scrollbar.app -GitHub スクロールバーのデザインを変更するCSS Scrollbar.appの特徴 Scrollbar.appのの使い方 スクロールバーのデザインを変更するCSS スクロールバーのデザインを変更するCSSは、下記の通りです。 ::-webkit-scrollbar: スクロールバー全体 ::-webkit-scrollbar-thumb: ドラッグ可能なスクロールのハンドル ::-webkit-scrol
これは便利すぎる！ Webサイトやスマホアプリのターゲットブラウザを決める時に役立つツール -Browserslist
ターゲットブラウザを決める時に役立つ便利なツールを紹介します。 条件は細かく設定でき、下記は日本のユーザーを対象、シェアが0.2%以上あり、現在サポートされていないブラウザを除いたものです。iOSのSafariが多く、Chrome for Android, Chrome for desktopと続いています。 Browserslist Browserslist -GitHub Browserslistの特徴 Browserslistの使い方 さまざまな条件でターゲットブラウザを調べる Browserslistの特徴 Browserslistはフロントエンドでよく使用されるツール（Autoprefixer, Babel, ESLint, PostCSSなど）でブラウザのターゲットや互換性を共有するツールです。 0.5%以上シェアがあるブラウザ、最新2バージョンのブラウザ、サポートが終了してい
無料・インストール不要でルーターがマルウェアに感染していないか確認してくれるツール「am I infected?」を使ってみた
自宅でWi-Fiを利用する際に必要なルーターは、購入してセットアップしたら後は放置してしまいがちなもので、気付かないうちにマルウェアに感染して踏み台になっていることも。そんなルーターについて、メールアドレスを入力するだけでサクッとウイルスチェックができるサービスが「am I infected?」です。 am I infected? - マルウェア感染・脆弱性診断サービス https://amii.ynu.codes/ 「am I infected?」のページはこんな感じ。横浜国立大学の情報・物理セキュリティ研究拠点が運営しているサービスとのこと。 下にスクロールするとサービスの説明がされています。マルウェアがルーターに感染した場合、いわゆる「自覚症状」が無いため気付くのは難しく、知らないうちに外部に迷惑をかけていた……なんてことも。 日本だけでも17万個以上の機器に脆弱(ぜいじゃく)性が見
無料でAWSの料金をチェックして無駄を見つけてくれるサービス「Vantage」を使ってみた
By Thomas Hawk AmazonのクラウドサービスであるAWSは、コンピューティングやデータベース、ストレージなど、膨大で複雑なサービスで構成されており、必要なタイミングで必要なものを用意できるという点では優れているものの、長く利用していくにつれてだんだんと全貌の把握が難しくなっていき、無駄な支出がないか確認するのも困難になりがちです。そこで、AWSの利用データを自動で解析して支出を削減できそうな項目を表示してくれるサービス「Vantage」を使い、どのあたりのコストが削減可能なのか確認してみました。 Vantage - Manage Your Cloud Costs https://www.vantage.sh/ Vantageのサイトにアクセスし、「Get Started for Free」をクリック。 「名前」「アカウント名」「メールアドレス」「パスワード」を入力し、reC
ロゴのデザインに独創性があるか、パクリじゃないか、Webサイトやスマホでどう見えるか検証できるオンラインツール -TWM Logotester
せっかく作成したロゴに似たデザインのものがあったり、Webサイトやスマホアプリで見栄えがよくなかったら、がっかりです。 ロゴのデザインに独創性があるか、他に似たロゴはないか、Webサイトやスマホアプリでどう見えるか、モノクロでも大丈夫か、色数は多すぎないかなどを検証できる無料オンラインツールを紹介します。
自分好みのVS Codeのテーマをブラウザでプレビューを見ながら作成できる・「Theme Studio」
Theme Studioは自分好みのVS Codeのテーマをブラウザでプレビューを見ながら作成できるWebアプリです。 使い方は簡単で、各所の色を決めていくだけ、というものになりますが、その「各所」の数が非常に大量にあります。全部で240か所くらいだと思います。 全てを1から決めるのではなく、一応ダークとライトの雛型が用意されていますのでどちらかを選んで色を決めていき、終わったらJSONファイルをダウンロードして利用する、という流れの様です。 左カラムで場所を選び、任意の色を決めていく作業になります。 場所は多くに3つに分けられていて、左上のタブで選択できます。「COLORS」ではサイドバーやタイトル、ボタンなど外観メイン、「EDITOR」では名前通りエディタの機能部分の色、「SYNTAX」はコードのカラーになります。 インストール前に確認できるのは良いですよね。僕自身はATOM派でVS
Dev Fonts
Filter fonts0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9
)
FontCDN - GoogleのWeb Fontをまとめてプレビュー
GoogleではWebフォントを無料で公開しています。サイズが大きくなりがちなWebフォントをGoogleが高速なCDNで配信し、さらに多数のWebサイトで共有することでキャッシュも有効になります。 日本語フォントはあまり多くありませんが、多少のフォントは対応しているようです。そんなWebフォントでの表示をまとめて確認できるのがFontCDNです。 FontCDNの使い方 トップページです。多数のフォントでのプレビューが表示されています。 日本語で表示を指定した場合。 表示をタイルからリストにした場合。 使い方も分かります。 FontCDNはGoogleのWebフォントでの表示をまとめて確認することで、細かな違いも一目で分かります。フォントをカテゴリや名前でフィルタリングできるので、使いたいフォントに合わせて確認するのが容易です。 FontCDNはJavaScript製のオープンソース・ソ
台風の様子をほぼリアルタイムで更新される衛星画像でチェックできる「Zoom Earth」
ハリケーンや台風の様子を衛星画像でほぼリアルタイムにチェックできるウェブサイトが「Zoom Earth」です。Zoom EarthはGOESやひまわり8号、Meteosatといった気象衛星からのライブ衛星画像、NASAのGIBSやEOSDISから画像データ、MicrosoftのBing Maps PlatformやEsriから地図データ、National Hurricane Center・Joint Typhoon Warning Center・IBTrACSといったサービスから台風情報を得て作成されています。 Zoom Earth – ライブ衛星画像を見る https://zoom.earth/ Zoom Earthはこんな感じで、ほぼリアルタイムの衛星画像をチェックできるウェブサイトです。 画面左上には表示している衛星画像が撮影された日時および、特定の場所を検索するためのサーチバー。
レスポンシブに対応したWebページをさまざまなデバイスのサイズで表示を同時確認できる無料ツール -everysize
Webページをさまざまなデバイスのサイズで表示を同時確認できるブラウザベースのオンラインツールを紹介します。 完全無料で利用でき、登録など面倒なことは一切不要です。 everysize everysizeの特徴 everysizeの使い方 everysizeの特徴 everysizeは、レスポンシブに対応したWebページの表示確認をできるオンラインツールです。さまざまなデバイスのサイズで同時に確認でき、拡大縮小、レイアウト変更にも対応しています。 ブラウザベースのオンラインツールなので、OSを問わず利用できます。 Chrome, Safari, Edgeは問題なし、IE11はダメでした。
これで分かった！CSS GridとFlexboxの使い方を習得できるチートシート、ゲームまとめ
この記事では、CSS FlexboxとGridをつかってお好みのレイアウトを作成するコツやポイントをまとめた使い方ガイドやチートシート、ゲームなどをまとめて紹介しています。 ゲーム感覚で新しいCSSプロパティを学習することができたり、記述方法をど忘れしてしまったときなどにも便利で、お好みのレイアウトをオンラインで作成できるツールもあります。覚えようと思ってなかなか手がつかなかったひとも、これならすぐにはじめることができますよ。 CSS Gridの使い方ガイド、チートシート、ゲームまとめ Grid Garden CSS Gridレイアウトプロパティを使うことで、人参に水を与えながら自分の農園を育てていく、ゲーム感覚でGridプロパティを学ぶことができます。ゲームの各レベルでは、ゲーム達成に利用できる他のプロパティについてもサンプル例と一緒に解説されています。 Bonus – CSS Dine
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Caninclude
Web制作に役立つ！面倒なCSSのコードを簡単に生成できる便利ツールをまとめました
CSS GridとFlexboxの便利なツールが登場！ レイアウトを確認しながら、コードを生成できる -CSS Layout Generator
CSS Layout Generator
任意のWebサイトで使われているWebフォントを調査、ダウンロードも可能なWebアプリ・「Font of Web」
様々なブランドのロゴに使用されているフォントを紹介する・「Font In Logo」
SVGのパスデータを可視化するシンプルなWebアプリ・「SVG Path Visualizer」
CSSでブレイクポイントを定義する時の一般的なスクリーンサイズやデバイスの状況を確認できる -Screen Size Map
