No.17

前回の続き

省略してあるタグの
語源を載せていきます。

誰かが調べてくれていました。ありがとう。

略されたHTML5タグの語源

タグ名 基となった英単語

nav navigation links

p paragraph

hr horizontal rule

pre preformatted text

ol ordered list

ul unordered list

li list item

dl description list

dt description term

dd description description

figcaption figure caption

div division

a anchor

em emphasis

s strike

q quotation

dfn definition

abbr abbreviation

var variable

samp sample

kbd keyboard

sub subscript

sup superscript

ふぅ 今日はここまで✌️

No.16

覚えておきたいルールというものを
5つ知ったので
今日はその紹介をします。

1.後に書いたほうが優先される

以下のHTMLがある。

＜h3＞Hello＜/h3＞

このHTMLへ以下のスタイルを適用する。

h3 { color: red; }
h3 { color: blue; }

この場合優先されるのは後に書いたほうであり
h3要素は青文字になる。

HELLO

2.classよりidが優先される

以下のHTMLがある。

＜h3 class=“.warning” id=“criticalMessage"＞Hello＜/h3＞

このHTMLへ以下のスタイルを適用する。

criticalMessage { color: blue; }

.warning { color: red; }

この場合優先されるのはid指定のほうであり
h3要素は青文字になる。

HELLO

idとclassを一つのタグ内に書くときは要注意。

CSSセレクタを駆使し
そもそもidやclassに頼らないという選択肢もある。

3.詳細に指定したほうが優先される

以下のHTMLがある。
＜div＞
＜h3＞Hello＜/h3＞
＜/div＞

このHTMLへ以下のスタイルを適用する。

div > h3 { color: blue; }
h3 { color: red; }

この場合優先されるのは
セレクタを詳細に記述したほうであり
h3要素は青文字になる。

HELLO

4.HTMLタグに書くstyle属性はCSSのstyleより優先される

以下のHTMLがある。

＜h3 style=“color: blue;"＞Hello＜/h3＞

このHTMLへ以下のスタイルを適用する。

h3 { color: red; }

この場合優先されるのは
HTMLタグで指定したスタイル属性であり
h3要素は青文字になる。

HELLO

5.!import"は何よりも優先される

以下のHTMLがある。

＜h3 style=“color: blue;"＞Hello＜/h3＞

このHTMLへ以下のスタイルを適用する。

h3 { color: red !important; }

この場合優先されるのは
“!important"が指定されたスタイルであり
h3要素は赤文字になる。

HELLO

以上、５つ以外にも
授業でやっていた飽くなき挑戦(?) により
どっちが本当に強い(?)のかを
色々試せておもしろかったです。

またこういうの見つけたら
ちゃんと覚えておこうと思います。

No.15

おひさしぶりです

二回目授業の後から
課題待ちという状況で
のほほんと過ごしておりました🍰

ブログもおさぼり。

今日から再開しようと思います。

前回初めてHTMLを打ち込む作業があり
懐かしい気持ちと共に
全然覚えてないことに驚きました。笑

来週の授業ではテストが開催されるそうなので
老体に鞭打って
記憶していきたいと思います。

習うより慣れろだと思うので
読んだり、書いたりするだけで満足せず
実際に打って慣らしていきます。

今日は忘れないようにするコツを
見つけたので紹介します。


ITの世界ではよく省略名が使われます。

そもそもITってのが
Information Tecnorogy の略ですね。

HTML(HyperText Markup Language) も
例外ではありません。

HTML で使われるタグは
ほぼ省略形で記述していきます。

例えばテーブル。

テーブル系の要素は
tr, th, td ってのがありますね。

これらの要素を単純にそのまま覚えてしまうと
ふとコーディングをするときに
最初に書くのって tr だっけ？ td だっけ？

中に書くのは th だっけ？tr だっけ？

なんてことに・・・。

コツといってもやりかたは簡単で
“タグ名と一緒にその省略前の名前をセットで覚えちゃおう！”
ということです。


HTML はよく使うタグに限って
タグ名が省略されちゃっています。

pタグは Paragraph の略だったり
tdは Table Data の略だったり。

記述を楽させるためでしょうけど
それが逆に学習の妨げになっちゃってたりします。

例えばol と ul どっちが順序付きか順序付きじゃないか
なんてことも省略前の名前を覚えておけば迷うことはなくなります。

olは Ordered List、ulは Unordered List の略です。

はい 一目瞭然ですね！

ol はオーダーリスト つまり順序付きリスト。

ul は un がついているのでその否定 順序なしリストのことです。

こうやって省略前の名前を覚えておけば
タグ名とその意味までセットで覚えることができ
定着率が上がります😘

英語力もアップしそうですし
私もこのやり方を踏まえて
要素を覚えなおさなきゃです( ；´Д｀)

No.14

Wi-Fi

当たり前のように家でも外でも使っているWi-Fi。

今日はそれについて少し調べてみました。

ほぼWikiの丸写しです。

「無線LAN」（IEEE 802.11規格の無線LAN）と
「Wi-Fi」との差違は
製品にWi-Fi CERTIFIEDロゴが表示されているかどうかである。

Wi-Fi CERTIFIEDロゴを製品に表示するためには
認証を受ける必要があり
認証されていないものは機能が同じでも
Wi-Fiとは名乗ってはいけない。

むむむ・・・ スタートからなんだか難しくなってしまったぞ。

Wi-Fiにより異なるメーカーの機器間での相互接続性が保証されているため
コンピュータ、フィーチャーフォン、スマートフォン、タブレット、PDAのような
多様な機器が無線LANを利用し
例えばアクセスポイントを経由しインターネットへ接続できる。

アクセスポイントによりインターネット接続が可能な領域を
ホットスポットという。

ホットスポットは部屋の中だけのものから
複数のアクセスポイントを重ねることで
数キロメートル四方にまで及ぶものもある。


当初想定されていたノートパソコンなどの
モバイルコンピューティング機器のLocal Area Network以外にも
PSP・PS Vitaなどの携帯ゲーム機や
フィーチャーフォン、スマートフォン、スマートテレビ
音楽プレイヤー、デジタルカメラ等の
家電製品にも搭載されている。


とても便利なWi-Fiですが
やはりデメリットもあります。

それはセキュリティに注意しなくてはならないということ。

WiFiに限らず無線通信全般にいえることだが
電波を飛ばすという性質上
誰かにアクセスポイントをタダ乗りされたり
メールやパスワードを盗み見されるといった危険性があります。

市販の無線LANルーターであれば
WEPなどの暗号化機能が搭載されていますが
心配であればWPAやWPA2・WPSといった
高度なセキュリティ機能を搭載した製品を買うのがベターと言える。

No.13

釣り

フィッシングと聞いたら
魚釣りを思い出してしまうが
詐欺行為としてのフィッシングという言葉を
耳にしたことがある。

なんとお美しい釣女さんなのだ〜！
好きになってしまいそうです。

今回はフィッシングについて
調べることにする。

金融機関などからの正規のメールやWebサイトを装い
暗証番号やクレジットカード番号などを詐取する詐欺。

フィッシングの代表的な手口は以下のとおり。

メールの送信者名を金融機関の窓口などのアドレスにしたメールを無差別に送りつけ
本文には個人情報を入力するよう促す案内文とWebページへのリンクが載っている。

リンクをクリックするとその金融機関の正規のWebサイトと
個人情報入力用のポップアップウィンドウが表示される。

メインウィンドウに表示されるサイトは「本物」で
ポップアップページは「偽者」である。

本物を見て安心したユーザが
ポップアップに表示された入力フォームに
暗証番号やパスワード、クレジットカード番号などの
秘密情報を入力・送信すると
犯人に情報が送信される。

フィッシングへの対応策としては

- 送信者欄を信用しない
- フォームの送受信にSSLが利用されているか確認する
- メールに示された連絡方法（リンクなど）以外の
正規のものと確認できている電話番号やURLなどから
案内が本物かどうかを確認する

などが挙げられる。

インターネット上で様々なサービスが提供されるにつれ
年々増加と高度化の傾向が顕著であるため
多様化する詐欺に気をつけていかなければならないですね💭

No.12

おいしそうpart2

昨日に引き続き
おいしそうシリーズ。

今回掘り下げていくのは
SPAM(スパム)について。

・・・ハムみたいで気になっていた。

スパムはもともと
大量かつ無差別に送られてくる迷惑メールを指したが
SNSスパムも登場し
今となっては「Web上の迷惑行為全般」を指す言葉。

スパムを行うスパマーと呼ばれる人たちには
なんらかの意図がある。

ほとんどの場合は自分たちの収益に繋げるために
スパム行為を行っている。

おおまかには

• 出会い系・アダルトサイトなどへの誘導「メール・LINEスパム」
• ページの拡散力を高めたり個人情報の獲得「Facebook・Twitterスパム」
• 金をだまし取ろうとする詐欺「請求スパムメール」
• サイトやサービスの宣伝「ブログコメント・Facebookスパム」

など色々とある。

スパム被害にあわないためには

「知らない人には反応しない」
「怪しいリンクはクリックしない」
「記事を読むのにアプリが必要なものはやめておく」

などを気をつけると良いかもです。

No.11

おいしそう

いつもおいしそうな名前だけが印象に残って
イマイチ意味を理解していなかった
Cookieについて少し調べてみた。

もちろんお菓子とは全くの別物⭐️

Cookie(クッキー)とは

Webサイトにアクセスすると
自分が訪問した回数や
前回のアクセス日時などの情報が
表示されていることがある。

これがCookieの役割。

クッキー機能を利用しているときに
パソコンからWebサイトにアクセスすると
「はじめまして」と表示するページの情報と
「Set-Cookie:」という現在時刻を付けたクッキーを送ってくる。

それを受け取ったパソコンは
ハードディスクにクッキー情報を保管して
Webページを表示する。

クッキーの便利さが身に分かるのが
ネットショッピングを利用するとき。

初めて利用するときは
住所や氏名、電話番号、送り先など
さまざまな個人情報を入力しなければならない。

しかし2度目以降の買い物では
クッキーの機能によって
情報がすでに入力された状態にある。

再び同じ情報を入力する手間が省ける！

しかし

入力しなくても個人情報が記載されているというのは
悪用される危険性もあることを意味する。

第三者が勝手に注文をしたり
個人情報を知らない間に見られている可能性もある。

クッキー機能は便利な反面
プライバシーの漏洩も考えられるので
プライバシーを最優先する場合は
設定を変更してクッキーをすべて拒否すべき。

私はネットショッピングマニアなので
少し不安も残りますが
これからもクッキーにはお世話になる予定です。