ついに！Search Consoleが正規表現をサポート
[レベル: 上級] Google Search Console に 2 つの改良が加わりました。 検索パフォーマンス レポートが正規表現フィルタをサポート 比較時の 2 つ以上の指標の同時レポート表示 検索パフォーマンス レポートが正規表現をサポート 正規表現によるフィルタを検索パフォーマンス レポートがサポートしました。 ついに！です。 これで、複雑な条件を指定してデータを絞り込めます。 [検索キーワード] と [ページ] のフィルタで正規表現を利用できます。 たとえば、[海外SEO情報ブログ] と [海外SEOブログ] の 2 種類のクエリで僕のブログを探す読者がたくさんいます（正式名称は前者です！）。 このとき正規表現を使って [海外SEO(情報)?ブログ] と指定すれば両方のクエリを同時に指定してフィルタできます。 例で出したのはとてもシンプルな正規表現ですが、熟知している人にとっ
CSSで画像の上に表示するテキストをより読みやすく、より美しくするテクニック・実装方法のまとめ
画像の上にテキストを配置する際に、より読みやすく、より美しくするCSSのテクニックを紹介します。 CSSで画像上にテキストを表示する際に起こる問題に対するさまざまなアプローチと解決するための実装方法を解説。また、最近見かけた素晴らしいテクニック、便利なツールなども紹介します。 Handling Text Over Images in CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに テキストを読みやすくするためのさまざまなテクニック グラデーションのオーバーレイを使ったテクニック イージングのグラデーションを使ったテクニック 水平方向のグラデーションを使ったテクニック ソリッドカラーとグラデーションの混合 グラデーションのオーバーレイとtext-shadow グラデーションのオー
シニアフロントエンド開発者みたいにChromeデベロッパーツールを使おう - Qiita
開発環境にChromeを選ぶなら知っておきたい12のテクニック Photo by Morning Brew on Unsplash さて、何らかの理由で、開発ブラウザとしてChromeを選んだとします。次は、デベロッパーツールを開き、コードのデバッグを開始します。 Consoleパネルを開いてプログラムの出力を確認したり、Elementsパネルを開いてDOM要素のCSSコードを確認したりします。 でも、Chromeデベロッパーツールを本当に理解していますか？実は、パワフルだけど知られていない機能がたくさん用意されていて、開発効率を大幅に改善できるのです。 ここでは、最も便利な機能を紹介します。お役に立てたら嬉しいです。 ChromeのCommandメニューから始めましょう。ChromeのCommandメニューは、LinuxのShellのようなものです。コマンドを入力してChromeを操作で
Tailwind CSS v2.1 - Tailwind CSS
The first new feature update since Tailwind CSS v2.0 is here and loaded with lots of cool stuff! We’ve merged the new JIT engine to core, added first-class support for composable CSS filters, added blending mode utilities, and a bunch more. Here are some of the highlights: JIT engine in core Composable CSS filters API New blending mode utilities New isolation utilities For the full details, check
ユーティリティーファーストとTailwind CSSのススメ - Qiita
Tailwind CSSは結構いいんでないの？というポエムです ユーティリティーファーストって考え方について まず、 ユーティリティークラスが何かということ ユーティリティークラスを使ってHTMLを書いていくということってどういうことか これは、ある程度CSSを書いている人であれば想像できることであろうと思う。 こんな風に、あらかじめユーティリティー的なクラスを用意しーの .align-left { text-align: left; } .align-center { text-align: center; } .align-right { text-align: right; } .align-top { vertical-align: top; } .align-middle { vertical-align: middle; } .align-bottom { vertical-a
Flexboxで実装する定番レイアウトのコードのまとめ
Webページやスマホアプリに使用される一般的な定番レイアウトをCSS Flexboxで実装したシンプルなコードを紹介します。 ヘッダ・コンテンツ・フッタがあるレイアウトをはじめ、サイドバーがあるレイアウト、スマホに対応したカードの配置、高さを揃えたカード、異なる高さのカードを使用した価格表など、コピペで簡単に使用できます。 Evergreen CSS Flex Layouts With Live Demos by Miroslav Nikolov 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. Flexboxで実装するスマホに対応したカードのレイアウト 2. Flexboxで実装する高さが等しい複数のカード 3. Flexboxで実装したカードの高さをコンテンツベースにする 4. Flexboxで実装するコンテン
地方零細企業のSEO事例｜平岡 謙一
今日は3月18日。今月あたまの3月1日から、地方都市(人口10万人弱)にある歯科医院のマーケティングをお手伝いしています。 こちらのサイトは医院名で検索しても１ページ目に表示されておらず、医院名での検索上位は、有名なポータルサイト。本来は払わなくてもいいような、ムダな手数料を支払っている状況でした。 なぜ医院名ですら上位表示していないのか。 実はSEOという視点でみたときに、基礎的な対応すらできていなかったのです。地方あるあるですね。 タイトルの付け方が微妙。トップページの医院外観写真は素材。一部ページがリンク切れ。2019年で更新が止まっている”最新のお知らせ”。そして管理者不明のサーバー。 そこで以下のチェックリストを使った、基礎的な対応をしました。今回に限らず、小規模のサイトでは必須の確認項目です。 地域名×サービス名 で１ページ目にはいりたい。その程度であれば、建築、金融、人材など
Heroicons v1.0 - Tailwind CSS
Just over a year ago we released the very first version of Heroicons, which is a set of beautiful UI icons we designed alongside Tailwind UI. Since then we’ve added tons of new icons, and designed and launched a dedicated web experience. Today we’re excited to finally release Heroicons v1.0, which includes over 450+ free icons in two styles, official React and Vue libraries, and Figma assets. Rea
From semantic CSS to Tailwind - Refactoring the Netlify UI codebase
The React codebase that powers app.netlify.com is about five years old. During these five years, the focus has mostly been on high-speed growth, as most start-ups do. For this reason, what started with organised PostCSS gradually grew to become a complex and entangled global CSS architecture with a lot of specificity and overrides. As you might expect, there's a point where the added tech debt it
心のバリアを取り去って「正規表現」に取り組む一歩を踏み出すためのメモ｜DTP Transit 別館
長年、後回しにしてきた「正規表現」。四の五の言わずにはじめようよ！と20年前の自分に伝えたく、まとめてみました。 詳しい方が見ると、乱暴だったり、おかしなところがあると思いますが、入り口に立つことが大切だと考えています（書いた人は文系・グラフィックデザイン関連です）。 はじめにたとえば、文章中に「コンピュータ」と「コンピューター」が混在していて、これを「コンピューター」に統一したいとき、あなたなら、どうしますか？ 単純な検索置換なら、次のような順番で処理できます。 ❶「コンピューター」を「コンピュータ」に一括置換する ❷「コンピュータ」を「コンピューター」に一括置換する ❸ ちょっと心配なので「ーー」（音引きの繰り返し）をチェック これはこれでアリなのですが、1回の作業でできたらベターです。 しかし、「コンピュ-タ」のように正しく音引き（ー）が入力されていない場合には単純な検索置換ではお手
Creating a repository from a template - GitHub Docs
About repository templates You can create a template from an existing repository. Anyone with access to the template repository can create a new repository based on the template with the same directory structure, branches, and files. For more information about creation of a repository template, see "Creating a template repository." You can choose to include the directory structure and files from o
CSS Gridでどのように配置されるかをまとめたチートシート
CSS Gridでよく使用するプロパティと値をまとめたチートシートを紹介します。 コンテナ内にアイテムがどのように配置されるかを図やイラストで掲載しており、楽しく直感的にCSS Gridの使い方を学べます。 CSS Grid Cheat Sheet Illustrated in 2021🎖️ by Joy Shaheb 同じ作者のFlexboxのチートシートも翻訳しました。 Flexboxでどのように配置されるかをまとめたチートシート 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSS Gridの構造 CSS Gridの各プロパティ（親要素） CSS Gridの各プロパティ（子要素） CSS Gridのショートハンド 終わりに CSS Gridの構造 CSS Gridの知識をリフレッシュしましょう！ 2021年に備えて、C
Web制作の効率、生産性アップ！話題の最新オンラインツール33個まとめ
この記事では、Webデザイン制作を効率アップさせる最新オンラインツール33個をまとめてご紹介します。 ウェブデザインに限らず、グラフィックなどあらゆるクリエイティブな案件、プロジェクトで活躍しそうな新しいツールを中心に揃えています。 これらのツールをうまく活用することで、面倒な作業も短時間で行い、より円滑にプロジェクトを進めることができます。お気に入りのツールをワークフローに取り入れ、より快適で、スピーディーな制作を目指しましょう。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. 配色ツール 3. デザインコレクション 4. イラスト系ライブラリ 5. アイコンツール 6. コラボ、リモートワークツール 7. 面白、クリエイティブツール Web制作の効率、生産性アップ！話題の最新オンラインツールまとめ We
Just-In-Time: The Next Generation of Tailwind CSS - Tailwind CSS
One of the hardest constraints we’ve had to deal with as we’ve improved Tailwind CSS over the years is the generated file size in development. With enough customizations to your config file, the generated CSS can reach 10mb or more, and there’s only so much CSS that build tools and even the browser itself will comfortably tolerate. Update: As of Tailwind CSS v2.1, the new Just-in-Time engine is in
Google、アプリ開発SDK「Flutter 2」公開 Webとデスクトップ、Surface Duoもサポート
米Googleは3月3日（現地時間）、オンラインイベント「Flutter Engage」を開催し、オープンソースのアプリ開発SDK「Flutter」のバージョン2のリリースを発表した。iOSとAndroidに加え、デスクトップアプリ、Webアプリ、米Microsoftの「Surface Duo」のような2画面端末向けアプリの開発も可能になった。 Googleは2018年に、同じコードベースでiOSとAndroidアプリを開発できるFlutter 1.0をリリース。Flutter 2では、iOS、Android、Windows、macOS、Linux向けアプリをリリースでき、Chrome、Firefox、Safari、EdgeなどのWebブラウザ向けアプリもリリースできる。さらに、自動車、テレビ、スマートホーム端末向けアプリの開発も可能だ。 これまでに既にGoogle Playストアだけでも
【第4弾】少しのコードで実装可能な10のCSS小技集
2021年3月4日 CSS CSS小技集シリーズの第4弾！「【第3弾】少しのコードで実装可能な15のCSS小技集」から約2年。またまた便利でサクッと使えるコードが続々登場しています！初心者さんからベテランさんまで要チェック！ ↑私が10年以上利用している会計ソフト！ 目次 要素の上下左右中央配置 画面幅いっぱいに画像を配置 リストマーカーの色を変える 言語にあわせて引用符を変更 クリックで文字列を選択 背景画像を見切れないよう繰り返し表示 入力時の縦線の色を変更 ドラッグで要素のサイズを変更できるようにする floatは flow-root で解除 文章をカラム分けしてラインを入れる HTML・CSSの全コードは各サンプルの「HTML」や「CSS」タブを、別タブでのサンプル表示は右上の「EDIT ON CODEPEN」をクリックしてご覧ください！ 1. 要素の上下左右中央配置 ボックスを要
Web制作者必見！ VS Codeのおすすめ機能拡張のまとめ、HTMLやCSSやJavaScriptのコードを書く時に便利
Visual Studio Code（以下、VS Code）が素晴らしいエディタである理由の一つは、デベロッパーの生産性を向上させるVS Codeの機能拡張の巨大なライブラリがあることです。 その中から、HTMLやCSSやJavaScriptのコードを書く時に便利なVS Codeの機能拡張を紹介します。 My 12 Favorite VSCode Extensions by Katherine Peterson 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 VS Codeとは VS Codeの機能拡張 VS Codeのおすすめ機能拡張 VS Codeとは VS Code(Visual Studio Code)は、Microsoftが提供する統合ツールを備えた強力で軽量なコードエディタです。MITライセンスで、商用でも完全に無料
JavaScriptは無し、スクロールした時にヘッダの高さを縮ませて上部に固定表示させるCSSの実装テクニック
スクロールした時にヘッダの高さが縮んで上部に固定表示させるWebページを見たことがあると思います。今まではJavaScriptを使用する必要がありましたが、CSSのposition: sticky;を一工夫して使用することで簡単に実装できます。 高さを縮ませるのはヘッダに限らず、パネルやバナーなど他の要素でも簡単に実装でき、汎用性にも優れていると思います。 Shrinking Header on Scroll Without JavaScript by Håvard Brynjulfsen 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 デモページのデザインがシンプルなので、一見見落とすかもしれませんが、ページをスクロールするとヘッダの高さが縮んで上部に固定表示されます。 デモページ 仕組みは、簡単です。 ヘッダは外側と内側の2
DevTools での CSS-in-JS サポート | CSS and UI | Chrome for Developers
この記事では、Chrome 85 以降で導入された DevTools での CSS-in-JS サポートと、一般的な意味、CSS-in-JS の概要、DevTools で長年サポートされてきた通常の CSS との違いについて説明します。 CSS-in-JS とは CSS-in-JS の定義は漠然としており、大まかに言うと、JavaScript を使用して CSS コードを管理するためのアプローチです。たとえば、CSS のコンテンツが JavaScript を使用して定義され、最終的な CSS 出力がアプリによってオンザフライで生成される場合があります。 DevTools の「CSS-in-JS」は、CSSOM API を使用して CSS コンテンツがページに挿入されていることを意味します。通常の CSS は、<style> 要素または <link> 要素を使用して挿入されます。挿入には静的
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
地味に便利！さまざまなプロジェクトに適したHTMLのテンプレートを簡単に生成できる -HTML Boilerplates
