HTMLとCSSの旅(8)

HTMLのいろいろな要素を取り扱おう(2)

ブログを書く前に色々HTMLについてしらべていたのですが、CSSの方がHTMLでいう要素みたいなものがたくさんあったので、このブログでHTMLの要素について終わらせたいと思います。そしてCSSもやってPythonでWebアプリを作れたらなって思います。

<ol>

<ul>と違って順序のあるリストを作るタグです。
属性にstartとtypeがあります。

<ol type="i">
   <li>リスト１</li>
   <li>リスト２</li>
</ol>
  1. リスト１
  2. リスト２

typeには１, A, a, Iが入ります。また何も入れない場合は１扱いとなります。

<ol start="5" type="a">
   <li>リスト１</li>
   <li>リスト２</li>
</ol>
  1. リスト１
  2. リスト２

startには始めたいところの番号を入れます。typeがなんであろうとstartに入るのは数字であることに気をつけてください。

<ul>

こちらは前も紹介した通りの順序のないリストを作るタグです。
属性にはtypeがあって、disc(黒丸), circle(白丸), square(四角)が入ります。

<ul type="square">
   <li>リスト１</li>
   <li>リスト２</li>
<ul>
<li>

リストの項目を表示するタグです。
属性にはtypeとvalueがあります。
typeにはdisc, circle, square, 1, A, a, Iが入るのですが、disc, circle, squareは<ul>~</ul>と中のとき、1, A, a, Iは<ol>~</ol>の中のときです。またvalueは数字しか入らず、<ol>内のときに使い、項目番号の変更をします。

<ol>
   <li type="A" value="3">リスト１</li>
   <li type="a" value="3">リスト２</li>
</ol>
  1. リスト１
  2. リスト２

こんな風にリスト内容それぞれに指定することができます。

<ul>
   <li type="disc">リスト１</li>
   <li type="circle">リスト２</li>
   <li type="square">リスト３</li>
</ul>
<dl> <dt> <dd>

定義リストを表すタグです。

<dl>
   <dt>用語</dt>
   <dd>用語の説明</dd>
</dl>
用語
用語の説明
<img>

画像を表示させるタグです。属性はたくさんあるので主に使うもの紹介します。
具体的には次のコードをみてください。

<p><img src="画像URL" alt="表示できない場合の代替テキスト" height="高さ" width="幅" 
align="画像とテキストの位置関係">サンプル</p>

画像を表示できませんサンプル

 

 

 

 

 

 

この画像は次のように表示させました。

<p><img src="https://upload.wikimedia.org/wikipedia/commons/9/9e/Flag_of_Japan.svg" 
alt="画像を表示できません" width="400" height="300" align="right">サンプル</p>
<hr>

水平の横線を引くタグです。

属性にはsize width align noshadeの4つがあります。

<hr size="太さ" width="長さ" align=""表示位置" noshade="">

noshadeは立体感をなくすことができます。

<s>

<del>と同様に打ち消し線をつくるタグです。正確では無くなった情報などに使います。

<s>打ち消し線が作られます。</s>

打ち消し線が作られます。

<u>

アンダーラインを引くためのタグです。

<u>アンダーラインを引きます。</u>

アンダーラインを引きます。

<i>

文字をイタリック体で表示します。

<p>文字を<i>イタリック体</i>で表示します。</i>

文字をイタリック体で表示します

<b>

文字を太文字にするタグです。

<p><b>太</b>文字</p>

太文字

 

最後に

ひとまずこれで終わりにしたいと思います。しかし、まだ触れてないとこがあって、触れたいんですが自分の知識不足で今やってもなんの役にも立たないと思いましたので、先にCSSに移りたいと思います。もうすぐ夏休みが終わってしまい、この夏休みを無駄にした気しかしません。最初から始めればもっと勉強状態も進歩したと思います。なので、学校が始まってからも一週間に一個ブログを完成させたいと思います。CSSが終わったらPythonのDjangoに手を出し、それについてもブログでかけたらいいと思っています。とりあえず、CSSの勉強が終わるまでは一週間に一個のブログを書きたいと思います。

HTMLとCSSの旅(7)

HTMLのいろいろな要素を取り扱おう(1)

今までのブログで基礎中の基礎を抑えたと思うので、何をしようか迷いました。

ヘッダーとかのレイアウトをやろうかなとも思ったのですが、HTMLのいろいろな要素を使ってみたいという自分の一心で、これに決まりました笑

これが終わってからレイアウト系に入ろうかと思います。

では早速始めましょうか

<cite>

出典や参照先を表すタグです。

<cite>https://www.stat.go.jp/data/sekai/0116.html</cite>

https://www.stat.go.jp/data/sekai/0116.html

囲まれたところはイタリック体で表示されるようになります。

<q>

引用・転載文であることを示すタグです。短い文章に使われる。

<q>あなたの心が正しいと思うことをしなさい。どっちにしたって批判されるのだから。</q>

あなたの心が正しいと思うことをしなさい。どっちにしたって批判されるのだから。

属性はciteである。

<blockquote>

<q>とほとんど同じで、長い文章に使われる。

<ins>

あとから追加された部分を表すタグです。属性はciteとdatetimeがある。

<ins> 追加されたテキストです。</ins>

追加されたテキストです。

<del>

後から削除された部分を示すタグです。属性はciteとdatetimeがある。

<del>後から削除された部分です。</del>

後から削除された部分です。

<strong>

テキストを強調するためのタグです。

<p>強調したい<strong>テキスト</strong>を囲みます。</p>

強調したいテキストを囲みます。

<em>

<strong>よりも弱い強調をするタグです。

<p>強調したい<em>テキスト</em>を囲みます。</p>

強調したいテキストを囲みます。

<var>

プログラムコードの変数などを示すタグです。

<p>変数<var>val</var>を代入する。</p>

変数valを代入する。

<samp>

プログラムからの出力内容のサンプルであることを提示するタグです。

<p><samp>登録が完了しました</samp>と表示されます</p>

登録が完了しましたと表示されます

<kbd>

ユーザーが入力するテキストを示すタグです。

<p><kbd>OK</kbd>と入力してください</p>

OKと入力してください

<abbr>

略語を示すタグです。

<p><abbr title="World Wide Web">www</abbr></p>

www

<sub>

下付き文字を表示させるタグです。

<p>H<sub>2</sub>O</p>

H2O

<address>

連絡先や問い合わせ先を示すタグです。

<address><p>お問い合わせはこちらまで　　000-0000-0000</p></address>

お問い合わせはこちらまで　　　000-0000-0000

HTMLとCSSの旅(6)

背景の色を変えてみる

早速コードみていきましょう！

HTML
<p>テキスト</p>
CSS
p {
   background-color: green;
}

これを実行すると. . .

テキスト

と背景に色がつきました。

「background-color: 色;」と指定すればできます。もう簡単ですね笑

 

横幅と高さを変えてみる

今背景に色がつきましたけど、右側に多くの余白がありますよね。

これを変えてみようと思います。

HTML
<p>テキスト</p>
CSS
p {
   background-color: green;
   width: 100px;
   height: 20px;
}

これを実行すると. . .

テキスト

バランスは悪いですがこんな感じに横幅と高さを変えることができました。

「width: 横幅;」「height: 高さ;」と指定することによってできます。

背景の色だけでなく写真などものこれによって大きさを変えることができます。

まだ写真の載せ方は紹介していないですが、めちゃくちゃ簡単です。

 

タグに名前をつけてみる

前の前のブログで紹介した通り

#HTML
<h4>HTML</h4>
<h4>CSS</h4>

#CSS
h4 {
   color: red;
}

こんなコードを実行したら. . .

HTML

CSS

両方とも色が変わってしまう。

任意の場所だけ変える時はどうすればいいか。それを前の前のブログで保留にしていたのですが、今回はそれについて書きたいと思います

そのためにはclassというものを使います。

実際にコードを見てみましょう。

HTML
<h4 class="one">HTML</h4>
<h4 class="two">CSS</h4>
CSS
.one {
   color: red;
}
.two {
   color: blue;
}

これを実行すると. . .

HTML

CSS

できましたね。class使うことによって、それぞれの要素を識別し、それぞれにCSSを適用することができました。

注意点なんですが、CSSでclassを指定して書く際、「.class名 { 〜」とドットを忘れないようにしてください。

HTMLとCSSの旅(5)

文字の大きさを変えてみる

前回はテキストに色をつける方法を紹介しました。

次は、文字の大きさを変えてみようと思います。

次のコードをみてください。

HTML
<p>テキスト</p>
CSS
p {
   font-size: 10px;
}

これを実行すると. . .

テキスト

こんな風に大きさを変えることができました。

「font-size: 大きさ;」となるように任意の数値を入れてください。単位px(ピクセル)を忘れないよう気をつけてください。

 

文字の種類を変えてみる

CSSでテキストの文字の種類を変えることができます。明朝体やゴシック体など。

実際にコードをみていきましょう。

HTML
<h3>ABCD</h3>
CSS
h3 {
   font-family: "Impact";
}

これを実行すると. . .

ABCD

fontが変わりましたね。

「font-family: 書体;」と指定することによって文字の種類を変えることができました。

書体一覧はこちら

 

今までで、色、大きさ、文字の種類の変え方を書いてきましたが、これらを一つのテキストに行う場合どうすればいいのでしょうか。

次のコードをみてください

HTML
<p>ABCD</p>
CSS
p {
   color: red;
   font-size: 20px;
   font-family: "Impact";
}

これを実行すると. . .

ABCD

このように今までやったことをまとめることができます。

HTMLとCSSの旅(4)

CSSに触れてみよう

今まで書いてきたブログは全部HTMLの話でした。

ですので今回は基礎中の基礎ですがCSSに触れていきたいと思います。

実際にこのブログもまだCSSを使って書いていないです。

文字の色を変える

CSSは基盤となるHTMLに付け足す形で使うため、まずはHTMLで基盤を作ります。

HTML
<h3>CSS</h3>
CSS
h3 {
   color: red;
}

これを実行すると. . .

CSS

となります。

HTMLの方でh3で囲った部分の色を変えたいので、CSSの方でh3 {〜　と指定する必要があります。

colorの後に好きな色を指定することで変更することができます。

色の指定方法なんですが、redというように英語で書く以外に、カラーコードというものがネット上に存在しており、そちらでも色を指定することができます。

詳しくはここをクリック

カラーコードで指定する場合は次のようにします

h3 {
   color: #ff0000;
}

もしHTMLの方が次のようになっていた時

<h3>HTML</h3>
<h3>CSS</h3>

つまりh3が二つあった時は次のようになります

HTML

CSS

このように両方とも赤色になってしまいます。

任意の場所だけ色を変えたいときはどうすればいいのでしょうか。

それは次の次の次ぐらいのブログでかけたら良いと思っています笑

HTMLとCSSの旅(3)

リンクを作ってみる

皆さん、ネットで探し物している時とかに、よくリンクになっているテキストみかけますよね。

今回はそれを作ってみようと思います

<a href="URL">テキスト</a>

これだけです。実際に前のブログに飛んでみましょう

前のブログ

どうでしたか。ちゃんと前のブログにいったでしょうか。リンクの作り方は以上です

 

リストを作ってみる

リストとはなんなのか。具体例をあげてみると. . .

こんな感じのものです。

こんなん手入力でいいやんって思うかもしれないけどご勘弁ください笑

コードの書き方ですが次をみてください

<ul> 
    <li>テキスト</li> 
    <li>テキスト</li>
</ul>

<li></li>に囲まれたテキストに黒ポチがつきます。

HTMLとCSSの旅(2)

見出しと段落

まずは初歩の段落の作り方からです。

つぎのコードを見てください。

<h1>ここに文章</h1>

見出しはこれだけです。<h1>が一番大きく、<h6>が一番小さいです。

最後の</h1>のスラッシュを忘れてはいけません。

 

つぎは段落です。

<p>ここに文章</p>

たったこれだけです。

これも同様に最後にスラッシュを忘れてはいけません。

 

最後に

最近全くモチベが上がらず更新してなかったです。

自分はPythonも勉強しているのですが、やっていくうちにHTMLとCSSが必要だって思ったので再開しました。

このブログもHTMLを使って書いているのですが、始めたばっかなので、最初のブログで書いた通りこれを通して勉強できたら良いと思っています。