detailsタグとsummaryタグ。HTMLだけでアコーディオンメニュー。 JavaScriptを使わなくても、HTMLだけで折り畳められたコンテンツ領域の開閉（アコーディオンメニュー）ができようになった。 情報量が多い箇所など、覚えておくと何かと便利そうなHTML5の新しい要素。基本的な使い方はとにかくシンプル。 コピペで使い回しも可能。 de...

CSSだけで連番を振ってくれる、counter-increment。 CSS3からはプログラミングのプロパティが増え、ブラウザの対応も追いつき、いまではCSSだけで番号を振ることができる。 自動連番、ナンバリングもCSSオンリーで可能となっている。 番号を振ってくれる「counter-increment」プロパティに、「custom-ident（名前）」と「integer...

viewport-fit=coverで、iPhoneのSafe Area外をカバー。 iPhone X以降、iPhone 14までのiPhoneは、画面内にノッチがあったりコーナーが角丸になっている。 画像引用：Layout Guide, Margins, Insets and Safe Area demystified on iOS 10 & 11 Killian ...

SVGテキストのセンタリングは、ブラウザによって挙動が違う。 SVGでのアイコンやテキスト表示は簡単だが、位置やアニメーションの設定をしていると、思わぬところで落とし穴にハマることがある。 表示位置やアニメーションはCSSの方で指定できるが、SVGテキストの場合、何故かSafariでだけうまくいかない場合があった。 実際に検証したところ、CSSの問題ではなく、HTML側で...

ここ数年話題のノーコード。 ここ数年Web業界でトレンドとなっている「ノーコード」。その名の通り、わざわざコードを書かなくてもカッコよくおしゃれなサイトが作れちゃう、というような一見最先端な技術だ。 と、言われているような雰囲気だが、そもそも同じようなことは20年ほど前も謳われていた。HTMLやCSSが分からなくても、ホームページビルダーやDreamweaverなどで簡単楽々に...

記事を書いた後に、意図せずにpタグが挿入されている！？ WordPressで記事を作成している時、想定外にレイアウトが変わってしまうことがある。 よくあるのが、ブログ投稿時の「pタグの自動挿入」だ。 これはデザイナーにとっては（もしかしたらブロガーにも）悩ましく、特にCSSでpタグにスタイルを設定していると、思わぬ表示となり、場合によってはありがた迷惑でもある。 た...

第三者コードの影響を抑えてください！？ PageSpeed Insightsの悪化。 どうも最近サイトの表示速度が遅い。以前はPageSpeed Insightsで80前後のスピードが出ていたが、今では60を切ることが多々ある。40以下のときさえもある。 PageSpeed Insightsをチェックしていたところ、「第三者コードの影響を抑えてください」との表示が...

iPhoneの解像度とは？ デバイスの解像度と、画像サイズと、CSSの解像度。 意外と知らない！？ 解像度を知っておこう。 基本的にWebで使用する写真などの解像度は72px/inchであり、Photoshopの解像度の設定も72px/inchが一般的となっている。 これはWindowsが普及する前の時代、Macの前身であるMacintoshの解像度に由来し...

CSS & JSによるマーカー。 サイトにちょっとしたアクセントが欲しいとき、使い回しが効くマーカーがあると便利だ。 汎用性があるのでスニペットとして使える。 グラデーション付きの、動きのあるマーカー。 ざっくりと、３ステップでOK。 CSSで、マーカーの見た目と動きを作成。（class名「highlight」） JavaScriptで、スクロー...

WordPressで動画を埋め込みたい。 WordPressショートコードの[ video ]〜[ /video ]。 WordPressの投稿で、mp4などの動画を埋め込みたい場合がある。上の猫の動画のように。 ところが、WordPress投稿画面の「メディアを追加」から動画を追加しようとすると[ video ]〜[ /video ]のショートコードが記...

テンプレートタグだけでOK。 WordPressで投稿した内容を、後になって追記したり修正したりする場合がある。そういった場合は「最終更新日」を表記させた方が、訪問する方へ対して親切であり、SEO的にも何かしら効果があると思われる。 プラグインが必要かと思っていて手を出していなかったが、普通にWordPressのテンプレートタグで用意されていて、簡単だった。 使用するテンプレ...

position: stickyの使い方。 サイドバーをスクロールの途中で固定させたい場合、以前はJavaScriptなどを組み合わせなければ実装できなかった。それが「position: sticky」の登場により、CSSだけで可能になった。 ブラウザ対応もすでに追いついており、使い方を覚えると、とても便利なプロパティとなる。 position: stic...

Webデザイナーは、なぜか日本では対価に見合っていないらしい。 Webデザイナーの収入の問題。これは、10年以上前から言われていたことだ。 まず、「Webデザイナー」という定義が曖昧だ。制作作業的には、コーディングができるかどうかで大きく違う。 なのでひとまずここでのWebデザイナーは、Webサイト制作のデザイナー、コーダーは、Webサイト制作でのコーダーと定義する。 ...

SEO対策？ 本職はデザイン業、デザイン脳なのに。 デザインとSEO。 SEOに強くなった。 というか、実はずっと前から強い。 SEOとデザインは基本的には別種だが、デザイン思考でSEO対策をすることは不可能ではない。 例えば〇〇教室。 「地域名 + 〇〇」で検索すると、スマホでもパソコンでも10位前後で推移している。 前後の順位にあるのはすでに名前の知れ...

WebPってどうなのだろう？ メリットは？ Webサイトで使用されている画像をJPGからWebPにしよう、という流れがある。Googleの推しが凄い。 画像自体の見た目のクオリティはJPGでも全く気にならず、人間の目では判断できないほどの十分な色数、画質があるが、WebPは容量が軽くなるというメリットがある。 PNGでは重く、JPGでは使えないアルファチャンネルも...

HTML5やCSS3、SEOなどの先端技術を無料ツールで。 今年2021年、5年ほど前に制作したサイトのリニューアルを承った。前回もリニューアルをしたので、2度目のリニューアルだ。ありがたいことに去年からお願いをされていたのだが、私の目の不調により待ってもらっていた。 だいぶ出来上がったので、ちょっと振り返ってみる。 マイク英会話教室札幌さまのサイト > ...

srcsetとsizesが効かない？ の原因。 以前、「srcsetとsizesがうまく表示され、かつValidになる方法。」というメモを書いていた。 その時は、原因はわからなかったが対処方法はわかったので、とりあえず解決用として以下のHTMLコードを記載した。 解決した記述コード。 <picture> <source me...

パスにもファイルにも問題ないのに404エラー？ デベロッパーツールのコンソールに不明なパスによるエラー。 前々から気にはなっていたが、作業時間を取られてしまうので無視していた、Chromeのデベロッパーツールのコンソールに出ていたエラー。 ありえない404、かつSEOにも表示にも関係のない画像ファイルに対するものなので放っておいた。一応パスを確認したが問題はな...

classセレクタと子孫セレクタ。 2010年頃までは、子孫セレクタの使用は普通だった。どちらかと言えば推奨されていた雰囲気があった。W3Cがそう策定しているので、自分が講師をしていた職業訓練校でもそのように教えていた。教科書に記載されており、検定試験でも出題されているのだ。おそらく今でもそうだ。なぜならW3Cが（WHATWGも）そうしているからだ。 だが近年は、classセレ...

imgタグのsrcsetとsizesが効かない？ MDNで確認。 MDNのサイトに記載されていた、レスポンシブデザイン用の画像指定のサンプルソースコード。 <img srcset="elva-fairy-320w.jpg 320w, elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w" siz...