ウェブデザインを一緒に学ぼう!1

筆者が現在学んでいる事の1つにウェブデザインがあります。これから少しずつ学びをシェアして行こうかなと思い立ちました。興味のある方は一緒に学んで行きましょう。今回はHTMLとCSSについて書きます。

更新日:2016年10月22日 09時00分

View:435

250px html source code3

出典: ja.wikipedia.org

HTMLとは?

1989年、CERNのティム・バーナーズ=リーは、オリジナルのHTML(および多くの関連したプロトコル、HTTPなど)のメモを提案し、1990年5月にコード化した。

出典: ja.wikipedia.org

HTMLの始まりは1989年でした。当時はまだハイパーテキストマークアップランゲージ(HTML)と言うものではなかったです。簡単に説明すると1990年代から公式な仕様として定義され現在ではHTML5が使われています。詳しい経緯は下にあるWikipediaに任せますが、HTMLは人間のためと言うより検索エンジンにこのサイトが何かを使えるために使われている言語だと言えます。ですから構文が間違っていると検索エンジンに正しく認識されないかもしれません。構文チェックについては後でご紹介します。

CSSとは?

HTMLが建物の構造であると例えるならCSSは内装に当たります。文字を装飾したり、背景に色を付けたりと飾る事に使えます。これは人間がサイトを見た時に分かりやすくするための物でもあると言えます。CSSでアニメーションをつけたりも出来ます。現在はCSS3となって今までは画像加工ソフトでしか表現出来なかった境界線や影もCSSで出来るようになりました。画像を使わない分、サイトの表示速度もアップしているそうです。

ウェブサイトを作るのに必要な物

ウェブサイトを作るのに必要な物は、HTML5とCSS3・画像・テキストです。これに動きを付けるのにjQueryと言う物を使います。画像を回転させたり、マウスを画像の上にすると色が変わったり、いろんな事が出来ます。jQueryのライブラリを見るとスマホに使える物もあります。上に戻るボタンをタップするとサイトの一番上に戻るものとか、ハンバーガーメニューをスルーっと表示させるものなど見ると面白いと思う動きをするものがあります。

もちろん、面白さだけではなくサイトの訪問者にとって見やすく使いやすい表示を実現する物がメインです。

ウェブページを作る

HTML5ではアプリケーションも作る事が出来ますが、このウェブデザインを学ぶ記事ではサイトを作る事だけに焦点を当ててご紹介して行きます。

思い通りのウェブページをHTMLやCSSを使って表現出来たら素敵だなと思います。以前はHTMLを書いた中に装飾に関するCSSを書けましたが現在では役割分担がされています。また以前と同じコードでも意味合いが違っているものもありますので、今後ご紹介して行こうと思います。

構文チェックはここで!

出典: www.jweb-seo.com


今はまだその段階ではありませんが、自分の書いたコードが正しいかどうかを判断するのに良いサイトがあります。HTMLの勧告を行っているサイトW3Cには、構文がチェック出来るサービスがあります。URLを入力する・コードを貼り付けるなどの方法で間違いを教えてくれます。上記の画像の様に赤くなると間違いがあると言う事がわかります。

まとめ

今回はざっくりとHTMLとCSSについてご紹介しました。これから実際に1つのウェブサイトを作りながら、HTMLとCSS,jQueryや画像加工について記事を書いていこうと思いますので、よろしくお願いします。

更新日:2016年10月22日 09時00分

SNSシェアはこちら

このエントリーをはてなブックマークに追加

関連記事

今更だけどEXCELをはじめてみたい。(第4回)

EXCELを始めたいけどどうやって使っていいかわからない。 そんな方のためのページです。 今回は関数についてのお話です…

  • 流羽 海依
  • 424view

パソコンを初期化する前に【Windows】

パソコンの動きが悪く、初期化しようかなと検討することがあるとおもいますが、その際に気を付けておきたいことを、ご紹介します。

  • birdsinging
  • 1005view

今更だけどEXCELをはじめてみたい。

EXCELを始めたいけどどうやって使っていいかわからない。 そんな方のためのページです。

  • 流羽 海依
  • 715view

【気をつけて!】SNSで話題の新手の詐欺が巧妙すぎる…

最近、日本で密かにブームになっている インターネットを使った「副業」 でもそんなブームを逆手に取った 新手の詐欺…

  • こーだい
  • 1302view

ウェブデザインを一緒に学ぼう2 必要な物は?

ウェブデザインに必要な物は何でしょうか?使う画像は?コードを書くツールは?プレビューはどうやって見るのでしょう?

  • ウェブライター天
  • 438view

【必見!】今更聞けない Twitterの仕組み!!

日本で使われているSNSといえば 「Twitter」「Facebook」「LINE」の3つです。 その中でも中高生など…

  • こーだい
  • 765view

無料ブログと独自ドメインブログの違いは?

無料ブログと独自ドメインで作るブログ、何がどう違っているのでしょう?どっちがお得なのでしょう?無料・独自ドメインブログそれ…

  • ウェブライター天
  • 454view

初心者必見☆無料で学べる!トレンドアフィエイトのノウハウ

GoogleAdSenseを使って稼ぐ方法を無料でゲットしませんか?初心者さんが結果を出しやすいネットビジネスの1つである…

  • ウェブライター天
  • 372view

パソコンが重くなった時の対処法は?

家にあるパソコンでいろいろな作業を行うと重くなったり固まって動かなかったりと、使えなくなる時があります。そんな時、自分でメ…

  • ウェブライター天
  • 785view

ライティングに役立つサイト&ツールは?読みやすい文章にする4つのコツ

ライティングをする時に文字数や校正ってどの様にしていますか?現役キュレーションライターが使っているサイトやツールをいくつか…

  • ウェブライター天
  • 808view

カテゴリーピックアップ

感動
ワクワク・ドキドキ♥編集室 396view

アクセスランキング

人気のあったまとめランキング

1

【ファン必見】コナンキャラの愛車たちがカッコいい!

意識高い系オタク★こぷろ

2

【ひまし油の驚きの効果】髪の育毛、顔のシミ、ほくろの除去、ダイエット...

ワクワク・ドキドキ♥編集室

3

手作りを楽しもう 赤ちゃんの『 パンツ ・ ズボン 』

リク母

4

【驚き!】ひまし油がすごい効果!

さくっちょ

5

【びっくり!】”猿腕”と呼ばれる腕の実態

なおキングのブログ

6

【深すぎる】ムーミン谷のミィの名言7選☆☆

リトル☆みっち

7

【両性具有】どれくらいいるの?

さくっちょ

8

コーヒーにハチミツを入れて飲むとこんなメリットが!4選

Yo-ichi

9

【えっ!?】桜って何種類あるの・・・ 桜の種類と開花時期おしえちゃい...

えみりん

10

【この差ってなんですか】下半身が『太い人』と『細い人』の差は子供の頃...

みせす☻まなちる

ランキングをもっとみる

新着のまとめ

最新のトレンドを知るなら、ここをチェック

渡辺直美の美肌はこれで作れる!!最強ファンデ!

さくっちょ

それはかなり危ないんじゃないかい - 脚立編

mare blu

菊芋が糖尿病に凄い効果!血糖値を下がる魔法のパウダーとは?

ワクワク・ドキドキ♥編集室

クジラは人間の声を模倣できる!?

mare blu

【奇跡の瞬間】いやいや、絶妙なバランスだね!

mare blu

【奇跡の瞬間】心にはいつも羽を持ってるんだ!

mare blu

間違えないで! 私の足はこんなに毛深くないからね!

mare blu

大笑いせずにはいられないGIFアニメ -- 動物編

mare blu

話題のキーワード

いま利用されているキーワード

関連記事

この記事に関連する投稿はこちら

今更だけどEXCELをはじめてみたい。(第4回)

流羽 海依

パソコンを初期化する前に【Windows】

birdsinging

今更だけどEXCELをはじめてみたい。

流羽 海依