CSSの美しいシャドウもこれなら簡単！ box-shadowを重ねた面倒なコードを簡単に生成できるツール -boxshadows.xyz
直感的なインターフェイスで、CSSのbox-shadowを使用した複雑で美しいシャドウを簡単に作成できるツールを紹介します。 シャドウはさまざまなパラメータで正確に調整でき、リアルタイムにシャドウの見た目とCSSのコードが生成されます。CSSの初心者でも経験豊富な人にとっても便利だと思います。 boxshadows.xyz boxshadows.xyzとは boxshadows.xyzの使い方 boxshadows.xyzとは boxshadows.xyzは直感的なインターフェイスで、レイヤー化された複雑なシャドウを正確に、そして簡単に作成できるオンラインツールです。シャドウのタイプ、シャドウのぼかしと広がり、オフセットの調整など、さまざまなパラメータを調整しながらリアルタイムにシャドウを確認しながら作成できます。
これどうだっけ？を解決！Web制作の便利＆時短ツール50個を揃えた Toolb.dev
Web制作で日常的に使える無料のCSSやHTML、JSウェブツール50種類以上を提供しているToolb.dev。 なにかと面倒な作業をパネル上で直感的に行うことができ、リアルタイムでのプレビュー機能や作成したコードはそのままコピペも可能、Web制作でも活用機会の多いツールが揃います。 クレジット表記不要で、ユーザー登録をせず利用できるのも嬉しいポイントです。Web制作をサポートする便利ツールも一緒にチェックしてみてはいかがでしょう。 Web制作の面倒な作業をラクにするCSS便利ツール87個まとめ Web制作を楽にする便利なSVGツール53個まとめ Web制作の面倒な作業が楽になるツール50個を揃えたToolb.dev 「これどうやるんだっけ？」いつも忘れがちなWeb制作の工程をサポートしてくれるToolb.devで利用できるツールは50を超え、現在ベータ版での提供となります。それぞれのツー
ダークモード用CSSの書き方とエミュレートでの確認方法（ひとり DevTools Advent Calendar 2020 – 09日目） | Ginpen.com
9 日目の記事です。 DevToolsおれおれAdvent Calendar 2020やります。ひとりで。 GitHub がダークモード（ダークテーマ）対応したそうです。 echo "hello, darkness" #GitHubUniverse #Keynote https://t.co/9gQRFt3aqQ pic.twitter.com/HEotvXVJ7R — GitHub (@github) December 8, 2020 パブリックベータとして誰でも利用可能とのこと。 Chrome DevTools を使ってシステム側のテーマ変更をエミュレートすることができます。 ダークモード対応 CSS を書く @media (prefers-color-scheme: dark) でダークモード用のテーマになります。 CodePen でデモ @media (prefers-color-
WordPress メディアのアップロードから画像が自動生成されなかった時の対処方法 - by Takumi Hirashima
WordPress メディアのアップロードから画像が自動生成されなかった時の対処方法を紹介します。 画像の自動生成を確認 GDライブラリーの確認方法 画像の自動生成を確認 まずは FTP でサーバーにアクセスして、メディアのアップロードで画像がアップロードされているかを確認。 そこで、サムネイルや他のサイズの画像が自動生成されているかどうかを確認します。 画像が自動生成されていない場合、PHP のGDライブラリー（画像ライブラリー）がインストールされていない可能性があります。 GDライブラリーの確認方法 GDライブラリーが環境にインストールされているかを確認するには、現在表示中のページのテンプレートに以下のコードを追加します。 <?php phpinfo(); ?> phpinfo() は現在の PHP の設定を確認することができます。 コードが正しく動くと、PHP の設定が表示されるので
WordPressのアクションフックの実行履歴を確認する - Qiita
function do_action($tag, $arg = '') { var_dump($tag); global $wp_filter, $wp_actions, $wp_current_filter; ... 見やすさを考えればファイル出力とかのほうがいいかも。 これで任意のページを表示すればアクション実行毎に画面出力されて動作が確認できます。 出力結果 画面ロード前 プラグインを色々いれているのでそのアクションフックも確認できます。 post_typeは1種類しか追加していないのに何回も呼ばれている不思議。 string(16) "muplugins_loaded" string(19) "registered_taxonomy" string(19) "registered_taxonomy" string(19) "registered_taxonomy" string(1
OverVue - Vue開発で役立つプロトタイピングツール
Vueの人気が高まっています。HTMLとJavaScriptが分かれるので、分業しやすいのも利点でしょう。しかし、それでもプログラマーでないと最適な構造で画面を作っていくのは簡単ではありません。 そこで使ってみたいのがOverVueです。画像を元にして画面を設計できるソフトウェアです。 OverVueの使い方 立ち上げました。まず画像を読み込みます。 画像が表示されている状態で、左からコンポーネントを追加していきます。 divやボタンなどを追加します。コンポーネントは枠を使って表示位置を指定できます。 OverVueを使うことで画像からWebコンポーネントとしてVueの構造を書き出すのが簡単になります。各コンポーネントの親子関係も可視化されます。簡易的なコード生成機能もついています。 OverVueはVue製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）で
CSS Grid Generator - CSSグリッドを簡単に作成
CSS3ではグリッドが簡単に作れる機能が実装されていますが、テキストできちんとした設計を行うのは大変です。左右の関係を考えながら組むのですが、入れ子になっていたりするとすぐに破綻してしまいます。最初の設計をきちんと行わなければなりません。 そこで使ってみたいのがCSS Grid Generatorです。Webブラウザ上でビジュアル的にCSSグリッドの設計ができます。 CSS Grid Generatorの使い方 メイン画面です。 マウスでドラッグしてグリッドを設計します。 そしてCSSの設定をダウンロードします。 生成されるテンプレートを見れば、その内容は分かると思います。しかし、これを頭で計算して記述するのは面倒です。複雑なグリッドになれば尚更でしょう。CSS Grid Generatorを使うことで素早く設計を行い、そのコードがゲットできるでしょう。 CSS Grid Generato
iPhone SE／5s／5にもう悩まない！Viewport Extraで手軽に縮小表示 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。フロントエンドエンジニアのつっちーです。 ここ数年、スマートフォンの画面サイズがどんどん大きくなっていますよね。何年か前までは幅320px表示の端末がほとんどでしたが、今の日本では幅375px表示の端末がもっとも使われているようです（2019年2月現在）。幅375px表示が、他国で圧倒的1位の幅360px表示を大きく上回っているのは、日本人のiPhone好きが表れた結果でしょうか。 これに合わせ、LIGでもスマートフォン表示のデザインは幅375px表示に最適化することがほとんど。でも、その場合に問題となるのが、幅320px表示の端末です。見出しの改行が必要になったり、横並びの要素が収まりきらなくなったり、表示くずれが多々発生します。ブレイクポイントを増やして、スマートフォン表示だけで2種類もスタイルを用意するのは、なかなか大変です。かといって、いまでも見捨てるにはまだ早いシェア
無料＆登録不要で正規表現を図示してくれる「Regexper」を使ってみた
アプリ開発の場面では、入力されたテキスト内に誕生日などの特定パターンの文字列が含まれているかを確認したり、別の文字列に置き換えたりするときに、正規表現は必須です。しかし、正規表現を誤ってしまうと、アプリケーションによっては、データを破壊してしまったり、誤作動を起こすリスクがあるのも事実。このため正規表現を変更する場合、事前に試験用の環境で試すのが普通ですが、開発現場によっては、試験用の環境であっても簡単に適用できない場合や、本番用の環境しかないなど、試す場面が限られることが考えられます。このとき、机上での検証を行いますが、人の手による検証は、どれだけ実力のある人がチェックしても誤るリスクがあり、不安を拭うことはできません。「Regexper」を使えば、入力した正規表現を無料で、機械的に図示して、読みやすくしてくれるとのこと。複雑な正規表現を入力しても読みやすくなるのか、実際に使ってみました
Code Quality Checker - プログラムコードの品質チェッカー
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました コードの品質はどう判断したら良いでしょうか。幾つかの判断基準はあると思いますが、複雑さやコードの重複などは挙げられるでしょう。そうしたネガティブな要素が積み重なった結果、バグを含みやすくなると言うことはあると言えます。 今回紹介するCode Quality Checkerはコードの品質チェックを行ってくれるソフトウェアです。 Code Quality Checkerの使い方 Code Quality Checkerはファイルのリストを渡すだけで実行できます。とあるJavaScriptプロジェクトの例。 $ cqc src/**/*.js Number of files: 3 Source lines of code: 203 Duplicate rate: 0.00% High c
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
画像を扱うプロジェクトに役立つ！CSSフィルタのさまざまなエフェクトをコピペで利用できる無料ツール -FilterSS
Web制作に役立つ！面倒なCSSのコードを簡単に生成できる便利ツールをまとめました
CSS Layout Generator
Adam Marsden - Developer, Designer & Maker.
Griddy - CSS Grid System Education Tool