scroll-snap-typeの使い方。CSSでカルーセル。効かないときは？ 2023.06.08 井川 宜久 CSSでシンプルなカルーセル。scroll-snap-typeの使い方例。 ちょっと前まではJavaScriptが必須だった、カルーセル。 いまではもう、CSSだけでも結構いける。 スマホのスワイプにも対応している。 CSSのみ。JavaScriptが不要。 scroll-snap-typeと、scroll-snap-alignを使用。 テキストはもちろん、... CSSmemosWebデザイン
.htaccessや.ssh、.ftpconfigなどの隠しファイルを表示させる方法。 2023.05.29 井川 宜久 隠しファイルとは？ 謝って変更や削除をしてしまわないように、デフォルトでは見えなくされているファイル。 ところがWeb制作の際に必要となる、.htaccessや.ssh、.ftpconfigなども見えない、不可視状態となってしまう。 そのようなときは、、、 ショートカットで表示させる方法。 ショートカットは以下の方法が楽。コマンドや少しの手順で表示・非... MacmemosWebデザイン
CSSのブレイクポイントの書き方。メディアクエリはいくつがおすすめ？ 2023.05.22 井川 宜久 ブレイクポイントの最小は320px？ スマホの元祖である、初代iPhoneの横幅は320pxだった。 それが基準となっているのか、2023年時点でも、320pxからのアクセスがある。 320pxは現存している。 320pxからのアクセスは、Googleアナリティクスを調べているとわかる。例えば月間約10,000〜15,000ユーザーのサイトで、70〜80ユーザーほど計測... CSSmemosWebデザイン
iPhoneのブラウザでのみ表示不具合の現象に。SafariもChromeもEdgeでも。 2023.04.22 井川 宜久 iPhoneだけ表示がおかしい。 WindowsもMacもAndroidも問題なく、iPhoneだけ。 iPhoneのブラウザでだけ表示がおかしい。 このような現象は見たことも聞いたこともなく、ネット上を調べてみてもどこにも情報が見つからない。 だけども今現在、実際に起こっている。 文字コード？ Mac用のVSCodeで作成したファイルは、デフォ... ChatGPTCSSHTMLiPhonejQuerymemosWebデザイン
商用利用可、著作権フリーな画像生成AI。Adobe Fireflyの使い方例。 2023.03.28 井川 宜久 Adobe Fireflyとは？ 画像生成AIと文章生成AI。 Stable Diffusionがすごい、DALL·Eがやばい、ChatGPTがとんでもない、というハイスピードなAI新時代に、いよいよデザインツールの大御所と言えるAdobe社が参入してきた。 Fireflyという名前のツールとなるらしい。 （蛍ではなく赤い鳥。現在は順番待ち。） 肖像権... AImemosWebデザインデザインデザインツール脳
サイトが高速化？.htaccessをチェック。キャッシュ指定は要注意。 2023.03.17 井川 宜久 サイトの.htaccessファイルが間違っているかも。 サイトが重たいときやSEO対策をしたいとき、.htaccessで対策することが度々ある。 そのような場合、あちこちとサイトを検索して、コードを拝借して利用していることもあるだろう。 ありがたいことに、ネット上には色々とコピペOKなコードが提供されている。 ただし肝心のコピー元や自分自身のアレンジが間違っていた場... ChatGPTmemosPageSpeed InsightsSEOWebデザインWordPress
喋るChatGPT。対面会話AI。Chat D-IDの不思議なAlice。 2023.03.14 井川 宜久 Chat D-ID（チャットD-ID）とは？ 声で会話をするChatGPT。 会話型チャットAIのChatGPT（チャットGPT）が、早くも喋り始めている。 D-ID社のサービス「Chat D-ID」のサイトを訪れると、「Alice」という名前の人間の女性のような顔立ちのAIが出迎えてくれる。 画像生成AIの「Stable Diffusion」と、会話型AI... AIChatGPTmemosWebデザインデザイン脳
CSS gapの使い方？Flexboxでレスポンシブ？効かないときは？ 2023.03.02 井川 宜久 gapとは？ divなどで作ったボックスを並べるとき、要素間に均一な余白を開けると綺麗に見える。 これまでは「margin」、もしくは「padding」を使うのが一般的だったが、「gap」を使うという選択肢が増えた。 すでにモダンブラウザはgapに対応している。 参考： gap" | Can I use... Support tables for HTML5, CS... CSSmemosWebデザインデザイン
FigmaからCMYKでエクスポート。画像軽量化プラグイン「TinyImage Compressor」の使い方。 2023.02.27 井川 宜久 TinyImage Compressorプラグインとは？ TinyImage Compressorは、Figmaからエクスポートするファイルを軽量化してくれるプラグイン。 Figmaでは現時点サポートされていないCMYKに変換したり、画像形式をWebPなどに変換してくれる。 印刷用にしたい場合はCMYKでPDFのエクスポート、Web用にしたい場合はRGBでWebPに、とい... FigmamemosWebデザインデザインデザインツール
O-DANの使い方や著作権など。商用利用可なフリー素材をODAN(オーダン)。 2023.02.21 井川 宜久 O-DAN（オーダン） 商用利用可能なフリー写真や画像を世界から横断。 ここ数年すっかりお世話になっている、商用利用可かつ著作権フリーな写真・画像の検索サイトO-DAN。 何が良いかと言えば、とにかく使い勝手が手軽。アカウント登録の必要さえもない。 基本的にクレジット表記も不要で、加工もOK。ブログの記事やアイキャッチ画像（サムネイル）にも使える。 （※クレジット表... memosWebデザインオンラインツールデザイン
FigmaとAI Genius。レイアウト作成、UI/UXデザインを一緒に。 2023.02.19 井川 宜久 GeniusをAI仲間に、Figmaでデザインを。 AIの勢いが止まらない。 デザインツール「Figma」にも、AIのデザイン・コンパニオンがやってくる。 開発元のDiagram社のサイト上で公開されている動画によると、「Companion（コンパニオン）」という名の通り、付き添う仲間や友、連れ、という役割をしてくれる様子。 ざっくりとデザインを考えているときなどに... AIFigmamemosWebデザインデザインデザインツール脳
Illustrator 「クロスと重なり」の使い方。簡単操作が作業効率を上げる！ 2023.02.18 井川 宜久 クロスと重なりとは？ 「クロスと重なり」機能の登場で、デザインでよく使う、オブジェクトの重ね方が一瞬でできるようになった。 例えば、オリンピックの五輪マークのようなデザインをしたいときなどは、とても便利にできる。 以前はハサミツールでパスを切ったり、切ったオブジェクトを同じ場所に重ねたりと、色々と合わせ技が必要だったが、「クロスと重なり」はその作業を短縮させられる。 ... IllustratormemosWebデザインデザインデザインツール
Illustratorの「スケッチをベクターに変換」を実際にやってみた手順。 2023.02.17 井川 宜久 手書きのスケッチをベクターデータへ変換。 「スケッチをベクターに変換」の機能は、その名の通り、ペンや鉛筆などで描いたスケッチのJPGやPNG画像をベクター化することができる。 ずっと欲しかった機能で、ありそうでなかった。 使い方は簡単で、数ステップでベクター化できる。 アートボードにJPGやPNGなどを配置する。 今回はボールペンで描いたエッフェル塔のスケ... IllustratormemosWebデザインデザインデザインツール
WordPress投稿の目次が消えたら！Table of Contents Plusの表示方法。 2023.02.12 井川 宜久 WordPeessのブログ記事の目次が急に消えた!? ふと気づいたら、WordPressのブログ記事の目次が消えていた。 あれ？と思ったら、Table of Contents Plusのアップデートの影響らしい。 ひとまず下記の手順で解決しました。 （※特にTable of Contents Plusをダウングレードする必要はない。） 今回表示がされなくな... memosWebデザインWordPress
“Atom.app”を開くとコンピュータが破損します。の対処法。 2023.02.06 井川 宜久 Atomがいよいよ。 開発終了が発表されていたAtomが、いよいよ使用不可となってきた。 起動しようとすると「"Atom.app"を開くとコンピュータが破損します。ゴミ箱に入れる必要があります。」という結構な強めのメッセージが表示され、起動自体ができない。 （※Macの場合。おそらくWindowsも似たようなメッセージかと思われる。） ... EditormemosWebデザイン
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デザイン
Illustratorのシェイプ形成ツールの使い方。見つからないときは！？ 2023.01.19 井川 宜久 シェイプ形成ツールは簡単に使える。 「シェイプ形成ツール」は「パスファインダー」と似たような機能で、なんとなく気軽に使える。 もちろん使い分けをするのがベストだが、両方ともそれほど難しくなく、それでいて扱えると作業効率が格段に上がる。 ロゴやピクトグラム、イラスト作成時などには特に役に立つ。 もしこのことを知らなければ、「ペンツール」などで頑張ってしまい、結局それで... DTPIllustratormemosWebデザインデザインデザインツール
FigmaからWebPで書き出しす方法。Olive Pressの使い方 2023.01.16 井川 宜久 Figmaのプラグイン「Olive Press」とは？ WebPで書き出すことが増えている。個人的にはWeb用の画像のほとんどは.webp形式を使用している。 現時点、FigmaやIllustratorなどのソフトはデフォルトでWebPは書き出せないが、画像形式を変換できるWebサイトはネット上に多々ある。 また、Figmaのプラグイン「Olive Press」は、Fig... FigmamemosWebデザインデザインデザインツール
