【Ctrl＋U】ウェブページの正体見たり！ソースコードを表示・下線を引く・メールを未読にする

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

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

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

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

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

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

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

ズバリ！ウェブページの正体です🕵

私たち人間のリアルな世界には、「日本語」をはじめたくさんの言語があります。

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

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

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

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

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

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

ショートカットキー 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などの入門レッスンまで幅広く言語を体験できます。

【PR】＼こちらはプロから安心のサポートを受けながら基礎学習～お仕事挑戦までできます／

現役Webデザイナーが案件の挑戦まで徹底サポート

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

Word

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

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

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

Excel

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

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

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

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

PowerPoint

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

プレースホルダー*内のすべての文字列、または部分的に下線を引けます。
＊プレースホルダーとは…文字列や図、グラフなどを挿入する領域です。
　

文字を入力します。
　
プレースホルダーを選択して、 Ctrl＋Uを押します。
プレースホルダー内のすべての文字列に下線を引きます。
　
文字列の部分的に下線を引きたいときは、🖱ドラッグまたは Shift＋← →矢印キーを押して文字列を選択してから Ctrl＋Uを押すと部分的に下線が引けます。
　
もう一度Ctrl＋Uを押すと、下線を解除できます。