tips– category –

画像に文字を乗せる際に便利な網掛けフィルター。テーマによっては、ワンクリックで適応できる物もありますが、通常はCSSで設定しますが、手軽に画像自体を加工する方法...

今でもCS6で頑張っているCocotiieです。GoogleがWebPを推奨しているので、導入をしていますがPhotoshopが古い為、他のソフトで変換が必須でした。「CS6でも使えるかもよ...

Chromeには[F12]で表示されるディベロッパーツールがあり、その中にレスポンシブの確認に使用する「デバイスモードツール」があります。最近、表示されなくて困っていま...

keyframesを使用したCSSアニメーションは重宝しますが、細かい設定が難しいですよね。書いては確認の繰り返し。Animistaなら、確認しながら細かい調整が出来ます。コピ...

PageSpeed Insightで、「画像要素で幅と高さを明示的」「widthとheightが明示的に指定されていない」と叱られました。サイズを記載する事はSEOの観点から見ても重要だそ...

PageSpeed Insightsに気に入られよう画像は軽量化する必要があります。最近はPageSpeedがWebPの使用を推奨してきます。無料で軽量化や変換ができるツールをご紹介します...

Visual Studio Codeで、タグを簡単入力できるEmmetはお使いですか？通常はタグを書いて、テキストを後から書く流れだと思います。 では、テキストを流し込みをした場合...

レスポンシブデザインに対応させる為、デバイス毎に表示する画像を変えたい事もあるでしょう。JavaScriptを使用した方法もありますが、HTMLだけの方法をご紹介します。...

図形、文字などを立体に手作業で書くのは至難の業。illustratorでは簡単に3Dに変換する機能が付いています。あっと言う間に出来るので便利です。デザインの幅が広がりま...

ファイルを圧縮し、軽量化する事でサイトの表示速度が上がり、SEO的にも有利です。閲覧する方にとってもスピーディーな表示は良い事ですよね。デメリットが見当たらない...