Webデザイナー×ブロガーのリンゴが、Apple製品を中心に、PCやスマホ、ガジェット等、自分が好きな物の情報だけを発信するブログ。

当ブログについて

筆者について

リンゴプロフィール

Apple製品にハマった人生
Webデザイナー×ブロガー×動画編集者×個人事業主 リンゴ

リンゴをSNSでフォローするならこちら


2018/03/27

制作(Web/印刷物)

Post Title

CSSを使って”縁取りされた文字”を作る方法は『text-stroke』でサッと。

  • スポンサーリンク

Webデザイナー”Ringo”おはようございます。
”個人事業主・起業家の集客を手伝うWebデザイナー”のリンゴ(@rebirth_design)です!
僕が好きな「ブログ」や「ガジェット」といった、デジタル関連の物達が持っている”わくわく”感を伝えたいと思って、毎朝8時にブログを更新しています。

Webサイトやブログ上で、縁取りされた文字を表示させるには画像を用いていましたが、CSSでも作成できるんですよね。

こんな感じ↓のやつ。

「縁取りのある文字が出ていますか?」

方法は結構簡単で『text-stroke』というプロパティをCSS内に記述するだけでOK。

CSSの『text-stroke』を使って、簡単にサイトやブログの文字に縁取りの表現を!

『text-stroke』を使って文字を縁取る為には、CSS内に以下のように記述をします。

『text-stroke』の書き方の例

#text {
color: #fff;
font-size: 200%;
font-weight: bold;
   -webkit-text-stroke: 1px #2b2b2b;
}

もしくは…

#text {
color: #fff;
font-size: 200%;
font-weight: bold;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-colorr: #2b2b2b;
}

『-webkit-text-stroke』というプロパティになります。(Firefox等も含めて)

『text-stroke』の表示例

「#textはこうなります。」

画像や『text-shadow』を使う方法よりも簡単で良いですね。

ただ、Internet Explorer等の一部ブラウザには対応していないようなので注意。

まとめ「【text-stroke】で簡単に縁取りのついた文字を作れる。ただし一部対応していないブラウザも有。」

Webデザイナー”Ringo”今回は「CSSを使って”縁取りされた文字”を作る方法は『text-stroke』でサッと。」って話でした。

サイトやブログ上で縁取りのある文字を表現するには『text-stroke』が楽。

ただし、一部対応していないブラウザがあったり、線を太くしたり文字を小さくしてしまうと縁の線で文字の色が潰れてしまうこんな感じので使い方は少し気を付けて、画像や『box-shadow』を代わりに使うのが良いかなーと思います。

けど勝手を理解して上手く使うことができれば、修正の度に画像を作成する手間も省けるので助かりますね!

ということで、また明日も朝8時に記事を更新するので読んで下さいね。また明日!

  • オススメ記事&スポンサーリンク


  • スポンサーリンク

この記事が面白い・役に立ったと思ったら、今すぐSNSでシェアして下さい!記事を書くモチベーションが上がります!

こんな記事にも興味がありませんか?

この記事を書いたのは「リンゴ」

筆者「リンゴ」について

リンゴプロフィール

リンゴをSNSでフォローするならこちら

Apple製品にハマった人生
Webデザイナー×ブロガー×動画編集者×個人事業主 リンゴ

当ブログ『リンゴノマド』では【HPとブログの運営&集客】【PC&ガジェット】【ワークスタイル】【自分の仕事】に関する情報を発信。

2015年、Webやガジェットから感じるわくわく感を伝えたくて、ブログを書き始める。

毎日投稿を続け、自分の発信が人の役に立てたこと、月間アクセス数10万超えを達成できたこと、さらに少額ながらお金も稼げたことに喜びを感じる。

そこで、ブログ運営を手伝うことを仕事にしようと試みたが失敗。
結果は出ず…

現在、自分のできるスキルを活かして、人の役に立てることを模索中。

仕事の依頼・相談は問い合わせページ、もしくは各SNSにてお願いします。

詳細プロフィールを見る

リンゴに仕事を依頼・相談する

  • スポンサーリンク



  • 僕が通うコワーキングスペース。テレワークで困っている貴方にも!

筆者について

リンゴプロフィール

Apple製品にハマった人生
Webデザイナー×ブロガー×動画編集者×個人事業主 リンゴ

リンゴをSNSでフォローするならこちら

ブログ全体の新着記事

楽しく生活したい人におすすめ

【おすすめ】MacBook使用時の猫背を改善!姿勢が良くして、肩…

楽しく生活したい人におすすめ

【画像付き解説】アマゾンのPrime Videoチャンネルの登録…

No Image

Apple好きにおすすめ

【長期使用レビュー】AirPodsとAirPods Proを比較…

No Image

楽しく生活したい人におすすめ

【2021年春夏】GW連休におすすめ!カップル・家族・親子で遊ぶ…

楽しく生活したい人におすすめ

Mugen WiFi解約。ルーター返品方法・掛かる費用。『30日…

楽しく生活したい人におすすめ

【2021年版】YouTubeで広告収益を得られる条件。厳しくな…

新着投稿をもっと見る

制作(Web/印刷物)の新着記事

楽しく仕事したい人におすすめ

僕にも出来た『自作LINEスタンプ』を売るまでの流れ。販売に必要…

楽しく仕事したい人におすすめ

【初心者へ】YouTube動画編集担当の作業環境。おすすめのパソ…

楽しく仕事したい人におすすめ

ハイクオリティなヘッドホンはNG…!?動画編集用のヘッドホン・イ…

楽しく仕事したい人におすすめ

サイトやブログにVideoタグで埋め込んだ動画。再生数を集計する…

楽しく仕事したい人におすすめ

Adobe CreativeCloudのTypekitフォントが…

楽しく仕事したい人におすすめ

MSゴシックで資料や店内POPを作るのは止めて!キレイなフォント…

「制作(Web/印刷物)」の一覧を見る

ブログ全体の人気記事

Apple好きにおすすめ

【随時更新】Macで遊べるオススメのゲームをまとめて紹介!(iM…

楽しく生活したい人におすすめ

SFC・SS・PS・N64・GC。HDMI接続できないレトロゲー…

Apple好きにおすすめ

もっとMacでPCゲームを楽しみたいアナタへ贈る『Steam』を…

楽しく生活したい人におすすめ

MacはWindowsに比べて、ゲームに向いていない!?その通り…

Apple好きにおすすめ

【2020年】あなたは何色派?人気なiPadの本体カラーの店舗毎…

楽しく生活したい人におすすめ

YouTubeにアップした動画、URLは変えないで動画だけ差し替…


▲最上部へ