CSS

文字、テキストを小さく囲むためのCSSテクニック

2018年11月22日

? 文字を小さく囲いたい

CSSを知ると、WordPressのページをいろいろと修飾したくなります。ワードやPages、あるいテキストエディタにはできない技ですね。

よく使うのは見出し、リスト、ボックス、引用部、ボタン、リボンなどです。この他にも、ときどきホームページで見かける修飾として、「文字を四角や角○で囲む」という技があります。例えば、CTRL+スペースなどの記号は、マニュアル系のページでときどき見かけます。これは、どのようにして作るのかと疑問に思っていました。

? CSSを使って文字囲いを実現

よく考えれば、これはCSSを使えば比較的簡単にできます。しかし、Gooleで検索しても、なかなかわかりませんでした。検索して出てくるのは、ほとんどが「ボックス」をつくるCSSです。これでは、上のような小さな文字囲いはできません。上のような気の利いた文字囲いというデザインは、次のようなCSSを書くだけで実現できます。

これに対応するHTMLは次のようになります。

HTMLは、AddQuickTagに登録しておくと便利です。

構造はごく単純で、テキストのボーダーを1にして、グレー色の実線に指定し、背景を淡いグレーにします。それから、文字色は黒、フォントサイズを80%と少し小さめにし、ボーダーの四隅にほんの少し丸みをつけ、余白を上下左右2px入れる、左右の文字の間に2pxのマージンを入れる、上下のずれを微修正する、これだけです。

背景をあわいクリーム色にして、シャドウをつけたのが、次の文字囲いです。これはどんな場面で使うか、まだわかりません。

淡いグリーンの囲みもおしゃれかもしれません。この囲みでは、文字色をグレーっぽくしました。

 

長期連載:デジタル・ツールで海外旅行をフルに楽しむ法(旅行前篇)

1

最近ではネットのおかげで、自分で企画を立て、航空券やホテルの予約もオンラインのサイトで行い、お安く海外旅行を楽しむことができるようになりました。現地での小旅行やイベント参加も、かつてはパック旅行のオプションを選択するしかなかったのですが、今ではやはりネットで提供されている現地の添乗員同行ツアーを自分で申し込むことができますし、劇場のチケットなども、座席指定でオンライン予約することができます。ただ、こうした一連の準備作業は必ずしも簡単ではありませんし、きちんとしたドキュメントで整理、保存するのは容易ではありません。このブログでは、この「海外旅行プランをしっかりと管理するための情報収集、整理法」を、できるだけ詳しく、かつ分かりやすく紹介したいと思います。

2

OneNoteのいいところは、さまざまなテーマでノートブックをつくり、「セクション」「ページ」「サブページ」という階層構造で情報を収集、整理、保存できることにあります。実際に「2020年パリ旅行」のOneNoteノートブックを作成していきましょう。最初に、このノートブックで収録すべき大項目を「セクションの追加」で作成しておきます。

3

Evernoteの魅力は、Webページの内容を、もとのサイトそのままにコピーできることにあります。OneNoteのように、ページ全体をクリップすると画像ファイルに変換してしまうという問題もありません。「パリ観光」という大きなタグの下に観光に関連したタグを並べ、それぞれと関連の深い、参考になるWebページを精選して取り込めば、書籍よりも新鮮で実用性の高い「Evernote版パリ観光ガイドブック」が出来上がるでしょう。

4

WebページをEvernoteに取り込んで、自分だけの海外旅行ガイドブックを作るのは楽しいですが、クリッピングの作業が面倒な上、もとのWebページが更新されても、それを反映させることができません。そこでWebページを効率的にに収集し、容易にアクセスするためのツールとして、ブラウザのブックマークを編集して使う方法がおすすめです。

5

Googleマップは、海外旅行をする人がいちばんお世話になるスマホアプリの一つですから、その使い方を知らない人はあまりいないと思います。けれども、Googleマップの重要な機能の一つである「マイマップ」を海外旅行のツールとしてフルに使いこなしている人は少ないのではないでしょうか?ここでは、「マイマップ」が海外旅行プランの作成においていかに役立つツールかを、わかりやすく、かつ詳しくご紹介したいと思います。実際にパリを事例として作成した旅行用マイマップもお見せします。

6

ノートブックアプリOneNoteに、自分にとって必要なパリの情報だけを編集して「パリ・ガイドブック」というノートブックあるいはセクションを作って持っていけば、旅行中に大いに役立つのではないでしょうか。Kindle、honto、Koboなどの電子書籍は、好きな箇所だけをコピーして、OneNoteの好きな部分に「貼り付ける」ことが簡単にできますから、自分流「パリ観光ガイドブック」をOneNote上に簡単に作ることができます。

7

本記事では、YouTubeの「再生リスト」機能を最大限に活用して、海外旅行の観光に関する好きな動画を、テーマ別に「再生リスト」として登録し、これをオフラインのOneNote、マイマップ、ブラウザのブックマークに階層メニュー方式で取り込む方法を、YouTube登録の段階から順を追って、わかりやすく紹介したいと思います。完成までしばらくお待ち下さい。

8

海外旅行に役立つ最新ニュースや最新の現地情報は、登録したTwitterのタイムライン上に流れていますが、IFTTTというアプリを使えば、「お気に入り」(いいね!)に登録したTweetだけを、OneNoteのページに自動的に保存することができます。

9

かつては、海外旅行のガイドというと、紙のガイドブックと地図を片手に歩きまわったものですが、今や多くの観光客はスマホやタブレットを片手に、アプリに入れた地図や路線図やグルメ・アプリ、美術館ガイドのアプリなどを見ながら、自由自在に観光を楽しむことができるようになっています。この記事では、「パリ観光」を例として、観光旅行を目一杯楽しむために役立つiPhoneやAndroidのスマホ・アプリと、その使い方を紹介したいと思います。

-CSS

Copyright© dシニアライフ / Blog , 2020 All Rights Reserved Powered by AFFINGER5.