マガジンのカバー画像

コーディング

5
本
コーディングに関する自分の記事をまとめています。
運営しているクリエイター
折橋 廉
折橋 廉

折橋 廉

画像が表示されないときの原因と対策《mask, aspect-ratio》

画像が表示されないときの原因と対策《mask, aspect-ratio》

先日、「画像が表示されない理由」についてマシュマロを頂きました。

その際にフォルダのパスについてご案内したのですが、後から思えば他にも原因が思い当たったので補足です。
サンプルコードを載せるために記事を書きます。

01. 考えられる原因と対策① 原因１：ブラウザにHTMLをドロップしたローカル環境で見ている

CSS の maskを使用して画像表示している場合、通常のローカル環境ではクロスドメ

もっとみる
折橋 廉

折橋 廉

【2022年】近年のモダンブラウザ CSSハック

【2022年】近年のモダンブラウザ CSSハック

自分用に忘備録です。
近年実装されたものを中心にまとめました。

※ベンダープレフィックスは省略

01. 疑似クラス：「:is()」「:where()」「:not()」記述をすっきりさせる。

「:is()」

input[type="text"]:invalid,input[type="email"]:invalid,select:invalid,textarea:invalid {  box

もっとみる
折橋 廉

折橋 廉

【2022年版】Web制作に役立つチートシートまとめ【主に日本語】

【2022年版】Web制作に役立つチートシートまとめ【主に日本語】

Web 制作で困った時の強力な助っ人「チートシート」。
チートシートに関するまとめ記事は数多くありますが、内容が英語のものが多かったり、リンクが切れていたりと、なかなか探すのが大変です。

そんな悩みに対応すべく、2021年版の最新のチートシート情報をまとめます。
普段筆者が使っているものから、今回記事を書くにあたって新たに追加したものまで、広くのジャンルのものを扱います。

※ 記事は 21.1

もっとみる
折橋 廉

折橋 廉

アニメーション・エフェクトの個人的な探し方

アニメーション・エフェクトの個人的な探し方

先日、マシュマロを頂き、webテンプレートで使うアニメーションやエフェクトをどうやって見つけているのか、ご質問を受けました。

そこで、個人的にどうやってアニメーションやエフェクトを見つけているのか、まとめていきたいと思います。

01. とりあえずブクマしておく
Twitter で「Webクリエイターボックス」様、「コリス」様、「Web Design Trend」様など、ウェブ関連のツイートをさ

もっとみる
折橋 廉

折橋 廉

【Brackets】から【VS Code】に乗り換える

【Brackets】から【VS Code】に乗り換える

プログラミングのためのテキストエディタ「Brackets」は開発元である Adobe のサポート終了が、'21年 9月に決定しています。今後使うエディタに困っている人も多いのではないでしょうか。

この記事は、そんな Brackets 難民の方向けに、「VS Code」に乗り換える方法をまとめます。
※ '21年 8月現在／windows 10 環境

※21.08.19　手違いで書いていた一万字

もっとみる