HTML勉強した結果の備忘録。楽天ホームパソコン(備忘録など)HTML勉強した結果の備忘録。HTMLとは?メタタグって何?HTML勉強した結果の備忘録。2019.06.23スポンサーリンクしいたけ夫どうも、しいたけ夫(@shiitakeo0326)です。今日HTMLをドットインストールで勉強していました。プログラミング言語って恐らく書いてないと忘れちゃいますよね...。Rubyをはじめ、iPhoneやAndroidアプリの作り方も学べます。豊富な3分動画を見ることで、はじめての人でも無理なくスキルを身につけていくことができるプログラミング学習サービスです。dotinstall.comHTMLの基礎についてとりあえずまとめておこうと思います。なんかイメージですけど、こういうプログラミング言語っていきなり専門用語が入ってくるからとっつきにくい。ドットインストール見ていても思ったのですが、動画が早すぎてついていけないし、なんでこうするのか...という説明がないまま進むので理解出来ないで終わってしまう。いうもんか...と納得した気でいると後で分からなくなった時に収集つかなくなってしまって辞めてしまう...ということが起きる気がします。下記の本も参考にしていますのでもし良ければご参照ください。この本を読んで誰かがかいてくれたHTMLやCSSを見てなんとなく理解が出来るようになりました。自分で書くのは難しいですが、後でCSSとか削除するときとかに役立ちそうです。lang=”ja”><head><title><meta><body><h1>~<h6><p><a><img>まとめスポンサーリンクHTMLとはHTMLとはH=HyperT=TextM=MarkupL=Language読み方はエイチティーエムエルとそのまま1文字ずつ読みます。ウェブページを作成する際の文書構造を作成したり、画像を表示させたり、リンクを張ったりすることが出来ます。CSSと見分けが付かないという声もあると思いますが、HTMLが文書の意味を持たせたり、構造を定義するのに対して、CSSはどちらかというとHTMLの装飾をどうするかという言語です。見出しの【HTMLとは】のところの緑とか、影をつけたりとか、そのような装飾にあたるところはCSSです。href=”link先のURL”>リンク先名</a></p>・・・7、8</body>・・・6</html>・・・2これすっごい簡単なHTMLの文章の構造です。実際のページはこれだけで出来上がってたら本当しょぼいぐらいです。最初なのでこんなもので...。1つずつ備忘録のためまとめておきたいと思います。・文字コードは小文字・大文字どちらでもOK・文字コードは全角はNG(文章内とかはOK)上記は絶対条件なので書くときには気にしてみてみてください。イメージは下記になります。字が下手ですみません!IPadで書いてみました!簡単に書くとこんな感じ。イメージとしては↑の画像の中身は木の幹でそこから枝や葉をつけていくイメージ。枝や葉がこの後説明する要素や属性になります。html>はDOCTYPE宣言と呼ばれており、この文書はHTML5というバージョンで書かれていますよ。HTML4の場合にはもっと長かったようで、HTML5のDOCTYPE宣言はあまり意味がないと言われているようです。HTML5で書いた文書も、このDOCTYPE宣言をしないとブラウザで読み込んだ時にレンダリングモードというものになり、別で記載するCSSの装飾等が上手く反映できない可能性があります。DOCTYPE宣言をすることによって標準モードになり、CSSが記載通りしっかりと反映出来ます。何れにせよ、「今からHTML5で書くね!」「この後に記載するものはHTML5で書いているよ!」とWEB側に知らせるためにも書くものだと覚えておきましょう。lang=”ja”>html要素は<html>と</html>で囲まれている間のところはHTMLで記載していることを示すタグになります。話が前後しますが、基本的に要素は<>不等号で挟み、タグの終わりの方には/をつけます。*例...<p>文書</p>、<html></html>、<head></head>など。今回はhtml要素にlang属性と呼ばれる、どこの言語で書かれているか示す属性をつけています。この属性はつけてもつけなくてもどちらでも良いのですが最近読んだものだとGoogleはこのlang属性は見てないよっていう記事がありましたのでどちらでも良いかもしれません。→html要素に半角スペースを入れて、langを記載し、=”属性値”を記載します。langが属性に対して、””に挟まれたところは属性値といってその値などを記載します。href=”画像URL”>など<head><head>はタイトルを設定したり、サイトの説明文などを記載する要素です。この後説明する<title>要素や<meta>要素などもここに入れます。分かりやすく説明すると本文以外の説明等については、ここに記載します。Adsenseなどの判別用のコードなどを記載する際もここだったかと思います。(はてなブログでやってた時はheadのとこに入れてくださいって書いてあった)<title><title>は名前の通りブログタイトルを設定します。タイトルもそうですが、ウェブブラウザ上のタブに表示されるのもここの<title>で設定した文言になります。これも必須なので<head>要素内で記載をするようにしましょう。<head>要素内で記載する理由としては<head>のところで説明した通り、本文以外だからです。<meta><meta>要素は結構難しい気がしていますが、要はウェブに対して、このサイトはこういうサイトだよ!こういうキーワードでこの記事書いてるよ!などをGoogleなどのクローラー(ウェブサイトを自動で巡回しているやつ)に対してアピールするものです。content=”サイトの説明分”>⇒これはサイトの説明文を記載するものです。discriptionは日本語で「説明・記述」などの意味を持ちます。content=”キーワード,html説明”>⇒サイトのキーワードを記載するものです。キーワードは””ダブルコロンの中に記載し、複数ある場合は,カンマで仕切ります。昔はこのメタタグやメタキーワードなどを設定することによってSEO対策(検索で上位に表示するなど)に有効と言われていましたが、今はそんなことないようです。タイトルなどは設定しないとSEOに大きな影響を与えますが、メタタグはあまり気にしなくても良いのかもしれません。<body><body>は分かりやすく言えば、本文です。この中には色んな要素が入ってきます。<body>~</body>で囲まれている間にこの今書いている本文も入っています。本文でよく使う要素を紹介します。<h1>~<h6>これは見出しタグです。<h1>から順番に使っていきます。<h1>は本文中のタイトルのイメージで後は区切りごとに使っていけば良いかと思います。はてなブログだと大見出しを設定するといきなり<h3>が設定されるそうです。<h1>は基本的にあまり弄ることはないのですが、本文中<h2>からしっかり設定しないとSEOに悪影響があるそうなので数字の小さいところから使っていきましょう。このブログで言うところの緑で囲われたところが見出しで、それぞれ装飾が違うのはh2とかh3とかによってこのブログは装飾を分けているからです。<p><p>は段落を表す要素です。段落ごとに仕分けをするために使用します。WordPressでもはてなブログでも通常エンターを押すとこの<p>要素で囲われます。段落として分けるのではなくただの改行の時は</br>(break)を使用します。それだと段落のように1行空いたりせずに改行することができます。<a><a>だけで使用することはありませんが、リンクに飛ばすときにこれを使用します。href=”link先のURL”>リンク先名</a>でリンクを飛ばすことが出来ます。href=”https://www.shiitake0326.net”>しいたけ夫(お)の雑記ブログ</a>でしいたけ夫のHPに移動することが出来ます。タグを有効にすると・・・⇒しいたけ夫(お)の雑記ブログ別タブで開く時にはtarget=”_blank”>を追加してあげます。target=”_blank”>しいたけ夫(お)の雑記ブログ</a>タグを有効にすると・・・⇒しいたけ夫(お)の雑記ブログ<img><img>要素は画像を表示させるものです。使用するときは下記のように使用します。alt=”画像の説明”>srcはsourceソースの略です。どれを元にするかという属性になります。widthは幅(横幅)でheightは高さです。画像の大きさをどうするか設定します。altは画像が表示されなかったり、読み込みが遅くなった時とかに表示するものです。画像の説明を書いてあると表示されなかった時に親切かと思います。スポンサーリンクまとめいかがでしたでしょうか。うん、どちらかというとしいたけ夫用の備忘録なので、もしかしたら分かりにくい部分があったかもしれません。HTML勉強したてのしいたけ夫が書いているので、まだみんなに近い目線で書けている気がします。プログラミング言語って全部を網羅するの難しいので、要素や属性について分からないことがあれば都度調べて、どう使うか把握することが大事な気がします。Fnキーを押さずにF1~F12を有効/無効にする方法とは?Fnキー、ファンクションキーを押さずにFを有効/無効にする方法を紹介しています。パソコン(備忘録など)【Windows10】ブルーライトカットをパソコン設定側で行う方法とは?こんばんは、しいたけ夫です。最近仕事でもパソコンを見つめてばっかで目が究極的に疲れて...パソコン(備忘録など)WordPressで間を狭く改行をする方法。こんにちは、しいたけ夫です。この記事は備忘録ぐらいなのでサッっと更新していきます。Consoleで自分のサイトページがGoogleに登録されているか確認する方法。拡張子の表示・非表示はどうする?Windows10での拡張子の表示・非表示をさせる方法を画像を使って分かりやすく簡単に説明します!パソコン(備忘録など)DELLのPCを購入しました!Macを選ばなかった理由とは!?こんばんは、しいたけ夫です。大阪で営業マンをしているしいたけ夫です。営業マンとは思えない程のやる気のなさ。意識低い系営業マンが役に立つ!と思ったこと経験談をまとめたりしています。興味を持ったことだけはとことんやります。他人に優しい人は、他人に興味がない説。2019.06.252019.12.24養命酒を3カ月飲み続けていたが、1カ月飲むのを止めてみて養命酒の効果に気づいた件。2019.04.072019.12.10トイレの電気を消し忘れてしまうことについて原因と対策をまとめました。大阪で営業マンをしているしいたけ夫です。営業マンとは思えない程のやる気のなさ。意識低い系営業マンが役に立つ!と思ったこと経験談をまとめたりしています。興味を持ったことだけはとことんやります。他人に優しい人は、他人に興味がない説。2019.06.252019.12.24養命酒を3カ月飲み続けていたが、1カ月飲むのを止めてみて養命酒の効果に気づいた件。2019.04.072019.12.10トイレの電気を消し忘れてしまうことについて原因と対策をまとめました。2018.12.162019.07.27コスパ最強!無印良品の肩の負担を軽くするリュックが安い・軽いで使いやすい!2019.02.042019.11.28最近の薄型液晶テレビは音が聞こえ辛い?その理由と解決法とは?2018.12.172019.08.17タイトルとURLをコピーしました。