Amazonパソコン・周辺機器の売れ筋ランキング >>

HTML・CSS|コピペで簡単!テキスト・文字装飾デザイン記事まとめ

【PR】当サイトでは広告を含みますが、感じたままを正直にお伝えしています
  • URLをコピーしました!

テキストを装飾したいときに参考にしているサイト・記事を、”あのテキストデザインどこにあったっけ?”という備忘録代わりに、精査しながらまとめています。

基本、HTML・CSSをコピペで実装できる記事です。

さかぽん

ノンデザイナーがWebデザインをすることになった際に、大変助かるありがたいサイトばかりです

その他の記事まとめは、こちらからどうぞ。

【HTML・CSS】コピペで簡単!記事まとめ

目次

テキストを強調するデザイン

蛍光マーカーで塗られたような強調


蛍光ペン風にテキスト上をマーカーするCSSを設定してみた | IT便利帳

蛍光ペン風のマーカー表示は、テキストを強調したいときにとても便利!太さの変え方など、丁寧に解説してあるので、アレンジしやすいです。

さまざまなデザインの下線で強調


【CSS】文字に色々なデザインの下線を引く(点線・波線・二重線・蛍光ペン風など)/サルワカ

ストライプの線や、画像を使っての波線など、オシャレで個性的なデザインの下線がそろっています。

ドラクエ風なデザインで強調


ドラクエ風のセリフや文章を再現するHTMLとCSS【コピペ可】/MORIAWASE(モリアワセ)

ドラクエ風にテキストを表現できるだけでなく、選択肢が点滅するんです。アソビ心のあるサイトに使ってみたい♪

テキストリンクのデザイン

基本形から凝ったデザインまで


CSSでテキストリンクをおしゃれなデザインにしてみよう/Naifix

シンプルなテキストリンクの貼り方から、アイコンつきのリンク、複数のリンクをボックス内にいれるデザインのものまで。さまざまなパターンがあり、テープで止めた感じのおしゃれなデザインなど参考になります。

テキストエフェクト

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本

created by Rinker
¥3,025 (2024/11/09 18:22:08時点 Amazon調べ-詳細)

「あのデザインはどう作るんだろう?」が目的別に整理されていて、ネットで何度も調べる手間が省ける1冊。レスポンシブWebデザインの説明もあり、便利なので重宝してます。

ノンデザイナーから楽しく学ぶ「デイトラ」

デイトラは私が2コース受けたぐらい、楽しく学べる業界最安級のWebスキル特化型オンラインスクール。

さかぽん

1年間質問し放題で好きなタイミングで学べて、ずっと閲覧可能で、過去受講した内容も最新に更新されていくのが良いんですよね〜

Web制作コースではコーディング力が身につくので、コピペしてもうまくいかない!という悩みからおさらばできるはず!

よかったらシェアしてね!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

目次