英臣

なんやかんやスキル伸ばすの好きです。 WEB関係でお役に立てることなど思いついたら、ち…

英臣

なんやかんやスキル伸ばすの好きです。 WEB関係でお役に立てることなど思いついたら、ちょこちょこ更新します。 主に、HTML＆CSS＆Javascript＆PHP のテクニックです。 たまにショートカットなどの効率化テクニックの記事なんかも。

【HTML＋CSS】疑似クラス :has() がめちゃくちゃ便利！

先日、2023年12月にFirefoxがとうとう疑似クラス:has() に対応したとのことで、ほとんどの主要ブラウザで対応された記念にこの素晴らしい機能について解説したいと思います！ そもそも、この疑似クラス:has() とはなんぞや？とお思いの方もいらっしゃるかと思います。 これは、「こんな子孫要素を持っている親要素にCSSを適用する」という、今までになかった疑似クラスなんです。 さらには、「こんな子孫要素を持っている親要素の子要素にCSSを適用する」という離れ業も可能で

英臣

    • サイトマップ（sitemap.xml）をサーチコンソールなしでGoogleに送信する方法

      ※2024年3月現在、この方法は使用できなくなっておりました・・・。 残念です。 Sitemaps ping is deprecated. See https://developers.google.com/search/blog/2023/06/sitemaps-lastmod-ping. Error 404 とのことです。 サイトマップ（sitemap.xml）の送信って、みなさまGoogleのサーチコンソールからされることが多いですよね？基本的に。 ですが、どう

      英臣

      • ブラウザなどでお役立ちなショートカット＆操作などなど②

        日々、ブラウザやWindowsなどで効率よく使用する方法のまとめです。 中にはショートカットですらないのも混じっている場合も(笑) すごく基本的なものから、意外と知られていなさそうなショートカットキーもあるかもしれません。 （自分では普通に使っているので…） 今回はフォームなどの入力系でよく使用しているものが多いです。 「Ctrl」＋「C」：コピー 「Ctrl」＋「X」：切り取り 「Ctrl」＋「V」：貼り付け（ペースト）いわずと知れた、昔からあるコピペ（コピー＆ペースト

        英臣

        • 【Wordpress】SWELLテーマのCSS色変数を解析してみました。

          タイトルの通りなんですが、最近、Wordpressの「SWELL」というテーマを使用することが多く、色々とCSSでサイトをカスタマイズする際に・・・ 「管理画面で設定した色はどういう風にして取得しようか」 と考えるようになりました。 Google先生に聞いてみようと検索もしてみたんですが、どうもSWELLのCSSの色変数を紹介している記事に巡り合えず・・・ で、SWELLをちょっと自身で解析してみたんですが・・・ でるわでるわ、けっこういろんなCSSの色変数がありましたので

          英臣

        【HTML＋CSS】疑似クラス :has() がめちゃくちゃ便利！

        英臣

        • サイトマップ（sitemap.xml）をサーチコンソールなしでGoogleに送信する方法

          英臣

        • ブラウザなどでお役立ちなショートカット＆操作などなど②

          英臣

        • 【Wordpress】SWELLテーマのCSS色変数を解析してみました。

          英臣

        マガジン

        • ちょいテク
          8本
        • HTML＆CSS
          16本
        • php
          4本
        • Javascript＋jQuery
          1本

        記事

          【オススメ！】chromeで開いているタブのURLを全て取得できる「Copy All URLs」プラグインがめちゃ便利！

          とりあえず、本題から。 IT業界で働いていると、URLをまとめたりすることって多くないですか？ そんな時に、この「Copy All URLs」というプラグインがすごく便利です！ https://chrome.google.com/webstore/detail/copy-all-urls/djdmadneanknadilpjiknlnanaolmbfk/related?hl=ja まずはインストールから。上記サイトURLに飛んで、「Chromeに追加」ボタンを押せば、インス

          英臣

          【オススメ！】chromeで開いているタブのURLを全て取得できる「Copy All URLs」プラグインがめちゃ便利！

          英臣

          ブラウザなどでお役立ちなショートカット＆操作などなど①

          日々、ブラウザやWindowsなどで効率よく使用する方法をちょっとまとめたいと思います。 そんなにたいしたことではないのですが、知っておくと便利＆体に覚えさせておくと便利、みたいな操作方法やショートカットってたくさんあります。 ショートカットは、基本的に考えるよりも体で覚えておくとメッチャ便利です。作業効率がけっこう上がります。 とりあえず前置きは置いておいて、ご紹介していきますね。 ブラウザは主にchromeメインですが、FireFoxに関してもちょっとだけ書いてます。

          英臣

          ブラウザなどでお役立ちなショートカット＆操作などなど①

          英臣

          【CSS】構造疑似クラス 応用編

          いきなりの「構造疑似クラス 応用編」ですが、初級編はどうした、と聞かれそうです(^_^;) えー、この記事を読まれる方はそれなりにお勉強されている方だと思っておりますので、初級編というか、構造疑似クラスのおさらいを。 https://revenue-test.biz/test_html/structure-pseudo-class.html#first-table CSSでよく使われる「:first-child」とか「:last-child」とか「:nth-child」で

          英臣

          【CSS】構造疑似クラス 応用編

          英臣

          【CSS】多重線のBOXを描いてみます

          たまにデザイナーさんが難しい装飾のBOXデザインを出してきたりしますよね。多重線だったり、２重線だけど極端に線の太さが違っていたり。 普通の枠線だったら、 　単線なら border: 2px solid #f00; 　二重線なら border: 3px double #f00; というふうにすればCSSで簡単に描けるんですが、あまりにもデザインチックな多重線のBOXデザインを持ってこられたら、結構厳しいものがありました。 それを解決するには… box-shadow（

          英臣

          【CSS】多重線のBOXを描いてみます

          英臣

          【CSS】斜め背景と矢印背景

          今回は、「斜めの背景」と「矢印型の背景」をご紹介いたします。 例によって、サンプルからどうぞご覧ください。 https://revenue-test.biz/test_html/bg_diagonal.html ■斜め背景まずは斜め背景から。 これ、デザイナーさんにデザインしてもらうと、よく困ってしまうサイトデザインの一つですよね(笑) 個人的には、「こんなデザインしたところで売り上げは変わらんよ」と思って拒否したくなるんですが…(笑) でもまあ、デザイナーさんも一生懸

          英臣

          【CSS】斜め背景と矢印背景

          英臣

          chromeがなかなか立ち上がらない or よくフリーズする方へ。

          表題の通りなんですが、chromeが普通に動いている方はスルーしてもらって大丈夫です(^_^;) ちょっと最近、私のPCのchromeがよくフリーズするようになり、原因を調べたら… 存在しないアクセラレーター（グラボなど？）をよく探しに行っていることが原因のようでした。 改善方法 １．chromeの右上の3点リーダーをクリック ２．「設定」クリック ３．設定画面から、「詳細設定」→「システム」をクリック ４．「ハードウェア アクセラレーションが使用可能な場合は使用する」

          英臣

          chromeがなかなか立ち上がらない or よくフリーズする方へ。

          英臣

          【CSS】テキストのグラデーション～文字でマスク！

          とりあえず、先行してサンプルHTMLを載せておきます。 https://revenue-test.biz/test_html/text-gradient.html これを見ればまあだいたいはどんなものかわかるかと思いますが…(^▽^;) HTMLでテキストをグラデーション・黎明編「HTMLで、テキストをグラデーション表現したい！」 という欲求は、インターネット創世記から割とあったようです。 <font color="#ff0000">あ</font><font color

          英臣

          【CSS】テキストのグラデーション～文字でマスク！

          英臣

          【ちょいテク】画像の文字をテキスト化したい！そんな時にはOCR。WEB上では、Googleが提供しております。

          今回は、「OCR」についてご紹介したいと思います。 で、最初に言ってしまいますが、GoogleはGoogleドライブとGoogleドキュメントを使用して、OCRサービスをWeb上で実現しています。 「OCR」ってなに？OCR＝Optical Character Recognition/Reader、光学的文字認識 なのだそうです。 簡単に言えば、「画像に描かれた文字をテキスト化してくれるツール」です。 例えば、1枚の資料を渡されて、 「これ、テキストで打ち直して」 という

          英臣

          【ちょいテク】画像の文字をテキスト化したい！そんな時にはOCR。WEB上では、Googleが提供しております。

          英臣

          【CSS】object-fit のご紹介

          今回はCSSの「object-fit」をご紹介いたします。 いろんな画像をサムネイル表示したり、たくさん並べて表示したりする場合、それぞれの画像サイズが違っていたり、縦横比がまるで違っていたりなど、そういった際にはどのように表示させたらよいか、本当に悩みどころでした。 以前はJavascriptを使用してhtml要素のサイズを取得して、画像のトリミング処理を行うなど、非常に手間がかかるうえに重い作業を強いられておりましたが、このCSS「object-fit」が登場し、その

          英臣

          【CSS】object-fit のご紹介

          英臣

          埋め込みGoogle MapをAPIなしで色変化させる方法。（Filterの解説）

          今回は、「Filter」をご紹介いたします。 １.昔、IE独自のFilterというCSSがありました。その昔、Internet Explorer（以下IE）のみに使用できる「Filter」というCSSがございました。 そのFilterは画像を波打たせたりなど、PhotoshopのフィルターみたいなことをCSSで実現していたすごい機能だったんですが、W3Cの提唱するものとは著しくかけ離れており、IE10から除外されました。 ところがなぜか、CSS3になって「Filter」が

          英臣

          埋め込みGoogle MapをAPIなしで色変化させる方法。（Filterの解説）

          英臣

          【CSS】position: sticky; 応用編。 tableのセルに使用すると、セルを固定表示できる！

          今回は前回の予告通り、「position: sticky;」を<table>に適用させてみたいと思います。 .table-sticky table tr:first-child th { position: sticky; top: 0; z-index: 2;}.table-sticky table tr th:first-child { position: sticky; left: 0; z-index: 2;}.table-sticky ta

          英臣

          【CSS】position: sticky; 応用編。 tableのセルに使用すると、セルを固定表示できる！

          英臣

          【CSS】position: sticky;

          今回は「position: sticky;」をご紹介します。 「position」というと… static、relative、absolute、fixed が一般的に使用されますが、比較的新しいpositionの値に、「sticky」が追加されております。 （新しいとは言っても、数年前ですが…(^▽^;)） これがどういうものなのか…百聞は一見に如かず。 サンプルHTMLをご覧ください。 https://revenue-test.biz/test_html/positio

          英臣

          【CSS】position: sticky;

          英臣