Webデザインを勉強中

Webデザインを独学で勉強しています。調べたことや覚えたことをまとめます。

CSSの適応方法

webデザイン

CSSと書かれた積み木の写真

こんにちは。Webデザイン初心者のmikulonです。 HTMLの基本的なタグはある程度学習できたので、すこしCSSについて独学で学んだ範囲で記事にしてみようと思います。
これまで書いた記事でいたってシンプルなブログ程度はなんとなく作成できますが真っ白でとてもサイトと呼べるようなものではありません。 CSSを適応することでデザインが華やかになり見やすいサイトになります。 CSSはまだまだ使いこなせていないのですこしずつの投稿になるかと思います。

CSSをHTMLへ適応させるには

CSSをHTMLへ適応する方法は主に3つあります。

  • linkタグでフォルダを指定
  • HTMLのheadタグの中に直接記載
  • HTMLの中に実際に記載

これらの方法でCSSを適応させることができます。

linkタグでフォルダを指定

HTMLのheadタグの中にCSSのフォルダをlinkタグで指定して記載します。 「<link rel=”stylesheet” type="text/css" href=filename.css”>」のようにheadタグ内で記載します。（filename.cssにはCSSを実際に記載しているフォルダ名をいれてください。）
試しに書いたものをブラウザで確認した際にCSSが適応されていないなという場合はだいたい、CSSのフォルダ名やタグの綴りをミスしていることが多いのでよく確認して更新をかけてみましょう。フォルダの階層が違う場合は指定先も確認しましょう。
CSSは主にこの手段を使用することが多いかと思います。HTMLの中に記載すると量によってはごちゃっとしてほかの人が見にくかったり、HTMLを書くコーダーさんとCSSを書く人が違う場合もあります。

HTMLをheadタグの中に記載

別フォルダにCSSを記載せずにHTMLのheadタグ内に直接記載することも可能です。 その場合、headタグ内にこのように記載します。 「<style type="text/css"> *{background-color:#red </style>」 この場合は背景色を赤色に指定しています。
色はブラウザや閲覧方法によっては正しく表示されない場合があるためサイトを参考にしてRGB16進数で記載するのがおすすめです。 WEB色見本　原色大辞典へリンクします。

HTMLへstyleを追記して記載する

HTMLに直接記載する方法もあります。 ほんの一部のみCSSを指定したい場合などに使用します。

<h2 style="backgroud-color: #fff8dc;">こんにちは</h2>

この場合記載したH2の見出しにのみバックグラウンドカラーを指定しています。 ひとつだけ別のデザインを指定したい場合に便利ですね。

おわりに

パソコン、タブレット、スマホのイラスト

 

まずはCSSをHTMLへ適応させる方法をまとめました。 CSSは背景色を指定したり、テキストの間隔やフォントを指定したりと見た目を編集して見栄えをよくするために使用されます。CSSを使いこなせればオシャレなブログを作成したりすることも可能です。ぜひ身に着けたいです。

記事ごとのまとまりやタグへの名前の付け方について。

webデザイン

混乱している男性のイラスト

こんにちは。 webデザインを勉強中の初心者mikulonです。
今回はarticle,section,div,span,aside,id,classタグについてまとめます。これらのタグは基本的にHTMLへ打ち込んでも見た目に変化がでないものが多いです。 ですがおしゃれなデザインのサイトを作るためにはぜひ使いこなしたいポイントです。今回も自分なりにまとめてみましたのでどうぞご参考に。

articleタグ

<article></article>タグは主にその記事や内容がページ内で独立しており完結している内容を囲うためのタグです。

sectionタグ

<section></section>タグは見出しとその内容など記事をひとまとめにするためのタグです。h1,h2などの見出しを入れることを強く推奨されています。小説などでいう章にあたります。

divタグ

<div></div>タグはブロック要素を指定するタグです。 divタグで囲った範囲を1つのブロックとして認識します。 クローラーに内容の認識を伝えるタグではないのでCSSで装飾したいときに範囲の指定に使用するのがよいでしょう。

spanタグ

<span></span>タグはブロック要素の中のインライン要素を指定するタグです。

asideタグ

タグではメインで伝えたい内容の補足などについてを主に示します。 spanタグの箇所で記載した「ブロック要素とインライン要素とは・・・・」といったような本筋の補足要素を指定するものです。

id

要素に名前を付けて装飾をしたり、javascriptで指定して動かしたりするためのタグです。 divに名前を付ける場合<div id="text">のように記載します。この場合「text」という名前をdivに付けていることになります。 classと異なり１つしか指定できません。

class

こちらも要素に名前を付けて装飾をしたりjavascriptを動かすときにこの要素を指定するために使用します。idと異なり、複数の要素に同じ名前を付けることができるのでまとめて要素に装飾などを施したい場合に使います。 <div class="block"> <div class="block"> と記載することで2つのdivに対して同時に[block]という名前を付けています

おわりに

見た目で変化が出ないので理解するのに苦労しました。SEO対策の観点からもクローラーにわかりやすいサイトになるためにきっちりと使い分けしていきたいですね。 CSSで装飾を行う際などにも使用します。 いままでだいたいdivで囲ってサイトの試作練習をしていたので今後は反省してこれらのタグを生かしていきたいです。

ブログなどで箇条書きをしたい場合に使うタグ

webデザイン

パソコンにコード映っている写真


こんにちは。mikulonです。今回はnav,ul,ol,liタグについてまとめます。

目的の記事へリンクしたり、複数の要素を並べて提示したい場合などには箇条書きしておきたいですよね。

今回ご紹介するタグで箇条書きでテキスト等を並べることができます。

CSSを使用することで縦書きだけでなく横書きにしてカテゴリ毎にリンクしたりもできたりします。（今回は詳細手順を記載しておりません。）

なにかご参考になれば幸いです。

navタグ

<nav></nav>とはサイトのなかでナビゲーションや目次のことをしめすタグです。 後述するul,olタグと組み合わせてサイト内での他記事へ移動などを行うことができます。 主要なリストへ付けるようにしましょう。

ulタグ

<ul></ul>タグは順序のないリストを示すことに使用します。基本的にリストは箇条書きで示されます。 styleを指定することで文頭に表示される記号を●や◇にすることができます。

olタグ

<ol></ol>は順序のあるリストを示すことに使用します。基本的に上から数字や英語でリストを作成します。styleを指定することでリストの文頭に表示される文字を英語や数字に指定することができます。

liタグ

<li></li>タグはul,olの中に1つのリストとしてテキストなどを表示するために記載します。

今回はリストを作成するタグについて記載してみました。ブログを書いたときにリストで記事の見出しなどへ遷移できると記事の参照がしやすくなりますね。
違う記事ではなく同じ記事内で見出しへ遷移したい場合はclassタグで見出しのh2タグなどに名前をつけてaタグでつけた名前を遷移先へ指定すると記事内で遷移することができるようになります。まだまだいろいろ勉強中なので至らない点が多数あると思いますが参考になりますと幸いです。

テキストの強調や段落の作り方

webデザイン

こんにちは。mikulonです。今回はstrongタグ、bタグ、pタグ、brタグに関して学習した内容を記事にします。

htmlと書かれた積み木

 

strong

書いたものの中で特に緊急性の高い情報や重要なワードを指定します。文字が太字で表示されますがCSSや後述のBタグで見た目は変更可能なので見た目を変化させるタグというよりより強いニュアンスで情報を伝えるためのタグになるかと思います。

b

フォントを太字にします。 先述のstrongタグと異なり完全に見た目だけの変化になるので読者に伝えたい内容を強調することに使用できます。

p

pタグはテキストの段落を示します。内容の分け目などで使用したいですね。

br

brタグは強制的にテキストに改行をさせることができます。 表示するブラウザのサイズによっては意図しない箇所で改行されてくどい表現になってしまうかもしれないので注意しつつ使用しましょう。

これらのタグを打ち込むとこのようになります。

コード入力

 

strongタグ、bタグ、ｐタグ、brタグ

 

ごあいさつ

webデザイン

はじめに

パソコン

みなさんこんにちは。Webデザイナーを目指してHTML,CSSを勉強中の初心者mikulonともうします。独学で勉強していく中で気が付いたことや学習したことについてまとめていきたいと思っています。

HTMLとは

そもそもHTMLとは。『HTML (HyperText Markup Language)』という言語です。 これでwebページの大まかな構造などを作成することができます。タグでテキストや画像を囲んでブラウザ上で表示できるようにします。

タグについて

ブラウザ上で文字や画像を表示したりするために書くコードがタグです。 テキストを表示するために<p></p>と書いたりします。

ちなみにこのPタグは段落を示します。 タグを下記にまとめました。（ほんの一例です。）

<h1></h1>,<h2></h2>~ ,<h6></h6>

このタグは主に見出しに使います。数字が小さいほどテキストが大きくなりますがテキストのサイズはCSSという別の言語で変更することが可能なため Webサイトのクローラー（検索エンジンのbot）に内容を伝えることがメインです。

クローラーに内容を伝えるとブラウザで検索した際により上位に表示されるようになるためSEO（ブラウザで検索されやすくするための方法のこと）として大切になります。 が今回は取り扱わないので閑話休題

    • <h1></h1>

そのサイトのタイトルなどに使用します。一番重要な内容を主にウェブサイトのクローラーに訴えるためにつけます。 複数回使用することも可能ですが基本的にそのwebページ1つに対して１回の使用が望ましいです。

    • <h2></h2>

webページの内容の見出しに使います。このタグを複数回使用することも可能です。

    • <h3></h3>

webページの内容の子見出しに使います。ｈ2タグのさらに中の見出しなどで使用します。

    • <h4></h4>~<h4></h6>

h3よりさらに子要素に使用します。ですが上記で紹介したh1~h3タグの使用が圧倒的に多くこちらのタグはあまり使用されません。

h1タグは以上です。小さい数字から順番に使用します。ｈ1タグは使わずｈ2，ｈ3のみ使用といった使い方もできます。

aタグ

<a></a>タグは別サイトへのリンクやブログ内でのリンクに使用します。
<a href="#">TOPへ</a&;と記載するとブログの一番上へ遷移します。（TOPへの部分は仮テキストなので任意の文字を入れてしまって問題ありません。）TOPに戻る際などに使用できます。 別サイトへリンクする場合は<a href="別サイトのURL">別ページへ</a>

と記載することで遷移先ページへリンクできます。

aタグの後ろにtarget="_blank"を記載するとリンク先ページを新しいブラウザページで開くことができます。リンク元のサイトと別ページでブラウザを開くことができるのでリンク元の自身のサイトへ再度アクセスをしてもらいやすくなります。ただ、アフィリエイトのリンクの場合別ブラウザで展開されると条件達成にならない可能性があるので注意して使用してください。

CSSを利用することでリンクの下線を消したりフォントカラーを変更したり、ボタン風の見た目に変更したりすることも可能です。CSSはそのうち別件でまた記事を記載予定です。

おわりに

ひとまずどうにか覚えたタグを少しだけ紹介してみました。 まだまだ勉強中なのでまた使い方を理解したら記事をあげようと思います。はてなブログ自体が初めてなので色々とつたないかとは思いますが勉強してより良い記事をあげられるように頑張ります。