scroll-snap-typeの使い方。CSSでカルーセル。効かないときは? 2023.06.08 井川 宜久 scroll-snap-typeの使い方例。CSSでシンプルなカルーセル。 ちょっと前まではJavaScriptが必須だった、カルーセルやスナップするスクロール。 いまではもう、CSSだけでも結構いける。 スマホのスワイプにも対応している。 scroll-snap-typeの特徴。 CSSのみ。JavaScriptが不要。 scroll-snap-typ... CSSmemosWebデザイン
CSSのブレイクポイントの書き方。メディアクエリはいくつがおすすめ? 2023.05.22 井川 宜久 ブレイクポイント、メディアクエリの最小値は? 320pxも現存している。 Webデザイナーを悩ますブレイクポイント。 Googleアナリティクスを調べていると、320pxからのアクセスは意外と多く、ユーザビリティ的に無視できない。 スマホの元祖である、初代iPhoneの横幅は320pxだった。それが基準となっているのか、2023年7月末時点でも、度々320pxからの... CSSmemosWebデザイン
iPhoneのブラウザでのみ表示不具合の現象に。SafariもChromeもEdgeでも。 2023.04.22 井川 宜久 iPhoneだけ表示がおかしい。 WindowsもMacもAndroidも問題なく、iPhoneだけ。 iPhoneのブラウザでだけ表示がおかしい。 このような現象は見たことも聞いたこともなく、ネット上を調べてみてもどこにも情報が見つからない。 だけども今現在、実際に起こっている。 文字コード? Mac用のVSCodeで作成したファイルは、デフォ... ChatGPTCSSHTMLiPhonejQuerymemosWebデザイン
CSS gapの使い方?Flexboxでレスポンシブ?効かないときは? 2023.03.02 井川 宜久 gapとは? divなどで作ったボックスを並べるとき、要素間に均一な余白を開けると綺麗に見える。 これまでは「margin」、もしくは「padding」を使うのが一般的だったが、「gap」を使うという選択肢が増えた。 すでにモダンブラウザはgapに対応している。 参考: gap" | Can I use... Support tables for HTML5, CS... CSSmemosWebデザインデザイン
TechAcademyの評判をChatGPTに聞いてみたら。 2023.01.30 井川 宜久 TechAcademyの評判はどうなのだろう? ここ数年ふと気になっているプログラミングスクール「TechAcademy」について、ChatGPTに聞いてみた。 TechAcademyの評判を知っていますか? すると、、、 TechAcademyは日本では有名なプログラミングスクールですが、具体的な評判は知りません。TechAcademyはWeb... ChatGPTCSSJavaScriptjQuerymemosPHPWebデザインWordPressデザイン
CSSの変数と関数。覚えておくと便利なCSSプログラミング。 2023.01.26 井川 宜久 CSSでは変数や関数は使えなかった。 CSSの生みの親であるHåkon Wium Lie(ホーコン・ウィウム・リー)氏はTwitterで、もともとCSSはプログラミング言語にしないようにしていた、と発言している。 そのような経緯もあったためか、長らくCSSは、変数や関数、演算などのプログラミング的な要素は取り入れられなかった。 しかしCSSが登場してすでに20年以上、来年... CSSmemosWebデザイン
CSS aspect-ratioの使い方。効かないときはどうする? 2023.01.24 井川 宜久 CSSで縦横比の指定。aspect-ratioの使い方。 aspect-ratioの登場により、画像やGoogle Map、YouTubeなどの縦横比(アスペクト比)の指定がCSSでできるようになった。 すでに全てのモダンブラウザで実装可能となっている。 ブログやニュースなどの投稿記事のアイキャッチ画像の統一や、商品画像の一覧、Google MapやYouTubeなどのア... CSSmemosWebデザイン
text-overflowの使い方。CSSで文字数を制御。効かないときは? 2023.01.06 井川 宜久 CSSで文字数の制御。text-overflowの使い方。 text-overflowで3点リーダーを付ける場合は単体では機能しなく、次の4つを一緒に指定する必要がある。 width: 30em; (幅の単位や広さは任意。) overflow: hidden; white-space: nowrap; text-overflow: ellipsis; 「text... CSSmemosWebデザイン
slickの使い方。jQueryスライダーのシンプルなサンプル例。コピペも可。 2022.12.17 井川 宜久 slickの、シンプルなサンプル。 headタグ内に記述。 slickの使い方は一般的なスライダーと同様。 まずはjQuery本体とslickのJSと、slickのCSSを読み込む。 HTML <script src="https://code.jquery.com/jquery-3.6.2.min.js" integrity=&qu... CSSHTMLJavaScriptjQuerymemosWebデザイン
detailsとsummaryの使い方。HTML&CSS or jQueryアコーディオン。 2022.12.10 井川 宜久 detailsタグとsummaryタグ。HTMLだけでアコーディオンメニュー。 JavaScriptを使わなくても、HTMLだけで折り畳められたコンテンツ領域の開閉(アコーディオンメニュー)ができようになった。 情報量が多い箇所など、覚えておくと何かと便利そうなHTML5の新しい要素。基本的な使い方はとにかくシンプル。 コピペで使い回しも可能。 de... CSSHTMLJavaScriptjQuerymemosWebデザイン
Material Symbols and Iconsの使い方。表示されないときの対処法。 2022.12.09 井川 宜久 Googleのアイコンフォント。 アイコンフォントといえば「Font Awesome」が有名だが、Google Fontsでもアイコンフォントを無料配布している。 Googleフォントのように使え、SVGやPNG形式で画像として個別にダウンロードすることもできる。 また、デザインツール「Figma」のプラグインとしても利用できる。 Google Fontsのサイトによる... CSSHTMLmemosWebデザインオンラインツール
CSSブレンドモード。mix-blend-modeの例一覧。乗算やスクリーンを! 2022.11.30 井川 宜久 CSSブレンドモード。 PhotoshopやFigmaなどのデザインツールでお馴染みの描画モードが、CSSでも使えるようになっている。 「描画モード」は英語では「Blend Mode(ブレンドモード)」であり、レイヤーとレイヤーを混ぜ合わせた表現となる。 そのように、画像やテキストなどを「ブレンド」できるのが、「mix-blend-mode」プロパティ。 m... CSSmemosWebデザイン
counter-incrementの使い方。CSSで連番。増えない時の対処。コピペOK。 2022.11.22 井川 宜久 CSSだけで連番を振ってくれる、counter-increment。 CSS3からはプログラミングのプロパティが増え、ブラウザの対応も追いつき、いまではCSSだけで番号を振ることができる。 自動連番、ナンバリングもCSSオンリーで可能となっている。 番号を振ってくれる「counter-increment」プロパティに、「custom-ident(名前)」と「integer... CSSHTMLmemosWebデザイン
viewport-fit=coverで対応。iPhoneのSafe Area問題。 2022.11.17 井川 宜久 viewport-fit=coverで、iPhoneのSafe Area外をカバー。 iPhone X以降、iPhone 14までのiPhoneは、画面内にノッチがあったりコーナーが角丸になっている。 画像引用:Layout Guide, Margins, Insets and Safe Area demystified on iOS 10 & 11 Killian ... CSSHTMLiPhonememosWebデザイン
CSS フォントサイズはどうする? remの基本かつ効果的な使い方。 2022.11.15 井川 宜久 remで覚えると安全かつ便利。 Webサイト制作の際に必ずと言って良いほど使用するfont-size。毎回の制作の度にfont-sizeの指定をするが、どのくらいのサイズが適切なのか迷ってしまうことがある。 pets単位とサイズ。 もし単位に迷うのであれば、「px」ではなく「rem」で指定しておいた方が安全で使いやすい。 サイズについては、各ブラウザ間でほぼほぼ16... CSSmemosWebデザイン
Chromeデベロッパーツールでスマホ表示チェックする際の注意点。 2022.11.14 井川 宜久 デベロッパーツールのショートカット。 デベロッパーツールは右クリックからも開けるが、よく使う機能なのでショートカットで覚えておくと作業がはかどる。 ショートカット Mac: 「Command」 + 「Option」 + 「i」(FirefoxやSafariでも同じ。) Win: 「Ctrl」 + Shift「」 + 「i」 (「F12」でも可。) で開いた... CSSiPhoneJavaScriptmemosWebデザイン
line-clampの使い方。CSSで複数行指定。効かないときは? 2022.11.08 井川 宜久 CSSで複数行指定。line-clampの使い方。 line-clampの登場により、JavaScriptやPHPなどを使用しなければなからなった「複数行指定、文字列の抜粋」が、CSSだけでできるようになった。 まだ新しいプロパティなので使用方法に慣れが必要かもしれないが、IEのサポート終了によりモダンブラウザでの実装は可能である。 ブログやニュースなど、投稿記事のタイト... CSSmemosWebデザイン
CSS box-sizingは、リセット用のCSSに書いておくと使いやすい。 2022.11.07 井川 宜久 box-sizing: border-box;があちこちに記載されている。 良さげなデザインのサイトのコードを参考にしたり、Webサイトのコーディングの添削をしたりする際に、意外と遭遇するのが「box-sizing: border-box;」が指定されているCSSファイル。 box-sizingとは? box-sizingはCSS3で登場したプロパティで、初期値は「con... CSSmemosWebデザイン
CSSの@whenと@else。新しいブレイクポイントの設定方法? 2022.11.03 井川 宜久 @whenと@elseは普及するだろうか? CSSのブレイクポイントの新しい書き方なのか、「@when」と「@else」を使用したif文のような条件分岐が草案となっている。 W3Cのサイトにドラフトで、@whenを使った条件分岐として下記のような例が記載されている。 引用元サイト:CSS Conditional Rules Module Level 5 @whe... CSSmemosWebデザイン
text-shadow 縁取りがおしゃれに効かない時はdrop-shadowで。 2022.11.01 井川 宜久 text-stroke使用時は、text-shadowの挙動がすこし違う。 文字を縁取りするためtext-strokeを使っているときに、さりげなくおしゃれな感じにtext-shadowでシャドウをかけたいことがある。 そこでちょっと試しに、静かで澄んだの山頂上空の写真と、賑やかなネオンのムーラン・ルージュの写真に文字を乗せて検証してみた。 [affiliate] ... CSSmemosWebデザイン