ゆるNOTEスマートフォン用の表示で見るゆるNOTE独学でWebの勉強をはじめたemyさんの覚書NOTEです。この広告は、90日以上更新していないブログに表示しています。Webツールなんとなく使えているけど人様に説明できるほど理解できてない。いうふわっとしたテーマ、けっこうありませんか?私にはアホほどあります。今日はその中から、文字参照について調べました。文字参照とは例えばHTMLでは、マークアップで使う記号「<」「>」「&」は直接文書の中に表示させることができません。使いたい!そんなとき使うのがら文字参照です。特殊な文字「ä」や記号「♪」なども呼び出せます。特定のキーワードによって文字や記号を呼び出します。&で始まり、キーワードをはさんで、;で終わります。&直感的に使えて便利です。クォーテーション「"」を呼び出すのは&quotとか、わかりやすくて覚えやすい。いくつか注意点があります。注意!文字参照は大文字と小文字を区別します。「ä」&auml;「Ä」&Auml;定義されていない文字は呼び出せません。数値文字参照キーワードではなく、10進数もしくは16進数で文字を呼び出すのが数値文字参照です。10646で文字コード番号が定められています。&#で始まり、文字コード番号をはさんで、;で終わります。「♪」&#9834(10進数)&#x266A;(16進数)なんとなく敷居が高そうですが、文字実体参照よりはるかに多くの文字を使えます。ちなみに、16進数では大文字小文字の区別は必要ありません。一覧と便利ツール理屈がわかったら、実際に使ってみましょう。基本的には一覧表から探せばいいのです。TML文字実体参照&数値文字参照一覧http://www.mirai-net.jp/skill/tool/htmlただまぁ、まどろっこしいですよね。使う文字や記号は暗記すればいいけど、流石に全部覚えるのは無理です。そんなものぐさ人のために!こんな便利ツールがあります。便利帳】文字列と数値文字参照(文字参照)の変換スクリプトhttp://www.benricho.org/moji_conv/15.htmlこの手のツールはいくらでもあるようですね。まとめ今日は文字参照についてまとめました。使えれば問題ないのかもしれないけど、理解しきっていない自覚があると、その分だけもやもやが残ります。調べて、理解して、すっきり!何事にもこの姿勢で臨みたいものです。今日のひとこともやっとボールってあったなぁ。23:45文字参照Tweet広告を非表示にするもっと読むコメントを書く2016-06-17リストを覚えるよHTMLリスト関連のタグってわかりにくいし覚えにくくないですか?何種類もあるし。...まあ、そうも言っていられないので、頭に叩き込むべくまとめました。順序のあるリスト順序のないリスト定義・説明リスト以上の3つです。ポイントを押さえて、理解します。したら簡単に覚えられるようになる(はず)。ひとつずつ見ていきましょう。listの略で、順序のあるリストを作ります。orderd=順序をつけられたという意味。リストの項目は、<li&gtタグで指定します。順序に意味があるときに使います。順序を入れ替えても問題ないなら、<ul>タグにしておきましょう。style属性style属性で、リストマーカーの見ためを指定できます。list-style-typeプロパティを使用。upper-roman"卵かけご飯の作り方ごはんと卵を用意します卵をごはんに割り入れますお好みで醤油を少々たらします召し上がれ!start属性start属性を使うと、リストの開始番号を指定できます。reversed属性reversed属性を使うと、リストの並び順が逆になります。旧いバージョンのブラウザではサポートされていないようです。listの略で、順序のないリストを作ります。orderdに否定を表すun-をくっつけて、unorderd=順序をつけられていないって意味です。リスト項目は、<li>タグで指定します。style属性<ol>と同様に、style属性で、リストマーカーのスタイルを指定できます。list-style-typeプロパティを使います。定義とは物事の意味・内容を他と区別できるように、言葉で明確に限定すること。いう形のリストを作ります。<dd>タグ(説明)を囲みます。複数の<dt>に対してひとつの<dd>を使ったりしてもOKです。川で生まれ、海で成長し、産卵のために生まれ故郷の川に戻る。さくらんぼ桜桃チェリーバラ科サクラ属サクラ亜属の果樹であるミザクラ(実桜)の果実。list(説明リスト)という程度の意味らしいです。ほとんど同じ意味じゃねーかと思いますが、もうちょっとゆるく使ってもいいよってことでしょうかね。ちなみに、<dt>のtはterm=言葉、<dd>の後ろのdはdescription=説明って意味です。まとめ順序のあるリスト<ol>、順序のないリスト<ul>、定義・説明リスト<dl>についてまとめました。理解できました!わたしは原因とか理由とか語源とかが気になるタチです。わからない事でも、名前の由来がわかると、その「わかった!」をきっかけに理解が進むことが多々あります。いう自分のクセをノウハウとして貯めていくことが勉強のコツなんでしょうねー。今日のひとこと実際覚えられたかって?...この記事は何度も見直すことになりそうじゃなー(遠い目)。21:54リストを覚えるよTweet広告を非表示にするもっと読むコメントを書く2016-06-16すごいよグローバル属性HTMLグローバル属性とは!HTMLのすべての要素に指定できる属性のことです。いろんなタグにくっついて、たくさん仕事しているすごいヤツらです。今回はそんなグローバル属性の中でも代表的な3つの属性についてまとめました。固有の名前をつけることができます。値は文書の中で一つだけしか使えません。子沢山でも、同じ名前をつけないのと似たようなものでしょうか。空白を使うことができません。スタイルシートのセレクタ=適応対象にしたり、リンクの参照先にしたりできます。class属性クラス名をつけることができます。値は自由に決められますが、見ためではなく意味を表すものを選ぶほうがいいです。こんなときはclass="pink"ではなく、class="girlsName"がベター。みか、えりな、かずは、きょうこ、よしえ1つの要素に対して複数のクラス名を指定することもできます。空白スペースで区切ってあげます。直接スタイル=見ためを決められます。値にはスタイルシートの指定を入れることができます。複数指定したいときは、セミコロンで区切ります。150%"スタイルシートの指定方法は他にもあるし、style属性はあんまり出番がないような気がします。まとめグローバル属性の代表例として、id属性、class属性、style属性について整理しました。id属性とclass属性がごっちゃになりそうだけど、id属性は重複NG!って押さえていれば大丈夫。あとは実践あるのみ、使いながら覚えましょう。今日のひとこと構造とは関係なく、意味をくっつけるって、なんかおもしろいなー。shortener」で短縮URLを作るWebツールリンクを貼りたいこと、ありますよね。アホほど長いURLだと気持ちが萎えて、思わず手が止まってしまいます。なる前に、短縮URLを作っちゃいましょう。shortener」を使います。4ステップで短縮URLができちゃうhttp://goo.gl/にアクセスする。テキストボックスに長いURLをコピー&ペーストする。私はロボットではありませんをチェックし、質問に答える。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こんなに短くなりました。同じページにアクセスできます。shortener」で短縮URLを作りました。同様のサービスは他にもあるので、お気に入りを見つけるといいのかも。レッツ短縮URL!本日のひと言でれぇ簡単じゃが!えれーみじこーなってしもーたなぁ。shortener」で短縮URLを作るTweet広告を非表示にするもっと読むコメントを書く2016-06-12ブログはじめましたはじめまして!id:emyです。このブログは、Webデザイナーの仕事がしたい!やりたいことはやらなくちゃ!...と決意し、独学でWebの勉強を始めたemyさんの、emyさんによる、emyさんのための覚書です。その日勉強したことのまとめ参考にしたい記事のスクラップしょうもない日常このあたりが中心になる予定です。ド初心者なので、とんちんかんもいいところかもしれませんが、あたたかく見守ってやってください。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。