tips– category –
-
[CSS] タイピングのアニメーション
CSSだけで、見出しなどをタイピングした様に一文字づつ表示させ、最後にカーソルを点滅させるアニメーションです。コピペで出来きます。ぜひやってみて下さい。 コード... -
MailChimp(メールチンプ)Audiencesの削除方法
メルマガなど、メールを大量に送信するサービスのMailChimp(メールチンプ)は便利なのですが、慣れが必要です。自力で探すのは結構大変かも。Audiences(メールアドレス... -
target=”_blank”の危険性とVSCでスニペット
リンク先を新しいウィンドウで開くtarget=”_blank”には、セキュリティ面の脆弱性に問題があるとの事です。サックリなのですが、noopenerは、リンク先に重たいJavaScript... -
MailChimp(メールチンプ)でムームードメイン認証
MailChimpは、メールを一度に沢山配信するメルマガ配信機能を提供している会社です。まだ日本ではあまり馴染みが無いかもしれません。サイトは英語ですが、無料プランも... -
[Photoshop] 網掛け画像の作り方
画像に文字を乗せる際に便利な網掛けフィルター。テーマによっては、ワンクリックで適応できる物もありますが、通常はCSSで設定しますが、手軽に画像自体を加工する方法... -
[Photoshop] CS6でWebP 読み込みをする
今でもCS6で頑張っているCocotiieです。GoogleがWebPを推奨しているので、導入をしていますがPhotoshopが古い為、他のソフトで変換が必須でした。「CS6でも使えるかもよ... -
[Chrome] レスポンシブ確認 モバイルシミュレーター
Chromeには[F12]で表示されるディベロッパーツールがあり、その中にレスポンシブの確認に使用する「デバイスモードツール」があります。最近、表示されなくて困っていま... -
[CSS] Animista 簡単! CSSアニメーションとスクロール
keyframesを使用したCSSアニメーションは重宝しますが、細かい設定が難しいですよね。書いては確認の繰り返し。Animistaなら、確認しながら細かい調整が出来ます。コピ... -
画像にwidthとheightを書いてSEO対策
PageSpeed Insightで、「画像要素で幅と高さを明示的」「widthとheightが明示的に指定されていない」と叱られました。サイズを記載する事はSEOの観点から見ても重要だそ... -
画像圧縮 おすすめツール2選 Squoosh ,Tiny PNG
PageSpeed Insightsに気に入られよう画像は軽量化する必要があります。最近はPageSpeedがWebPの使用を推奨してきます。無料で軽量化や変換ができるツールをご紹介します...