ニュートンによる虹は7色というのは本当?(絵文字は6色だけど。) 2022.10.16 井川 宜久 ニュートンが虹を7色と決めた? ※敬称略 7色の虹の色。 日本では7色。 日本では虹は7色であるというのは、一般的で、当たり前のこととなっている。 だが虹の色数は国や地域によって異なり、例えばアメリカでは6色が一般的だという。 2色や4色、5色という国、地域もあるらしい。 Appleの初期のレインボーカラーのロゴは6色だった。現在のAppleやMi... CSSmemosWebデザインデザイン脳
SVGテキストをセンタリングする方法。Safariの挙動も解決。 2022.10.12 井川 宜久 SVGテキストのセンタリングは、ブラウザによって挙動が違う。 SVGでのアイコンやテキスト表示は簡単だが、位置やアニメーションの設定をしていると、思わぬところで落とし穴にハマることがある。 表示位置やアニメーションはCSSの方で指定できるが、SVGテキストの場合、何故かSafariでだけうまくいかない場合があった。 実際に検証したところ、CSSの問題ではなく、HTML側で... CSSHTMLmemosWebデザイン
ノーコードは必要なのだろうか?ノーコードはなぜ広がらない? 2022.10.09 井川 宜久 ここ数年話題のノーコード。 ※敬称略 オーサリングとノーコード。 ここ数年Web業界でトレンドとなっている「ノーコード」。その名の通り、わざわざコードを書かなくてもカッコよくおしゃれなサイトが作れちゃう、というような一見最先端な技術。 と、言われているような雰囲気だが、そもそも同じようなことは20年ほど前も謳われていた。HTMLやCSSが分からなくても、ホームページ... CSSHTMLmemosWebデザイン
CSS max-width レスポンシブ対応のピクセル指定は崩れる原因となる。 2022.09.28 井川 宜久 CSSのmax-widthでのピクセルはレスポンシブ対応ではない。 レスポンシブ対応の際に、max-widthでピクセル指定をしている場面がある。よくあるのがパソコン表示用の「max-width: 1000px;」や「max-width: 1100px;」などの指定だ。 実はスマホ以前の書き方。 実はこれは10年以上前の指定方法で、スマホが普及する以前の、主にデスクトップ... CSSmemosWebデザイン
iPhone 14-15の解像度と、画像サイズ、CSSのピクセル設定をどうするか? 2022.09.12 井川 宜久 iPhoneの解像度とは? デバイスの解像度と、画像サイズと、CSSの解像度。 意外と知らない!? 解像度を知っておこう。 基本的にWebで使用する写真などの解像度は72px/inchであり、Photoshopの解像度の設定も72px/inchが一般的となっている。 これはWindowsが普及する前の時代、Macの前身であるMacintoshの解像度に由来していると... CSSHTMLiPhonememosWebデザイン
CSSのobject-fitの使い方。トリミングやサイズの実装例。 2022.09.08 井川 宜久 CSSのobject-fitプロパティでできること。 object-fitでのトリミングが便利。 imgやvideoのサイズをCSSで指定したい時、object-fitプロパティが使える。 要素のボックス内で画像や動画の配置指定ができるので、サイト内に並べる際に、見た目や動きの統一化がしやすい。 object-fitの種類。 object-fit ... CSSmemosWebデザイン
CSSとJSのマーカー。コピペで使えるグラデーション・アニメーション。 2022.09.07 井川 宜久 CSS & JSによるマーカー。 サイトにちょっとしたアクセントが欲しいとき、使い回しが効くマーカーがあると便利だ。 汎用性があるのでスニペットとして使える。 グラデーション付きの、動きのあるマーカー。 ざっくりと、3ステップでOK。 CSSで、マーカーの見た目と動きを作成。(class名「highlight」) JavaScriptで、スクロー... CSSHTMLJavaScriptmemosWebデザイン
backgroundの複数指定が効かない時の確認事項。(CSSアニメーションとの組み合わせ。) 2022.09.06 井川 宜久 CSSで背景画像を複数指定したい。 backgroundプロパティで可能なはずだが... CSS3以降からは背景画像の複数指定が可能となっている。ところが、時々うまく表示されないことがある。 例えば、下記のような書き方では、Chromeでは普通に2つ表示されるが、Safariでは1つの画像しか表示されない。 デザイン的にシンメトリーにしたいのに、片方が表示さ... CSSmemosWebデザイン
CSS filterで色変更。色相・彩度・明度? filterプロパティでできること。 2022.08.28 井川 宜久 CSS filterプロパティでできること。 CSSのfilterの種類。 filterプロパティの関数は代表的なもので10種類ほど。かつてはPhotoshopなどで行っていたWebサイト用の画像加工が、結構CSSだけでカバーできるようになった。 色の三属性やぼかし、シャドウなども。 filterでは色の三属性である色相・彩度・明度の調整から、ぼかし、コントラスト、... CSSmemosWebデザイン
iPhoneの解像度一覧(iPhone8〜13まで)と、CSSブレイクポイントの目安は? 2022.08.22 井川 宜久 iPhoneの画面解像度と「拡大表示」モード。 アナリティクスで画面の解像度をチェックしていると、ちらほらと320x693や320x568という数字があることに気がつく。横幅320pxというと初代iPhoneの解像度だ。不思議に思い確認したところ、どうやらiPhone8以降の「拡大表示」モードのようだ。 ブレイクポイントはどうするか? 「拡大表示」の機能はiPho... CSSiPhonememosWebデザイン
widthの読み方は、ウィドスやウィドゥスよりもウィズが良い理由。 2022.07.23 井川 宜久 widthのカタカナ読みはウィズ。 widthの読み方。 スペルでも発音記号でも。 widthはスペルや発音記号を見てもウィズと読めて、英語圏の外国人と話すときもウィズというカタカナ発音で通じる。 HTMLやCSSでよく使うwidth。 width="" / width: ""; Webデザインで幅の指定に使う「width」は、「ウィドス」や「ウィドゥス... CSSmemosWebデザイン
CSS position: stickyの使い方。効かない!ときはここをチェック。 2022.06.29 井川 宜久 position: stickyの使い方。 CSSでsticky。 position: sticky; サイドバーをスクロールの途中で固定させたい場合は、以前はJavaScriptなどを組み合わせなければ実装できなかった。 それが「position: sticky」の登場により、CSSだけで可能になった。 ブラウザ対応もすでに追いついており、使い方を覚えると、... CSSmemosWebデザイン
Webデザイナー、Webコーダーのお金事情。Are you hungry? 2021.12.30 井川 宜久 Webデザイナーは、なぜか日本では対価に見合っていないらしい。 Webデザイナーの収入の問題。これは、10年以上前から言われていたことだ。 まず、「Webデザイナー」という定義が曖昧だ。制作作業的には、コーディングができるかどうかで大きく違う。 なのでひとまずここでのWebデザイナーは、Webサイト制作のデザイナー、コーダーは、Webサイト制作でのコーダーと定義する。 ... memosWebデザインデザイン
Contact Form 7に確認画面がない!の対処方法。CSSか固定ページでいける。 2021.12.14 井川 宜久 Contact Form 7には確認画面、サンクスページはない。 サンクスページ。 かつてはよく見たサンクスページ。 だがそもそも、確認画面やサンクスページは必要だろうか? 送信完了後のメッセージと、自動返信メールの内容で確認した方が確実ではないだろうか? という時代になってはいないだろうか? Contact Form 7 プラグイン公式ページ。 ... memosWebデザインWordPress
CSSのidセレクタは使ってはいけないって本当なの? 2021.10.07 井川 宜久 idセレクタは使ってはいけない? あるときある学校で、idセレクタは遅いから使ってはいけない、という講師と出会ったことがある。CSSのセレクタはclassセレクタが一番速い、検証してみたから間違いない、そうだ。 正直なところまったく賛同できなかった。本当に検証したのならそうなのかもしれないが、実際にはその証拠を見せていなかった。 ちなみに、学校で学ぶことも多いWebデザイ... CSSmemosSEOWebデザイン
CSSのサーバー反映が遅い?原因切り分けはW3Cで。 2021.09.12 井川 宜久 CSSが反映されない。 どうもCSSが反映されない事が多い。というかサーバー上で直接編集していると、ほぼ毎日、反映されない現象が起きる。サーバーのキャッシュが原因だと思われるが、ここ数年全く改善されていない気がする。 CSSが反映されない原因としては、 ・ブラウザのキャッシュ ・サーバーのキャッシュ ・CSSの記述ミス ・.htaccessの記述の問題、など。 ... CSSmemosPageSpeed InsightsWebデザイン
CSS filterプロパティの使い方。画像調整は楽しく使いやすい。 2021.09.10 井川 宜久 CSS3 filterプロパティの優秀さ。 Webサイトにとって写真は重要だ。古来から百聞は一見に如かずとも言うように、人間は文字情報よりも視覚情報の方がはるかに早く伝わる。 腕の良いカメラマン、カメラウーマンが撮ってくれた写真があればベストなのだが、当然費用がかかる。個人的には写真素材はプロにお願いしたいが、小規模サイトの場合、そうもいかないことがある。必ずしもプロの写真を用... CSSmemosSEOWebデザイン
HTML5とCSS3、WordPress、SEO。無料ツールでランクアップ! 2021.09.09 井川 宜久 HTML5やCSS3、SEOなどの先端技術を無料ツールで。 今年2021年、5年ほど前に制作したサイトのリニューアルを承った。前回もリニューアルをしたので、2度目のリニューアルだ。ありがたいことに去年からお願いをされていたのだが、私の目の不調により待ってもらっていた。 だいぶ出来上がったので、ちょっと振り返ってみる。 マイク英会話教室札幌さまのサイト > ... CSSHTMLmemosSEOWebデザイン
clearfixは過去に作ったサイトでまだ十分に機能している。 2021.08.31 井川 宜久 clearfixとfloatプロパティは、かつてレイアウトを作るのに活用されていた。10年ほど前まで、ブラウザが用意しているstyle設定をリセットする「reset.css」や、その後に普及した「normalize.css」などには、必ずといいほど「clearfix」というものが設定されていた。 例えば、次のように。 .clearFloat{ clear: both; ... HTMLmemosWebデザイン
Chromeのデベロッパーツールで404エラー? 2021.07.22 井川 宜久 パスにもファイルにも問題ないのに404エラー? デベロッパーツールのコンソールに不明なパスによるエラー。 前々から気にはなっていたが、作業時間を取られてしまうので無視していた、Chromeのデベロッパーツールのコンソールに出ていたエラー。 ありえない404、かつSEOにも表示にも関係のない画像ファイルに対するものなので放っておいた。一応パスを確認したが問題はな... CSSHTMLmemosSEOWebデザインWordPress