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

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

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

View:292

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

  • 流羽 海依
  • 219view

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

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

  • birdsinging
  • 713view

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

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

  • 流羽 海依
  • 228view

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

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

  • こーだい
  • 896view

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

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

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

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

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

  • こーだい
  • 560view

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

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

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

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

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

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

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

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

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

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

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

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

カテゴリーピックアップ

アクセスランキング

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

1

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

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

2

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

さくっちょ

3

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

さくっちょ

4

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

リトル☆みっち

5

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

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

6

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

リク母

7

知ってた!?マックのコーヒー、お代わり出来るってよ

Yo-ichi

8

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

なおキングのブログ

9

【イマ流行!!】「ナイキ エア ハラチ」とは?

イタチ

10

【簡単!】1つの端末に2つLINEをインストールする方法~andro...

こーだい

ランキングをもっとみる

新着のまとめ

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

知り合ったばかりのデートで沈黙した時の話題7つ

恋愛研究室

今がチャンス!ビットコインを超える市場の暗号通貨(仮想通貨)ノアコイ...

あっくん丸

「映画」と「音楽」-- この2つの会員特典に驚愕! Amazonプライム

mare blu

えっ、東京都なの!? 青ヶ島村? 聞いたこともないな -- 海外から...

mare blu

「切腹」と紅葉狩りや花見の間には深い関係が!? 根底にあるのは日本人...

mare blu

職場恋愛・社内恋愛あるある

恋愛研究室

【語源】を知れば楽に増やせる【英単語】Proceed・Exceed・...

NO. U-12289

男兄弟が居る女性の魅力5つ

恋愛研究室

話題のキーワード

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

関連記事

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

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

流羽 海依

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

birdsinging

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

流羽 海依