iPhoneだけ表示がおかしい。 WindowsもMacもAndroidも問題なく、iPhoneだけ。 iPhoneのブラウザでだけ表示がおかしい。 このような現象は見たことも聞いたこともなく、ネット上を調べてみてもどこにも情報が見つからない。 だけども今現在、実際に起こっている。 文字コード？ Mac用のVSCodeで作成したファイルは、デフォ...

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

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 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 ]のショートコードが記...

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

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

jQueryの読み込みは、bodyの閉じタグの前じゃない。 jQueryはどこに書くか？ なんとなくjQueryの読み込みは、bodyの閉じタグの直前に書いた方が良いと言われている。 ただし、盲目的にbodyの閉じタグの前に書く、というのはやめておいた方が無難だ。 jQueryはどこに書くか？という疑問を持つのなら、開発者に沿った使い方、he...

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...