slickのシンプルなサンプル。 petsmetaタグ内に記述。 jQuery本体とslickのJS、slickのCSSを読み込む。 （※jQueryはbodyの閉じタグの前じゃなくても特に問題はない。開発者や公式サイトではmeta内となっている。） <script src="https://code.jquery.com/jquery-3.6....

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

Googleのアイコンフォント。 アイコンフォントといえば「Font Awesome」が有名だが、Google Fontsでもアイコンフォントを無料配布している。 Googleフォントのように使え、SVGやPNG形式で画像として個別にダウンロードすることもできる。 また、デザインツール「Figma」のプラグインとしても利用できる。 Google Fontsのサイトによる...

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

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

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

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

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

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

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

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

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

職業訓練校の場合。 ここ数年度々聞かれることがあり、ネットや上でもリアルの場でも不確かな情報が散見しているので（もちろん良い情報もあるが。）、元職業訓練校講師として、ちょっとまとめてみました。 偉そうにする意図はありませんが、もし参考になれば。 職業訓練校のメリット。 ハローワーク経由となるので、求職者支援として厚生労働省からの公的な支援がある。毎月10...

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

jQueryの読み込みはbodyの閉じタグの前じゃない。 jQueryはどこに書くか？ なんとなく10年ほど前から、jQueryを含めJavaScriptの読み込みはbodyの閉じタグの直前に書いた方が良いと言われている。 ただし、ただ盲目的にbodyの閉じタグの前に書く、というのはやめておいた方が無難だ。 JavaScriptをガシガシ書いて、DOMや読み込みタイ...

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

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

clearfixとfloatプロパティは、かつてレイアウトを作るのに活用されていた。10年ほど前まで、ブラウザが用意しているstyle設定をリセットする「reset.css」や、その後に普及した「normalize.css」などには、必ずといいほど「clearfix」というものが設定されていた。 例えば、次のように。 .clearFloat{ clear: both; ...

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

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