ブロックレベル要素とインライン要素の再認識。 ブロックレベル要素とインライン要素はどこに？ ブロックレベル要素とインライン要素は無くなるはずだった。 かつてHTML5からは、各要素からブロックレベルとインラインの区分けが無くなると言われていた時期があった。 実際、MDNのサイトでは無くなっている。 参照：Block-level content (ブロックレベル...

reCAPTCHAとは？ Googleによる認証システム。 「reCAPTCHA」は、Googleが提供している認証システム。 1か月あたり100万件まで無料で利用でき、人間とbotを区別し、スパムなどからサイトを保護してくれる。 設定方法は少し手間がかかるかもだが、慣れれば数分〜10分ほどで導入できる。 reCAPTCHAのバージョン。 ...

iPhoneだけ表示がおかしい。 WindowsもMacもAndroidも問題なく、iPhoneだけ。 iPhoneのブラウザでだけ表示がおかしい。 iPhoneのブラウザ（Safari、Chrome、Edge）でのみ、表示に不具合がある。 このような現象は見たことも聞いたこともなく、ネット上を調べてみてもどこにも情報が見つからない。 だけども今現在、実際に起...

slickの、シンプルなサンプル。 headタグ内に記述。 slickの使い方は一般的なスライダーと同様。 まずはjQuery本体とslickのJSと、slickのCSSを、CDNで読み込む。 HTML <script src="https://code.jquery.com/jquery-3.6.2.min.js" in...

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

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

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

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

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

記事を書いた後に、意図せずにpタグが挿入されている！？ WordPressによる「wpautop」。 wpautop 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で動画再生。 WordPressショートコードの[ video ]〜[ /video ]。 WordPressの投稿で、mp4などの動画を埋め込みたい場合がある。上の猫の動画のように。 ところが、WordPress投稿画面の「メディアを追加」から動画を追加しようとすると[ video ]〜[...

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

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

WebPってどうなのだろう？ メリットは？ 画像はWebP形式の時代へ。 WebPはGoogleが作った画像ファイル形式。 Webサイトで使用されている画像をJPGからWebPにしよう、という流れがある。 Googleの推しが凄いが、実際に軽くなる。 JPGやPNGからWebPへ。 WebPのメリット。 画像自体の見た目のクオリティはJPG...

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

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