デザイン– tag –
-
[CSS] タイピングのアニメーション
CSSだけで、見出しなどをタイピングした様に一文字づつ表示させ、最後にカーソルを点滅させるアニメーションです。コピペで出来きます。ぜひやってみて下さい。 コード... -
[Photoshop] 網掛け画像の作り方
画像に文字を乗せる際に便利な網掛けフィルター。テーマによっては、ワンクリックで適応できる物もありますが、通常はCSSで設定しますが、手軽に画像自体を加工する方法... -
[WordPress] SWELL 「カスタム書式」の使用例
このサイトで使用している人気のWordPressテーマ「SWELL」のカスタム書式はお使いですか？とても便利なので、ぜひ活用して頂きたい機能です。基本的な設定方法とコピペ... -
[CSS] Animista 簡単! CSSアニメーションとスクロール
keyframesを使用したCSSアニメーションは重宝しますが、細かい設定が難しいですよね。書いては確認の繰り返し。Animistaなら、確認しながら細かい調整が出来ます。コピ... -
[WordPress] Arkhe ブロックパターンライブラリ
Arkhe専用のブロックパターンライブラリが公開されました。コピペするだけなので、とっても便利です。CSSコードブロックが付いているので、カスタマイズが出来ます。素... -
おしゃれなダミー画像 Lorem Picsum
サイト制作で、とりあえず画像を入れたい。でも見栄えも拘りたい。いちいちダウンロードしてトリミングするのは面倒ですよね。URLを書くだけで好きなサイズ、ぼかし、白... -
画像にwidthとheightを書いてSEO対策
PageSpeed Insightで、「画像要素で幅と高さを明示的」「widthとheightが明示的に指定されていない」と叱られました。サイズを記載する事はSEOの観点から見ても重要だそ... -
[CSS] 否定擬似クラスnot()の使い方
この要素以外はこうしたい。と除外が出来る書き方です。あまり必要ないかな？と思いますが、そうでもないのでシェアします。意外と便利ですよ。 【基本形】 :not(ここに... -
デバイスサイズで画像の入れ替えをする。Jsを使わずに
レスポンシブデザインに対応させる為、デバイス毎に表示する画像を変えたい事もあるでしょう。JavaScriptを使用した方法もありますが、HTMLだけの方法をご紹介します。... -
[illustrator] 簡単に3D 立方体(他)を描く
図形、文字などを立体に手作業で書くのは至難の業。illustratorでは簡単に3Dに変換する機能が付いています。あっと言う間に出来るので便利です。デザインの幅が広がりま...