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でできるようになった。 新しいプロパティなので若干、使用方法に慣れが必要かもしれないが、すでに全てのモダンブラウザで実装可能となっている。 ブログやニュースなどの投稿記事のアイキャッチ画像の統一... CSSmemosWebデザイン
text-overflowの使い方。CSSで文字数を制御。効かないときは？ 2023.01.06 井川 宜久 CSSで文字数の制御。text-overflowの使い方。 text-overflowで３点リーダーを付ける場合は単体では機能しなく、次の4つを一緒に指定する必要がある。 width: 30em; (幅の単位や広さは任意。) overflow: hidden; white-space: nowrap; text-overflow: ellipsis; 「text... CSSmemosWebデザイン
slickの使い方。jQueryスライダーのシンプルなサンプル例。コピペも可。 2022.12.17 井川 宜久 slickのシンプルなサンプル。 petsmetaタグ内に記述。 jQuery本体とslickのJS、slickのCSSを読み込む。 （※jQueryはbodyの閉じタグの前じゃなくても特に問題はない。開発者や公式サイトではmeta内となっている。） <script src="https://code.jquery.com/jquery-3.6.... 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は、画面内にノッチがあったりコーナーが角丸になっている。 画像引用：Layout Guide, Margins, Insets and Safe Area demystified on iOS 10 & 11 Killian THORON さま ... 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デザイン
縁取り文字はCSSのtext-strokeで可能。（非推奨の時代は終わり。） 2022.10.29 井川 宜久 縁取り文字はtext-strokeを使った方が楽で確実。 DTPデザインでは当たり前で、イラレでもフォトショでもごく普通に使われている縁取り文字。 文字を縁取りするだけなので簡単そうだが、CSSではなかなか実装されなかった。 そのためWebデザインでは長年シャドウ用の「text-shadow」を駆使して代用していたが、そんな時代がようやく終わった。 2022年6月に... CSSmemosWebデザインデザイン
CSS変数書き方例。:rootを使ってカスタムプロパティを覚える。 2022.10.23 井川 宜久 CSSで変数を使うと、とにかく便利。 JavaScriptやPHPなど、プログラミング言語ではごくごく基本の変数。 CSSの生みの親であるホーコン・ウィウム・リー氏によると、もともとCSSは意図的にプログラミング言語にならないようにしていたそうだ。 それが今では、時代の変化によるニーズの増加もあり、CSS変数（カスタムプロパティ）が使えるようになっている。 変数に慣... CSSmemosWebデザイン
CSSでフェードイン。JS不要、コピペ可。ちょっとリッチな雰囲気を。 2022.10.22 井川 宜久 CSSアニメーションでフェードイン。 数年前まではJavaScriptやjQueryプラグインで実装していた、Webサイトのフェードイン。 サイト訪問時にちょっとリッチな雰囲気を醸し出すフェードインは、今ではすっかりCSSだけで表現が可能となった。 シンプルなフェードインは、汎用性もある。 例えば、htmlセレクタに下記CSSをコピペするだけでOK。（値は変更可。）... CSSmemosWebデザイン
CSS カラーコードで透明度を指定したいとき。（16進数6桁+2桁で。） 2022.10.20 井川 宜久 .green { color: #00ff0080; } .blue { color: rgb(0, 0, 255, 0.5); } 16進数、HEXのカラーコードで透明度を指定したい場合。 CSSで色を指定する際、#からはじまる6桁の英数字、16進数のカラーコードを使うことが多い。 カラーピッカーで感覚的に作った色でも、ロゴやイメージカラーと合わせ... CSSmemosWebデザインデザイン
