【Ctrl＋U】ウェブページの舞台裏をのぞける！ソースコードを表示・下線を引く・メールを未読にする

こんにちは！どこでもパソコン教室四日市です。

今回の授業は、ショートカットキー Ctrl＋Uのご紹介です！
アプリごとに、次の3つの機能があります。

• ウェブブラウザー
『ウェブページのソースコードを表示する』
• Word・Excel・PowerPoint・Outlook
『選択した文字列に下線を引く』
• Outlook
『メールを未読にする』

Ctrl＋U のUは、Word・Excel・PowerPoint・Outlookの『選択した文字列に下線を引く』機能では“Underline”を、Outlookの『メールを未読にする』機能では“Unread”を意味します。

WordなどMicrosoft Officeの［ホーム］タブ ➡［フォント］グループに、「B」「I」「U」と並んでいますけれど、どれもCtrlキーと一緒に使うことでショートカットキーとなるのですよね♪

気づかれましたね♪

Ctrl＋B のBは、太字の“Bold”を、 Ctrl＋I のIは、斜体の“Italic”を意味します。

ウェブブラウザーの「ソースコード」とは何ですか？

ズバリ！ウェブページの舞台裏です💃

「日本語」をはじめ、世界にはたくさんの言語があります。

「英語」「イタリア語」「中国語」など、たくさんありますね。

実は、💻パソコンの世界にもたくさんの言語があります。

ウェブページも、基本的に「HTML」という言語が使われています。

表示や動作についての指示が書かれていて、これを「ソースコード」と呼びます。

〝百聞は一見に如かず〟ごくごく基本のコードを書いてみませんか？

本当ですか!?

初心者の私にも書けるならやってみたいです♪

それでは今回の授業は、ショートカットキー Ctrl＋U の3つの機能＆関連した機能の使い方を解説しますので、ぜひ最後までご受講ください！

• ウェブブラウザーで表示できるソースコードを実際に書いてみる
• Word・Excel・PowerPoint・Outlookで、ショートカットキーで下線を引く
• Outlookで既読メールを未読にする

ショートカットキー Ctrl＋B と Ctrl＋I の授業です。

【Ctrl＋B】【Ctrl＋I】〝太字〟と〝斜体〟で白黒のままでも存在感UP！

ショートカットキー［Ctrl＋B］「太字」と、［Ctrl＋I］「斜体」のご紹介です！太字と斜体は、文字色やフォントサイズが変えられないときに、文字の存在感を強調したり弱めたりできます。書式を元に戻す「すべての書式をクリア」についても解説！

［Ctrl］＋［U］：コントロール・ユー
ウェブブラウザー：ウェブページの「ソースコードを表示」する
1. ソースコードとは
2. 簡単なソースコードを書いてみましょう！
選択した文字列に「下線を引く」
Outlook / アウトルック：選択した文字列に「下線を引く」/「メールを未読にする」
1. 選択した文字列に「下線を引く」
2. 「メールを未読にする」
まとめ

［Ctrl］＋［U］：コントロール・ユー

Ctrlキーを押しながら、Uキーを押します。

Ctrl＋U は、ウェブブラウザー・Word・Excel・PowerPoint・Outlookで使用できます。

👇アプリごとに機能を解説します！

ウェブブラウザー：ウェブページの「ソースコードを表示」する

ウェブブラウザーの閲覧画面で Ctrl＋Uを押すと、閲覧中のウェブページのソースコードを表示します。

😅アルファベットや記号がずら～っと並んでいて、初めて見るとちょっと焦ると思います、、。

＜🖱マウス操作で表示する場合＞

ページ内を🖱右クリック
Google Chrome：「ページのソースを表示」を🖱クリック
Microsoft Edge：「ページのソース表示」を🖱クリック

ソースコードとは

Ctrl＋Uを押して表示されますアルファベットや記号などがソースコードです。

まさに、ウェブページの舞台裏！
基本的に「HTML」という〝マークアップ言語〟というものを使用します。

ソースコードには、表示の約束事や表示方法、別ファイルを読み込むための情報など、様々なことが記載されています。

🤡お化粧に例えますと、すっぴんの状態からメイクアップして、使用している化粧品のメーカーや原料までが分かる……というくらい情報が詰まっています！

簡単なソースコードを書いてみましょう！

ソースコードを書くことを「コーディング」といいます。

コーディングができるようになるには、学習が必要です。
けれども、ごくごく基本でしたら初心者の方でもできますよ！

それに、特別なアプリを用意する必要もありません。
下記に手順を解説しますので、一緒に体験してみましょう♪

Windowsに標準で搭載されています「メモ帳」を使います。
　
画面下「タスクバー」にあります検索窓に、〝メモ帳〟と入力してEnterキーを押すと簡単に起動できます。

今回は『今日の晩御飯！』と題して、👇次の内容でウェブページを作成したいと思います。

記載箇所	記載文字
ページタイトル	今日の晩御飯！
見出し1	美味しいカレーの作り方
見出し2	材料
本文	次の材料を用意しましょう。
リスト	・お肉・じゃがいも・にんじん・たまねぎ

完成すると下図のようになります。
とてもシンプルですけれども、初めて自分で作成したときはちょっとした〝達成感〟がありますよ😄
　
それでは、コーディングしていきます。
メモ帳に下記の通り入力しましょう。
　
名前を付けて保存します。
　
ちなみにファンクションキー F12を押すと、すぐに「名前を付けて保存」ダイアログボックスを表示して素早く保存できます。
【ファンクションキー『後編』】［F11］［F12］の機能！［Fn］キーとは？
　

1. 保存場所は、今回は分かりやすいようにデスクトップにしましょう。
2. ファイル名は、アルファベットでつけます。
　今回は、「delicious-curry.html」としましょう。

ファイル名の末尾を「.txt」➡「.html」とすることで、ウェブページ用のファイルとなります。

3.［文字コード］は、「UTF-8」にします。
4.［保存］を🖱クリックします。
デスクトップに、ご自身の💻パソコンで普段使用する設定になっているウェブブラウザーのアイコンでファイルが作成されていますので、🖱ダブルクリックしましょう！
　
　
ウェブブラウザーが起動して、下図のように表示されたら完成です！

今回作成しました「HTMLファイル」は、これだけではインターネットに公開されません。

他にも必要な情報などをコーディングしてから、ウェブページなどを管理する「ウェブサーバー」へアップロード*することで公開されます。
*アップロードとは…インターネット上の場所、今回ですと「ウェブサーバー」へファイルを送信することです。

ウェブページ作成の基礎部分の学習が無料でできます、
有名なサイトが2つありますのでご紹介します。

Progate(プロゲート) | Learn to code, learn to be creative.

Progateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。

ドットインストール

3分動画で初心者や独学の方でも無理なく勉強が続くプログラミング学習サービスです。Web制作の基礎から子供向けのゲーム制作レッスン、さらにシステム開発に使われるPHP、Ruby、Pythonなどの入門レッスンまで幅広く言語を体験できます。

選択した文字列に「下線を引く」

Word / ワード

Wordで文字選択して Ctrl＋Uを押すと、選択した文字列に下線を引きます。

文字を入力します。
🖱ドラッグ*して下線を引きたい文字列を選択します。
*ドラッグとは…マウスの左ボタンを🖱クリックしたまま動かすことです。
　
✔「|」カーソルから Shift＋← →矢印キーを押して文字列を選択することもできます。
Ctrl＋Uを押すと、下線を引きます。
　
Ctrl＋Uをもう一度押すと、下線を解除します。

＜下線を🖱クリック操作で引く方法＞
文字選択して［ホーム］タブ ➡［フォント］グループ ➡［下線］を🖱クリックします。
右側の［∨］を🖱クリックすると、下線のスタイルや色の変更もできます。
　

Excel / エクセル

Excelで文字選択して Ctrl＋Uを押すと、選択した文字列に下線を引きます。

Wordとは少し違った操作が必要となります。

セルを選択して Ctrl＋Uを押すと、セル内のすべての文字列に下線を引きます。
部分的に下線を引きたいときは、まずセルを🖱ダブルクリック or F2を押して、セル内に「|」カーソルを置きます。　
次に🖱ドラッグ、または Shift＋← →矢印キーを押して文字列を選択してから Ctrl＋Uを押します。
もう一度Ctrl＋Uを押すと、下線を解除します。

＜下線を🖱クリック操作でする方法＞
● 文字選択して［ホーム］タブ ➡［フォント］グループ ➡［下線］を🖱クリック
　下線と二重下線の選択ができます。
● 「セルの書式設定」ダイアログボックスを表示すると、［フォント］タブ内で下線のスタイルや色の変更もできます。
　