Special
» 2020年03月24日 17時00分 公開

コンピュータって意外とおバカ? 女子大生、「HTML」の仕組みを「桃太郎」で理解する

文系女子大生的にはそう感じるようです。

[中山彩歌,PR/ねとらぼ]
PR
女子大生、はじめてのプログラミングを学ぶ

前回までのおさらい

 「ホームページ」というものをほとんど見たことがなかった女子大生。前回はホームページを作る上での基本的な考え方や「HTML」「CSS」という言語があることを学びました。

 今回はいよいよ実際にその言語を使ってのホームページ作りに着手します。果たして文系女子大生はプログラミング言語の「わけのわからない英語の羅列」に耐えられるのか!?

中山彩歌

女子大生、はじめてのプログラミングを学ぶ

IT企業で働く父を持つ大学1年生。ねとらぼ連載「女子高生、『はじめてのパソコン』を買う」でITリテラシーがあんまり高くないことが判明し、おとぼけ回答を連発。その実績(?)を買われて今回の生徒役に抜擢された。もちろんプログラミングの知識はゼロ。


舘勇紀

女子大生、はじめてのプログラミングを学ぶ

大手電機メーカーでキャリアを培い、現在はフリーランスのエンジニアとして活躍。Webアプリの開発などを行うほか、プログラミングのオンラインレッスン「CodeCamp」の講師も務める。二児の父で初心者にもていねいに伝えるレッスンに定評がある。


Webサーバーを「昔のパソコン」と理解していた女子大生


女子大生、はじめてのプログラミングを学ぶ

今回からはいよいよ「HTML」「CSS」というホームページを作るのに必要な言語に、実際に触れてもらいます!


女子大生、はじめてのプログラミングを学ぶ

できる気がしない……。


女子大生、はじめてのプログラミングを学ぶ

そんなに緊張しなくても大丈夫ですよ(笑)。まずその前にWebの仕組みから理解してもらおうと思います。


女子大生、はじめてのプログラミングを学ぶ

よかったー!お願いします!


女子大生、はじめてのプログラミングを学ぶ なんか書き始めたぞ?


女子大生、はじめてのプログラミングを学ぶ

これが、いわゆるWebサーバーです。


女子大生、はじめてのプログラミングを学ぶ

さーばぁー?(ってなんだっけ……?)そんな形しているんですか?


女子大生、はじめてのプログラミングを学ぶ

これ、分かりやすく説明すると、大きなデスクトップパソコンです。


女子大生、はじめてのプログラミングを学ぶ

えっと、昔のパソコンですか? なんか足元に置いてあって、電源をつけるやつ。


女子大生、はじめてのプログラミングを学ぶ

そうです! 「デスクトップ=昔のパソコン」っていうイメージなんですね。ジェネレーションギャップを感じるなぁ(笑)。


女子大生、はじめてのプログラミングを学ぶ

「サーバー」ってデカいパソコンのことだったのかぁ。


女子大生、はじめてのプログラミングを学ぶ

ただ、形が違うだけで、中に入っているものは、今のノートパソコンとなんら変わりはありません。


女子大生、はじめてのプログラミングを学ぶ

でも、今のノートパソコンの方が処理は速いですよね、そのデカイやつより。


女子大生、はじめてのプログラミングを学ぶ

最近のノートパソコン性能いいからなあ。でも一般的には同じ値段だったらデスクトップ……デカいパソコンのほうが性能はいいですよ。


女子大生、はじめてのプログラミングを学ぶ

へーー、すげえなデカいやつ!


リンクを押した瞬間に何が起きているか

女子大生、はじめてのプログラミングを学ぶ IT初心者でもわかる(?)インターネットの仕組み


女子大生、はじめてのプログラミングを学ぶ

で、このWebサーバーっていうものがあちこちにあってそこにHTMLがしまってあるんです。それぞれのホームページはアドレス、インターネット上の住所が決まってます。例えばYahoo!を見たいと思ったらまず「https://」と打ち込んで……


女子大生、はじめてのプログラミングを学ぶ

ん? アドレスなんて打ち込まないで、普通に「Yahoo!」って検索してますよ?


女子大生、はじめてのプログラミングを学ぶ

あ、今はそうですよね。昔はインターネットの雑誌とかを買ってきて見たいホームページのURLを手で打ち込んでたりしたんですよ。


女子大生、はじめてのプログラミングを学ぶ

めんどくさいな〜。


女子大生、はじめてのプログラミングを学ぶ

面倒でしたが、昔はそれが普通だったので(汗)。まあそれで、Yahoo!と検索したら、検索結果の一番上には「Yahoo!Japan」のリンクが出てくるはず。で、リンクを押したら、Yahoo!のページに飛んでいきますよね。


女子大生、はじめてのプログラミングを学ぶ

そうですね。


女子大生、はじめてのプログラミングを学ぶ

クリックした瞬間、何が起こっているかわかりますか?


女子大生、はじめてのプログラミングを学ぶ んん?


女子大生、はじめてのプログラミングを学ぶ

そりゃ、リンク先に飛ぶんじゃないんですか?


女子大生、はじめてのプログラミングを学ぶ

そうですね。これはブラウザからWebサーバーに対して、「HTMLをください」とリクエストを送っているんです。


女子大生、はじめてのプログラミングを学ぶ

なるほど、わかりません!


女子大生、はじめてのプログラミングを学ぶ

おっと(笑)。つまりですね、Webサーバーに「Yahoo!」っていう1冊の本が置いてあるとします。で、彩歌さんの使っているSafariブラウザが「その本を読みたいです」って注文をするとWebサーバーさんが「どうぞー」って届けてくれて読めるようになるわけです。


女子大生、はじめてのプログラミングを学ぶ

クリックした瞬間の、ほんの数秒でそんなことが起きていたんですか!


女子大生、はじめてのプログラミングを学ぶ

電気的信号が数秒で通るので、Safariに限らずブラウザがホームページを読むのは全部この仕組みで行われていますよ。


女子大生、はじめてのプログラミングを学ぶ

1秒あるかないか程度なのにすごいなー。


女子大生、はじめてのプログラミングを学ぶ

今回は彩歌さんのために、お試しで使えるWebサーバーを用意してあります。そこに「彩歌さんのホームページ」という本を置くことになるのでその本、つまりHTMLのプログラムを書いてもらおうと思います。


女子大生、はじめてのプログラミングを学ぶ

ついに来た……。文系女子の私でもできますか?


女子大生、はじめてのプログラミングを学ぶ

複雑なプログラムは書かないので、肩の力抜いて大丈夫ですよ(笑)。


HTMLは「桃太郎」で例えると理解できる


女子大生、はじめてのプログラミングを学ぶ

ホームページを作るために使うのが「HTML」と「CSS」という言語です。


女子大生、はじめてのプログラミングを学ぶ

あのー……HTMLとCSSって何が違うんですか?


女子大生、はじめてのプログラミングを学ぶ

そこ、気になりますよね!


女子大生、はじめてのプログラミングを学ぶ アルファベットだらけだぞ……


女子大生、はじめてのプログラミングを学ぶ

前回も少し説明しましたが、HTMLは、「Hyper Text Markup Language(ハイパーテキストマークアップランゲージ)」の略で、テキストは文章ですよね。それに、ハイパーが付いているので、響き的にすごそうなイメージじゃないですか。


女子大生、はじめてのプログラミングを学ぶ

確かに「ハイパー」ってすごそう。


女子大生、はじめてのプログラミングを学ぶ

で、マークアップっていうのは、「印をつける」というイメージです。


女子大生、はじめてのプログラミングを学ぶ

つまり、「なんかよく分からないハイパーですごい文章に印をつける言語」って理解で大丈夫ですか?


女子大生、はじめてのプログラミングを学ぶ

それで大丈夫(笑)。言語とは言うものの、「マークアップ言語」なので、厳密にはプログラミング言語ではないんです。


女子大生、はじめてのプログラミングを学ぶ

CSSもプログラミング言語ではないんでしたっけ?


女子大生、はじめてのプログラミングを学ぶ

そうですね。ただ、そのぶん誰でもとっつきやすくて、学びやすい言語なので、最初に学ぶのであればこの二つを勧めています。


女子大生、はじめてのプログラミングを学ぶ

ハードル低いんですね。なら、私にもできそう……?


女子大生、はじめてのプログラミングを学ぶ

HTMLの仕組みを言葉で表すなら「文章構造」です。


女子大生、はじめてのプログラミングを学ぶ また難しいこと言い出したな……


女子大生、はじめてのプログラミングを学ぶ

文章構造?


女子大生、はじめてのプログラミングを学ぶ

では、ここで彩歌さんに質問! 「桃太郎」のストーリーを軽く紹介してもらえますか?


女子大生、はじめてのプログラミングを学ぶ

桃太郎ですか? 唐突だなぁ……。昔々、あるところにおじいさんとおばあさんがいました。おじいさんは山に芝刈りに行って、おばあさんは川へ洗濯に……


女子大生、はじめてのプログラミングを学ぶ シュールな展開になってきた


女子大生、はじめてのプログラミングを学ぶ

これは、文章構造が全くないテキストなんです。文字だけが並んでいる。


女子大生、はじめてのプログラミングを学ぶ

んん? 確かに文字ですね?


女子大生、はじめてのプログラミングを学ぶ

人間は「桃太郎」と「昔々〜」って文章が書いてあったら「桃太郎」がタイトルで「昔々〜」が本文だってすぐわかりますよね?


女子大生、はじめてのプログラミングを学ぶ

わかります。


女子大生、はじめてのプログラミングを学ぶ

じゃあコンピュータはそれがわかると思いますか?


女子大生、はじめてのプログラミングを学ぶ

えっ、わからないんですか!?


女子大生、はじめてのプログラミングを学ぶ

そうなんです! だから「ここがタイトルだよ」「ここが本文だよ」っていうのを教えてあげないといけない。それが文章構造をつける、つまりHTMLを書くということなんです。


女子大生、はじめてのプログラミングを学ぶ

なるほど〜。文章構造ってそういう意味なんだ。


女子大生、はじめてのプログラミングを学ぶ

人間は賢いので、目から入ってきた情報を瞬時に分析するのが得意な生き物なんですよ。でもコンピュータはそうじゃない。文章なのかタイトルなのかを分ける作業がプログラミングです。


女子大生、はじめてのプログラミングを学ぶ

すごくしっくりきました!


女子大生、はじめてのプログラミングを学ぶ 桃太郎をHTMLで書くとこうなる


女子大生、はじめてのプログラミングを学ぶ

例えば、タイトルを出したいなら、冒頭に<title>と打ち込んで、文章を書きたいなら、<p>って打ちます。


女子大生、はじめてのプログラミングを学ぶ

テキストのT(ティー)ではなくてP(ピー)なんですか?


女子大生、はじめてのプログラミングを学ぶ

パラグラフの「P」です。これをブラウザが読み込むと、ようやくコンピュータはタイトルと文章の違いを理解できます。


女子大生、はじめてのプログラミングを学ぶ

そこまでしないと、エンジニアさんの意図が反映されないって大変だなー。ちなみに、その<>で囲まれたやつは何なんですか?


女子大生、はじめてのプログラミングを学ぶ

これは、「タグ」って言われているものです。


女子大生、はじめてのプログラミングを学ぶ

SNSのハッシュタグとは、また別物ですか?


女子大生、はじめてのプログラミングを学ぶ

イメージは同じですよ。ただ、ハッシュタグは「#」をつければ自由に作れると思うんですけど、HTMLのタグは種類が決まっています。


女子大生、はじめてのプログラミングを学ぶ

種類?


女子大生、はじめてのプログラミングを学ぶ

国際規格上、種類が決まっていて、107種類あります。


女子大生、はじめてのプログラミングを学ぶ

結構ありますね


女子大生、はじめてのプログラミングを学ぶ

用途ごとにタグが用意されているのでね。例えば、画像を出したい時は<img>というタグを使います。


女子大生、はじめてのプログラミングを学ぶ

え! コンピュータって文字と画像の区別もできないんですか?


女子大生、はじめてのプログラミングを学ぶ

できません。そこまで賢くないんです。


女子大生、はじめてのプログラミングを学ぶ

コンピュータって意外とおバカなんだなぁ。


女子大生、はじめてのプログラミングを学ぶ こんな桃太郎、逆にわかりづれー!

CSSはWebデザイナーの役割


女子大生、はじめてのプログラミングを学ぶ

HTMLはなんとなくわかりましたけどCSSっていうのはなんですか?


女子大生、はじめてのプログラミングを学ぶ

CSSは「Cascading Style Sheets(カスケーディング スタイル シート)」の略で、HTMLが文章構造だったのに対して、CSSは「見た目」をコントロールするための言語です。


女子大生、はじめてのプログラミングを学ぶ

ほう、見た目ですか。どこに何を配置する、とかですか?


女子大生、はじめてのプログラミングを学ぶ

そうですね。あとは文字の色とか大きさとかを決めたり。


女子大生、はじめてのプログラミングを学ぶ

HTMLで文字の大きさとか色を変えることってできないんですか?


女子大生、はじめてのプログラミングを学ぶ

できなくはないんですけどプログラムがすごく汚くなって見づらくなっちゃうんですよ。今はHTMLが文章構造、デザインはCSSで作るのが主流です。


女子大生、はじめてのプログラミングを学ぶ

じゃあ、ひとつのホームページを作り上げるのに、いくつか言語を使うってことなんですか?


女子大生、はじめてのプログラミングを学ぶ

そうです。言語がひとつだけってことは滅多になくて、だいたいどんなページを作る上でも、HTMLとCSSは必須です。


女子大生、はじめてのプログラミングを学ぶ

なんで一緒にしないんですか? そっちの方がプログラム書く方も楽ちんなのに。


女子大生、はじめてのプログラミングを学ぶ

そう思いますよね? でもプログラマーからすると、文章構造のタグと見た目のタグが混在すると、人間の頭の中でイメージしづらくなるんですよ。


女子大生、はじめてのプログラミングを学ぶ

明確に切り離しちゃう方が書く側としては、管理しやすいってことですか?


女子大生、はじめてのプログラミングを学ぶ

そのとおり。「分けて書くほうが作りやすい」んです。どう作りやすいかと言うと、デザイナーさんと分業したい時に、プログラマーは構造の方は得意なんですけど、見た目の部分はどうしても専門分野が違うので、デザイナーに任せることが多いのです。


女子大生、はじめてのプログラミングを学ぶ

もしかして、WebデザイナーさんってCSSができないとダメなんですか?


女子大生、はじめてのプログラミングを学ぶ

CSSについて詳しくないデザイナーさんもいるにはいるので、そこはプログラマーが説明して助けるパターンが多いです。ただ、大半のWebデザイナーさんはCSSもできますね。だから、CSSは別のファイルで作ったほうが都合がいいんですよ。


女子大生、はじめてのプログラミングを学ぶ

そっか……WebデザイナーになるならCSSも身に着けないとな〜。


IEとEdgeを知らない女子大生


女子大生、はじめてのプログラミングを学ぶ

ちなみに、昔のブラウザはCSSに対応していないものもあったので、ブラウザによって表示がバラバラになることもあったんですよ。今は、見た目に関して統一はされてきたんですけどね。


女子大生、はじめてのプログラミングを学ぶ

表示がそんなに違うんですか?


女子大生、はじめてのプログラミングを学ぶ

わかりやすく言うと、Chromeでは問題ないけど、Safariでは正しく表示されないみたいな。だからプログラマーはどのブラウザで見ても同じに表示されるように頑張っているんです。


女子大生、はじめてのプログラミングを学ぶ

へー。その不具合って今もあるんですか?


女子大生、はじめてのプログラミングを学ぶ

あります。ブラウザがひとつだけならここまで複雑にはならないんですけど、世の中には多種多様なブラウザが存在するので。


女子大生、はじめてのプログラミングを学ぶ

じゃあ、ブラウザの中で一番高機能なものはどれですか?


女子大生、はじめてのプログラミングを学ぶ

高機能って言うか、最も忠実に動くのは、Chromeですね。


女子大生、はじめてのプログラミングを学ぶ

Safariじゃないのかー!


女子大生、はじめてのプログラミングを学ぶ

まあ最近のブラウザはよくできてて大きな差はないので好みで使い分けて大丈夫ですよ。ちなみにプログラマーあるあるなんですが、ブラウザでIEを使っている人もまだまだ多いのが結構悩みの種で……。


女子大生、はじめてのプログラミングを学ぶ

ん? IEってなんですか? プログラミング言語?


女子大生、はじめてのプログラミングを学ぶ

そうか、最近の人はIEを知らないのか(笑)。以前Windowsの標準ブラウザだったものです。今は「Edge」というものに変わったんですが、Windowsパソコンで「e」ってアイコン見たことないですか?


女子大生、はじめてのプログラミングを学ぶ

あ、あれのことか! 使う機会がほぼなかったので知らなかった。


女子大生、はじめてのプログラミングを学ぶ

IEは既に開発が終了しているブラウザなんですが、政府とか教育機関みたいな保守的な機関では今でもよく使われているんです。そういう場所からの注文だと「IEにも対応させてください」という依頼もあって……個人的には、IEは無くしても良いくらい厄介なブラウザなんです(笑)。


女子大生、はじめてのプログラミングを学ぶ

ブラウザにそんな違いがあるなんて知らなかったなあ。


女子大生、はじめてのプログラミングを学ぶ

話がそれましたね。で、ざっくり「HTML」「CSS」の仕組みとブラウザの種類については理解できたと思うので、ここからは実際にあやかさんにHTMLを体験してもらおうと思います!


女子大生、はじめてのプログラミングを学ぶ

お、いよいよだ。緊張するな……。


ひとつのホームページ作成に4つの言語を使うことも

女子大生、はじめてのプログラミングを学ぶ 舘さんが作ったサイト(C)CodeCamp


女子大生、はじめてのプログラミングを学ぶ

これは僕がレッスン用に作ったホームページなんですが、ここでもHTMLとCSSを使っています。


女子大生、はじめてのプログラミングを学ぶ

え、すごーい! めっちゃきれいですね!


女子大生、はじめてのプログラミングを学ぶ 照れる舘さん


女子大生、はじめてのプログラミングを学ぶ

トップページの画像が自動でスライドしてますけど、この動く仕組みもCSSで対応してるんですか?


女子大生、はじめてのプログラミングを学ぶ

これはまた違う言語を使っているんです。これはJavaScriptです。動きをつけるのはHTMLとCSSではできません。


女子大生、はじめてのプログラミングを学ぶ

ということは、このホームページは3つの言語で作られたページなんですね。カッケー!


女子大生、はじめてのプログラミングを学ぶ

一般的なWebサービスでも4つ、5つくらいの言語を使っていることは多いですよ。


女子大生、はじめてのプログラミングを学ぶ

多すぎる……。それは複数の人で分業して作業してるんですよね?


女子大生、はじめてのプログラミングを学ぶ

そのパターンもありますけど、できる人なら全部ひとりで終わらせちゃいます。


女子大生、はじめてのプログラミングを学ぶ

ええっ!? 5言語使いこなせるとか尊敬するな〜。このホームページを作るのってどれくらい時間がかかるんですか? 丸1日とか?


女子大生、はじめてのプログラミングを学ぶ

えーっと、中身とページにもよりますけどこれぐらいなら早い人で小一時間で作り終えます。


女子大生、はじめてのプログラミングを学ぶ なんだと……?


女子大生、はじめてのプログラミングを学ぶ

は、早すぎないですか? これを「これぐらい」と言える舘さんが神すぎる……。


女子大生、はじめてのプログラミングを学ぶ

でも、このページは298行しかないので。それくらいのペースで書かないとやっていけないんですよ。


女子大生、はじめてのプログラミングを学ぶ

200行以上もプログラム書くんですか!


女子大生、はじめてのプログラミングを学ぶ

これは少ないほう。多いときはこの規模のページを20ページくらい作らなきゃいけない時もあるので……単純計算すると6000行くらいですかね。


女子大生、はじめてのプログラミングを学ぶ

うっ……やっぱり私には縁のない職業かな……。


プログラムを初めて書いてみる


女子大生、はじめてのプログラミングを学ぶ

1つずつ順番に覚えていけばそんなに難しくないですよ! まずは試しに自己紹介のページを作ってみましょう。


女子大生、はじめてのプログラミングを学ぶ

ドキドキ……。


女子大生、はじめてのプログラミングを学ぶ

じゃあまずはここに「自己紹介」って打ち込んでください。


女子大生、はじめてのプログラミングを学ぶ

おっ、それならできる! ほいっと。


女子大生、はじめてのプログラミングを学ぶ

そしたら次にこの「自己紹介」が「見出し」だということをコンピュータに認識させます。これを「<h2>」っていうタグで囲んでみてください。「h」が見出しと言う意味で数字が文字の大きさです。


女子大生、はじめてのプログラミングを学ぶ 初めてのプログラミングの瞬間


女子大生、はじめてのプログラミングを学ぶ

文字サイズのレベル的な感じですね! 何個まであるんですか?


女子大生、はじめてのプログラミングを学ぶ

1〜6までありますけど、5、6はなかなか見かけないです、かなり小さいので。これでそれぞれのブラウザが基本設定の「見出し」のフォントで表示してくれますが、それが気に入らなければCSSで自分の納得いくような大きさを作ってもよいんです。


女子大生、はじめてのプログラミングを学ぶ

ほうほう。今、表示されている「自己紹介」って文字を真ん中に持ってくることはできないんですか?


女子大生、はじめてのプログラミングを学ぶ

できますよ。CSSのこの欄に「center」って打ち込んでみて。


女子大生、はじめてのプログラミングを学ぶ センターね。c、e、n、t、e、rっと


女子大生、はじめてのプログラミングを学ぶ

で、ここのセーブボタンを押す。


女子大生、はじめてのプログラミングを学ぶ できた!


女子大生、はじめてのプログラミングを学ぶ

ポチッ! ……あ! すごい文字が真ん中になった! 魔法みたい〜。


女子大生、はじめてのプログラミングを学ぶ

お、なんかちょっとうれしい(笑)。普段のレッスンだとこのくらいじゃ「すごい」と感動されることは少ないので。


女子大生、はじめてのプログラミングを学ぶ

えー。「なんか不思議な英文を打ち込んだら勝手に位置が変わってる!」って私なら感動しますけどね!


女子大生、はじめてのプログラミングを学ぶ

だから今ちょっと新鮮でした(笑)。


女子大生、はじめてのプログラミングを学ぶ

私もうれしいです! 多分、文系の女子大生なら同じような反応すると思いますよ!


女子大生、はじめてのプログラミングを学ぶ プログラミング教室の楽しさがちょっとわかったかも!


女子大生、はじめてのプログラミングを学ぶ

では、次にホームページに載せる写真を反映させましょうか! 1枚目は私がやるので、残りは彩歌さんに打ち込んでもらいますね。


女子大生、はじめてのプログラミングを学ぶ

はいっ!


女子大生、はじめてのプログラミングを学ぶ

画像は「<img>」のタグを使います。私がやったのと同じように画像のリンクをコピペして、セーブボタンを押してみましょう。


女子大生、はじめてのプログラミングを学ぶ ポチッ


女子大生、はじめてのプログラミングを学ぶ

できたぁーーーーーー!! これだけでなんか達成感! コピペしただけなのに、なんだろう……楽しい気がします!


女子大生、はじめてのプログラミングを学ぶ

反応がよくていいなあ(笑)。ここから写真のサイズや表示位置もまた細かく変えられます。それだけでページの雰囲気もガラっと変わるので、そこはデザイナーさんとの話し合いで決めたりするんです。


女子大生、はじめてのプログラミングを学ぶ

なるほどー、奥が深いなホームページ。


女子大生、はじめてのプログラミングを学ぶ

おっと、基礎の基礎をやっただけで今日はもう時間になっちゃった。仕上げは次回にしましょうか。次はもっとプログラムを書いてもらいますよ。


女子大生、はじめてのプログラミングを学ぶ

コピペなら任せてください!!


今回の「女子大生から一言!」

女子大生、はじめてのプログラミングを学ぶ

 機械音痴、ITリテラシー皆無な私もついに、プログラムを書くまでに至りました! 結論から言うと、「コピペするだけなの? 簡単じゃん」としかこの時は思っていませんでしたが、よく考えればほとんどの作業をしてくれたのは舘さん。エンジニアの方って本当にすごいなと尊敬しました。

 次回は最後のプログラムを書く仕上げをするらしいから、よくわからないけど、頑張るぞー!(やる気はみなぎっています)


次回予告

舘さんも驚く女子大生の初心者っぷりに難航したホームページ作りでしたが次回でいよいよ完結編。さらに最後は収録場所を舘さんの仕事場(というかご自宅)に移してフリーランスの仕事術についても伺います。超初心者から始めた女子大生は果たしてプログラミングのなんたるかを理解できたのか!?

Copyright © ITmedia, Inc. All Rights Reserved.

先週の総合アクセスTOP10

  1. 「彼氏に撮ってもらった」→窓ガラスに写った真実は…? アクロバティックな詐欺写真に「笑った」「器用な彼氏」
  2. 「俺も昔はワルだった」「へぇ〜 今日は当時の被害者を呼んでます」 女子高生がかわいさ全開で鉄槌をくだす漫画「正義のミカたん」
  3. 叶恭子、美女に擬態した『鬼滅の刃』鬼舞辻無惨コス マーベラスな着物姿に「すごい…妖艶すぎる」「完璧」
  4. 保護した子ネコに「寂しくないように」とあげたヌイグルミ お留守番後に見せた子ネコの姿に涙が出る
  5. 「助かりました」「早速実践します」 小児科医が教える“はがれにくい絆創膏の貼り方”が使えると話題に
  6. ステキな週末のパパ……! 荒ぶる子猫たちに囲まれたパパ猫の“無”の表情に「わかる」「私だ」と共感の声
  7. ClariS、デビュー10周年でメディア初の顔出し ファンからは「やっぱり美人さんやん!」「かわいい〜〜!!!!」
  8. 鮭ってこんなに種類あったのか! サーモン会社が投稿した「鮭の比較」画像が「買い物に便利」と話題
  9. 「貴方ならもっといける」「絶対に神絵師になれる」 応援コメント糧に10カ月で神絵師へと成長した人が話題に
  10. 中村江里子、フォロワー10万超のインスタが消滅 「どうにもならない気持ちでいっぱい」「一体、何の目的で?」

提供:Sky株式会社
アイティメディア営業企画/制作:ねとらぼ編集部/掲載内容有効期限:2020年3月30日