デザイナー、コーチ、ディレクター / 井川

.

Memos

iPhoneのブラウザでのみ表示不具合の現象に。SafariもChromeもEdgeでも。

iPhoneのブラウザでのみ表示不具合の現象に。SafariもChromeもBingでも。

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

detailsとsummaryの使い方。HTML&CSS or jQueryアコーディオン。

detailsとsummaryの使い方。HTMLだけでアコーディオンを実装。

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

Material Symbols and Iconsの使い方。表示されないときの対処法。

Googleのアイコン。Material Symbols and Iconsの使い方。

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

counter-incrementの使い方。CSSで連番。増えない時の対処。コピペOK。

CSSで連番。counter-incrementの使い方。

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

SVGテキストをセンタリングする方法。Safariの挙動も解決。

SVGテキストをセンタリングする方法。Safariの挙動を解決。

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

ノーコードは必要なのだろうか?ノーコードはなぜ広がらない?

WordPressの記事投稿で自動的にpタグが入らないようにする、わずか1行のコード。

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

WordPress pタグを投稿記事から削除する1行のコード。

detailsとsummaryの使い方。HTMLだけでアコーディオンを実装。

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

第三者コードの影響を抑えてください?の対応と、preconnect。

第三者コードの影響を抑えてくださいの対応。

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

iPhone 14-15の解像度と、画像サイズ、CSSのピクセル設定をどうするか?

iPhone 解像度と画面サイズ、CSSピクセル設定について。

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

CSSとJSのマーカー。コピペで使えるグラデーション・アニメーション。

CSSマーカー。コピペで使えるグラデーション・アニメーション。

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

Webデザインは職業訓練校(ハロートレーニング)かスクールか。迷った場合はどっち。

職業訓練校かスクールか?

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

CSS position: stickyの使い方。効かない!ときはここをチェック。

position: stickyの使い方。効かない時は位置や高さをチェック。

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

jQueryの読み込み位置はhead内。(bodyの閉じタグの前じゃない!?)

閉じタグの前じゃない。

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

WebPへ変換?。メリットや実装・検証結果。

webpの検証結果。

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

HTML5とCSS3、WordPress、SEO。無料ツールでランクアップ!

HTML5とCSS3、WordPress、SEO。無料ツールでランクアップ!

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

clearfixは過去に作ったサイトでまだ十分に機能している。

htmlとcssによるカラムレイアウト。

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