2019.05.10こんにちは。ドルフィンですこの記事では、HTMLのidとclassについてそしてCSSの書き方について紹介していきたいと思います。書くだけでなく、より実践的な内容となっておりますので、ぜひ最後まで読んで頂ければと思います。divタグの仕組みと開発者ツールの使い方HTMLの中でdivタグというものが存在します。こちらを入力して、HTMLとして保存し、ブラウザ上で開いてみてください。結果は、このようになると思います。何の変哲もないh1タグとpタグがあるだけに思えますがここで【開発者ツール】を使ってみますこれはブラウザによって若干異なるのですが、HTMLとCSSの確認の仕方は同じです。その違いについても後程の記事で解説させていただきます。今回はGoogleChromeを例として使いますF12キーを押してくださいこのような画面が現れたかと思います。これはHTMLやCSSのレイアウトを確認するのに、すごく便利なツールです。各ブラウザには、この機能がデフォルトで搭載されています。右上にある紫色で囲んだ〇が縦に3つ並んだマークを押して頂くと、下側にメニューが現れますこのメニューの中からオレンジ色で囲んだ、テレビのようなマークを押してみてください。開発者ツールがページ下部に固定されて表示されるようになれば、設定完了です。Elementsという左上のタブを選んでください。(デフォルトで選択されています)開発者ツールの中に、今まで書いてきたタグが表示されます。タグごとに選択できるので、こんにちは!と書いたpタグを選択してみましょうpタグで囲まれた部分のデザインはこうなっている、というのが視覚的によく分かると思います。次にdivタグを選択してみましょう。写真のように「あいさつ、こんにちは、こんばんは」の3つが全てdivの中に入っていることが目で確認できるかと思います。divタグは、文字や画像などを入れるためのボックスという認識をもって頂ければと思います。idとclassの使い方いよいよここからはCSSを書いていくことになります。先ほど書いたタグに、もう1つ枠を追加してみましょう。CSSをHTML上に追加します。class="test_001"><h1>あいさつ</h1><p>いよいよCSSの学習がはじまりますね!</p></div></body></html>headタグの中に書いたstyleタグがあると思います。この中に追加されたのがCSSです。ブラウザ上で確認してみましょう。あいさつのボックスが追加され、背景色が灰色になりました。全体の文字が青色に変更されましたね。CSSではこのように、色の変更をおこなったりレイアウトを変更したりすることが出来ます。styleタグの中に追加された内容を確認してみましょう。こちらはCSSの書き方で、HTMLとはまた違った書き方がされていますね。<style>div{color:#00008b;}.test{background:#c0c0c0;}</style>divという括弧の中には、colorというCSSが追加されています。この波括弧で囲んだ内容が、実際にデザインとして追加されることになります。今回で言うとcolorというCSSが追加されており、colorは文字の色を変更するといった内容です。いうのはカラーコードと呼ばれるもので、このカラーコードを使って色を指定しています。今回は深い青色ですが他にも様々な色が指定できるので、詳細は別途記事でお伝えします。この文字色の指定が、すべてのdivタグに設定されたという認識をもってもらえればと思います。今度は.testの括弧を見てみましょう。見ると分かるのですが、testの前にピリオド『.』が入っていますCSSでタグを指定するときは何もいらないんですが、クラスを指定するときは先頭に『.』を追加します。.testにはbackgroundというCSSが追加されていますこれは背景の追加という意味で、ここでは灰色のカラーコードを適用しています背景のCSSは色だけでなく、画像の設定も可能です。ここでは、classがどういう役割をしているかをご理解頂ければと思いますCSSを追加してみよういまのデザインをもう一度確認してみましょうtestのクラスには背景色が設定されていますが、test_001には何も追加がされていません。ローカルとサーバー自分のページを皆が見れるように公開することを、サーバーにファイルをアップすると言います。これまでの記事を手順通り進めてきた人は、ファイルがデスクトップ上など自分のパソコン内に存在していて、他の人から見ることはできない状態かと思います。今回は、初心者がプログラミングを勉強するための心得をご紹介していきたいと思います!初心者といっても幅広いのですが、今回は『プログラミングの経験が一切なく、実際に初めてコードを書こうとしている人』に向けてお送りしたいと思います。SublimeText3を使ってHTMLの基本を書いてみようはじめまして。ドルフィンですこのブログにたどり着いたあなたは、htmlについて学びたい、htmlを今よりも詳しく知りたいとお考えだと思います。そんな読者の皆様が簡単にhtmlを書けるようになり、簡単にウェブサイトを作れるようになるまで、コーディングを解説していきたいと思います今回は、HTMLの基本について学んでいきます。