当サイトでは広告を含みますが、感じたままを正直にお伝えしていますテキストを装飾したいときに参考にしているサイト・記事を、”あのテキストデザインどこにあったっけ？”という備忘録代わりに、精査しながらまとめています。基本、HTML・CSSをコピペで実装できる記事です。
ノンデザイナーがWebデザインをすることになった際に、大変助かるありがたいサイトばかりです。
その他の記事まとめは、こちらからどうぞ。
テキストを強調するデザイン
蛍光マーカーで塗られたような強調
蛍光ペン風にテキスト上をマーカーするCSSを設定してみた | IT便利帳
蛍光ペン風のマーカー表示は、テキストを強調したいときにとても便利！太さの変え方など、丁寧に解説してあるので、アレンジしやすいです。
さまざまなデザインの下線で強調
【CSS】文字に色々なデザインの下線を引く（点線・波線・二重線・蛍光ペン風など）／サルワカ
ストライプの線や、画像を使っての波線など、オシャレで個性的なデザインの下線がそろっています。
ドラクエ風なデザインで強調
ドラクエ風のセリフや文章を再現するHTMLとCSS【コピペ可】／MORIAWASE（モリアワセ）
ドラクエ風にテキストを表現できるだけでなく、選択肢が点滅するんです。アソビ心のあるサイトに使ってみたい♪
[originalsc]
テキストリンクのデザイン
基本形から凝ったデザインまで
CSSでテキストリンクをおしゃれなデザインにしてみよう／Naifix
シンプルなテキストリンクの貼り方から、アイコンつきのリンク、複数のリンクをボックス内にいれるデザインのものまで。さまざまなパターンがあり、テープで止めた感じのおしゃれなデザインなど参考になります。
リンクを動きで目立たせるデザイン
テキストリンクのホバー時に使えるエフェクト・デザインサンプル 15／NxWorld
マウスをリンクの上にもっていくと、テキストの色が変化、大きくなる、下線が伸びるなど。ここぞというときに目立たせるのに、便利なデザイン。
自動でリンクのアイコンを表示
リンク先や拡張子ごとにアイコンを表示する方法／NxWorld
いちいち画像を入れなくても、リンク先や、拡張子で判断してアイコンを表示するデザイン方法。アイコンを表示することで、訪問者にリンク先がわかりやすくなります。企業だったら、PDFアイコンをよく使うはず。
アイコンはFont Awesomeを使うと楽です。
楽して便利！Webアイコンフォント『Font Awesome』の使い方と活用 Tips
テキスト周りのスタイリング
上級者になれた気がするノウハウ
テキスト周りのスタイリングに使えるCSSプロパティやスニペット／NxWorld
文字の間隔を調整したり、先頭の文字を字下げしたり・・・テキスト周りの調整に役立つノウハウがぎっしり。強調文字をより目立たせたり、記事を読ませるためのデザインに役立つこと間違いなし。
テキストエフェクト
CSSのみでテキストを「飾る・動かす」おしゃれなエフェクト10／commte blog
CSS3の広がる可能性！美しいテキストエフェクト用コードスニペット24個まとめ／PHOTOSHOP VIP
その他のテキスト装飾デザイン
テキストを会話風に表示
WordPressで会話風の画像とテキストをコピペで簡単表示！／MORIAWASE（モリアワセ）
便利なWordPressのテンプレートプラグインの説明もあって親切！スマホ表示でも崩れないデザインになっています。
Q&A、FAQ、よくある質問ページの表示デザイン
(K)「Q＆A」ページはDLタグとCSSで作成するのがいいね(CSS覚え書き) | web(K)campus
DLタグとCSSで作成するFAQ。CSSのみと、画像を使ったパターンの2通りがあります。
ノンデザイナーにおすすめ情報
ネットでググる情報だけでは物足りなくなった人におすすめです。
ノンデザイナーにおすすめのCSS本
「あのデザインはどう作るんだろう?」が目的別に整理されていて、ネットで何度も調べる手間が省ける1冊。レスポンシブWebデザインの説明もあり、便利なので重宝してます。
コメント