文字参照

なんとなく使えているけど人様に説明できるほど理解できてない。そういうふわっとしたテーマ、けっこうありませんか？私にはアホほどあります。

今日はその中から、文字参照について調べました。

文字参照とは

例えばHTMLでは、マークアップで使う記号「<」「>」「&」は直接文書の中に表示させることができません。でも使いたい！そんなとき使うのがら文字参照です。特殊な文字「ä」や記号「♪」なども呼び出せます。

文字実体参照と数値文字参照があります。

文字実体参照

文字実体参照は、特定のキーワードによって文字や記号を呼び出します。

必ず&で始まり、キーワードをはさんで、;で終わります。

よく使うのを表にしてみました。

　 　　 　 　 　　 　　 　　 　

文字実体参照	呼び出される文字
&lt;	<
&gt;	>
&amp;	&

直感的に使えて便利です。クォーテーション「"」を呼び出すのは&quotとか、わかりやすくて覚えやすい。ただ、いくつか注意点があります。

注意！

1. 文字参照は大文字と小文字を区別します。
   「ä」&auml;
   「Ä」&Auml;
   
2. 定義されていない文字は呼び出せません。

数値文字参照

キーワードではなく、10進数もしくは16進数で文字を呼び出すのが数値文字参照です。ISO 10646で文字コード番号が定められています。

必ず&#で始まり、文字コード番号をはさんで、;で終わります。

例えばこんなの。

「♪」&#9834（10進数）&#x266A;（16進数）

なんとなく敷居が高そうですが、文字実体参照よりはるかに多くの文字を使えます。選び放題です。

ちなみに、16進数では大文字小文字の区別は必要ありません。

一覧と便利ツール

理屈がわかったら、実際に使ってみましょう。

基本的には一覧表から探せばいいのです。

TML文字実体参照＆数値文字参照一覧
http://www.mirai-net.jp/skill/tool/html

ただまぁ、まどろっこしいですよね。よく使う文字や記号は暗記すればいいけど、流石に全部覚えるのは無理です。

そんなものぐさ人のために！こんな便利ツールがあります。

【みんなの知識 ちょっと便利帳】文字列と数値文字参照(文字参照)の変換スクリプト
http://www.benricho.org/moji_conv/15.html

この手のツールはいくらでもあるようですね。
すばらしい。

まとめ

今日は文字参照についてまとめました。

使えれば問題ないのかもしれないけど、理解しきっていない自覚があると、その分だけもやもやが残ります。
きちんと調べて、理解して、すっきり！
何事にもこの姿勢で臨みたいものです。

今日のひとこと

もやっとボールってあったなぁ。
アホほどなつかしい。

リストを覚えるよ

リスト関連のタグってわかりにくいし覚えにくくないですか？何種類もあるし。…まあ、そうも言っていられないので、頭に叩き込むべくまとめました。

3種類のリスト

今日扱うのは、

• 順序のあるリスト
• 順序のないリスト
• 定義・説明リスト

以上の3つです。まずはきちんとポイントを押さえて、理解します。そしたら簡単に覚えられるようになる（はず）。
ひとつずつ見ていきましょう。

<ol>　順序のあるリスト

<ol>タグはordered listの略で、順序のあるリストを作ります。orderd=順序をつけられたという意味。 リストの項目は、<li>タグで指定します。

順序に意味があるときに使います。順序を入れ替えても問題ないなら、<ul>タグにしておきましょう。

style属性

style属性で、リストマーカーの見ためを指定できます。 list-style-typeプロパティを使用。

例→大文字のローマ数字
style="list-style-type: upper-roman"

卵かけご飯の作り方

1. ごはんと卵を用意します
2. 卵をごはんに割り入れます
3. お好みで醤油を少々たらします
4. 召し上がれ！

start属性

start属性を使うと、リストの開始番号を指定できます。整理のみ。

reversed属性

reversed属性を使うと、リストの並び順が逆になります。 ただし、旧いバージョンのブラウザではサポートされていないようです。

<ul>　順序のないリスト

<ul>タグはunordered listの略で、順序のないリストを作ります。orderdに否定を表すun-をくっつけて、unorderd=順序をつけられていないって意味です。リスト項目は、<li>タグで指定します。

style属性

<ol>と同様に、style属性で、リストマーカーのスタイルを指定できます。 list-style-typeプロパティを使います。
例→黒い四角（square）
style="list-style-type: square"

今日の献立

• 卵かけご飯
• 鮭のごま塩焼
• かぼちゃの煮物
• さくらんぼ

<dl>　定義・説明リスト

なんぞこれ、という感じですが、

定義とは

物事の意味・内容を他と区別できるように、言葉で明確に限定すること。

こういう形のリストを作ります。

<dl>タグで、 <dt>タグ（定義・説明される言葉）と <dd>タグ（説明）を囲みます。

ひとつの<dt>に対して複数の<dd>を使ったり、 複数の<dt>に対してひとつの<dd>を使ったりしてもOKです。例→

鮭

読み方はサケ（学名 Oncorhynchus keta）

サケ目サケ科サケ属の魚

川で生まれ、海で成長し、産卵のために生まれ故郷の川に戻る。

さくらんぼ

桜桃

チェリー

バラ科サクラ属サクラ亜属の果樹であるミザクラ(実桜)の果実。食用

<dl>タグの由来

HTML4.01ではdefinition list（定義リスト）の意味であることが示されていましたが、 HTML5ではdescription list（説明リスト）という程度の意味らしいです。ほとんど同じ意味じゃねーかと思いますが、もうちょっとゆるく使ってもいいよってことでしょうかね。

ちなみに、<dt>のtはterm=言葉、<dd>の後ろのdはdescription=説明って意味です。

まとめ

順序のあるリスト<ol>、順序のないリスト<ul>、定義・説明リスト<dl>についてまとめました。ばっちり理解できました！

わたしは原因とか理由とか語源とかが気になるタチです。よくわからない事でも、名前の由来がわかると、その「わかった！」をきっかけに理解が進むことが多々あります。

こういう自分のクセをノウハウとして貯めていくことが勉強のコツなんでしょうねー。

今日のひとこと

実際覚えられたかって？
…この記事は何度も見直すことになりそうじゃなー（遠い目）。

すごいよグローバル属性

グローバル属性とは！HTMLのすべての要素に指定できる属性のことです。いろんなタグにくっついて、たくさん仕事しているすごいヤツらです。

今回はそんなグローバル属性の中でも代表的な3つの属性についてまとめました。

id属性

固有の名前をつけることができます。

値は文書の中で一つだけしか使えません。重複NGです。いくら子沢山でも、同じ名前をつけないのと似たようなものでしょうか。また、空白を使うことができません。

スタイルシートのセレクタ＝適応対象にしたり、リンクの参照先にしたりできます。

class属性

クラス名をつけることができます。

値は自由に決められますが、見ためではなく意味を表すものを選ぶほうがいいです。例えばこんなときはclass="pink"ではなく、class="girlsName"がベター。

みか、えりな、かずは、きょうこ、よしえ

1つの要素に対して複数のクラス名を指定することもできます。空白スペースで区切ってあげます。

class="flower yellow summer"　

style属性

直接スタイル=見ためを決められます。値にはスタイルシートの指定を入れることができます。複数指定したいときは、セミコロンで区切ります。

style="color: #ff0000 ; font-size: 150%"

スタイルシートの指定方法は他にもあるし、style属性はあんまり出番がないような気がします。

まとめ

グローバル属性の代表例として、id属性、class属性、style属性について整理しました。id属性とclass属性がごっちゃになりそうだけど、id属性は重複NG！って押さえていれば大丈夫。あとは実践あるのみ、使いながら覚えましょう。

今日のひとこと

構造とは関係なく、意味をくっつけるって、なんかおもしろいなー。

「google url shortener」で短縮URLを作る

リンクを貼りたいこと、ありますよね。
アホほど長いURLだと気持ちが萎えて、思わず手が止まってしまいます。

そうなる前に、短縮URLを作っちゃいましょう。
「Google url shortener」を使います。

4ステップで短縮URLができちゃう

1. http://goo.gl/にアクセスする。
2. テキストボックスに長いURLをコピー&ペーストする。
3. 私はロボットではありませんをチェックし、質問に答える。
4. 「shoten url」ボタンをクリック

これだけです。簡単ですね。

実際にやってみた

サンプルはこちら。
https://www.amazon.co.jp/%E3%80%8C%E5%B2%A1%E5%B1%B1%E5%BC%81JARO-%E3%80%8D-%E3%81%8A%E3%81%8B%E3%82%84%E3%81%BE%E3%81%B9%E3%82%93%E3%81%98%E3%82%83%E3%82%8D-Osera%E5%B2%A1%E5%B1%B1%E5%BC%81%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA%E7%AC%AC3%E5%BC%BE-%E9%9D%92%E5%B1%B1-y/dp/4900990116
な、長い。
ネタはわたくしの出生地、大都会岡山でございます。

URLを貼りつけて、人間チェック。

ボタンを押すと画面右側に短縮URLとプレビューが表示されます。

https://goo.gl/r5VpML
こんなに短くなりました。
きちんと同じページにアクセスできます。やったね。

まとめ
「Google url shortener」で短縮URLを作りました。
同様のサービスは他にもあるので、お気に入りを見つけるといいのかも。レッツ短縮URL！

本日のひと言

でれぇ簡単じゃが！えれーみじこーなってしもーたなぁ。

「岡山弁JARO?」(おかやまべんじゃろ) (Osera岡山弁シリーズ第3弾!)

ブログはじめました

はじめまして！id:emyです。

このブログは、

Webデザイナーの仕事がしたい！
やりたいことはやらなくちゃ！

…と決意し、独学でWebの勉強を始めたemyさんの、emyさんによる、emyさんのための覚書です。おもに、

• その日勉強したことのまとめ
• 参考にしたい記事のスクラップ
• しょうもない日常

このあたりが中心になる予定です。

ド初心者なので、とんちんかんもいいところかもしれませんが、あたたかく見守ってやってください。
よろしくおねがいします！