webデザイナーになりたいIT業界で通用するスキルが欲しい

html&css入門講座

IT・webデザインの全くの未経験の状態から独学でwebサイトをつくれるようになるまでの「力」をつけましょう。執筆は全て現役のwebデザイナーである運営者が行なっています。「実際の現場で通用するスキルをどのサイトよりもわかりやすく解説」というコンセプトをもとにコンテンツを公開していきます。

イラスト
アイコン

【初心者必見】htmlとcssを勉強するための8ステップ!

まずは下の8ステップの記事から学習していきましょう。独学でwebサイトを作れるようになるための基本の”き”の部分です。効率よく学習するためにこの8ステップの記事を最低3周は読んでください。

記事を読むときの心構え

  1. 1周目:なんとなくでOKです。わからないことがあってもあまり深く考えずいきましょう。
  2. 2周目:頭で考えながら読み進めましょう。
  3. 3周目:自分の理解したことと本文の内容が正しいかを照らし合わせながら読みましょう。

これだけで今後のhtmlとcssの知識の吸収が大幅に変わります。きちんとやりきれば必ずその違いを感じられるはずです!

  • 持っていればスキップ

    1webサイトをつくるために必要な2つのツール「webブラウザ」と「テキストエディタ」を用意しましょう。記事の内容は深く読まず「ダウンロードだけでOK」です。DLしたら次のステップへ進みましょう!

  • 続きを読む

    所要時間の目安:10分【基本のき】ホームページの仕組みをイラスト付きでまるっと解説!

    2webとはそもそも何か?というテーマをもとにハイパーリンク / サーバー / ドメイン / IPアドレスといった専門用語の解説をしていきます。webサイトが表示される仕組みや流れも学習することができます。

  • 続きを読む

    所要時間の目安:10分webサイトのフォルダ構造(ディレクトリ)やファイルはどうなっている?

    3webサイトはどんなファイルから作られているのか?というwebサイトのフォルダ構造について学習していきます。

  • 続きを読む

    所要時間の目安:15分【完全初心者】HTMLとは何か?をイラストを使って解説

    4webサイトの骨組みとなるHTMLとは何か?を簡単に理解しましょう。(※ここでは実際に書く必要はありません。HTMLをなんとなく理解しましょう)

  • 続きを読む

    所要時間の目安:30分【HTML入門】イラスト付き解説とサンプルの練習で基本を身につける

    5それではHTMLの基本的なタグを書いて覚えましょう。1つ前のステップと内容が被る部分がありますが、復習の意味合いも兼ねて読むのがオススメです。

  • 続きを読む

    所要時間の目安:30分【完全入門ガイド】cssの書き方をイラストを使って解説

    6webサイトの見た目(デザイン)を調整するCSSを学んでいきましょう。セレクタ / プロパティ / 値などの用語解説から基本的な使い方などをサンプルを実際に書いて覚えていきます。

  • 続きを読む

    所要時間の目安:10分【イラスト解説】divに付いているidとclassの意味と使い方

    7html / cssの基本で出てきたidとclassについてさらに詳しく解説していきます。少し難しいですが必ず使いこなして欲しいものなので頑張りましょう。

  • 続きを読む

    所要時間の目安:10分【テンプレコード付】HTMLのheadとは?どんなことを書くのがベスト?

    8htmlの基本で出てきたwebサイトの情報を書くheadタグについて具体的に解説します。ファイルの読み込みなどを行うhtmlの「脳」のような役割を行う部分なのでしっかり覚えましょう

8ステップを終えたら「脱・初心者」を目指そう!

基本の8ステップを終えたらhtmlとcssの基本の”き”はOKです。ここからは「脱・初心者」を目指して実際の現場でよく使用されるHTMLのタグとCSSのプロパティの使い方をマスターしていきます。記事の並んでいる順番で学習していくのがおすすめですが、どれも必須の内容なので自分の興味のあるものからスタートしていってもOKです。webデザイナーとしての新しい一歩を踏み出しましょう!

  • 【コピペOK】CSSだけで実装できるおしゃれテーブルデザイン10つ

  • 【テンプレコード付き】HTMLのheadとは?どんなことを書くのがベスト?

  • 【初心者向け】0からformがわかる|HTMLでのフォーム作成

  • HTMLの説明リストタグ【dl・dt・dd】の使い方を徹底解説

  • リンクタグのCSSまとめ!リンクの色の変更やオシャレな装飾方法を紹介

  • HTMLのリンク作成|リンクタグの使い方と【a href】の意味を優しく解説

  • cssのコメントアウトの書き方〜制作現場での使用サンプルを紹介

  • 【イラスト解説】divに付いているidとclassの意味と使い方

  • 【完全入門ガイド】cssの書き方をイラストを使って解説

  • 【完全初心者】HTMLとは何か?をイラストを使って解説

  • 【完全ガイド版】Google Chromeのダウンロード方法と使い方

  • 【完全ガイド版】Sublime Textの使い方と設定方法を徹底解説!MacとWindowsどちらも対応!

  • 【HTMLのテクニック】インデントを覚えてコードを綺麗に見せよう

  • 【HTMLのテクニック】コメントアウトを覚えてコードを見やすくしよう

  • すぐわかる!htmlでスペースや空白を入れる正しい方法

  • 【初心者向け】絶対パスと相対パスの違いをイラストを使って解説!

  • webサイトのフォルダ構造(ディレクトリ)やファイルはどうなっている?

  • 入れ子構造をイラストを使ってわかりやすく説明!

  • マークアップの意味とマークアップ言語の種類について

  • 【初心者向け】HTMLのimgタグを使って画像を表示する方法

1 2
トップへ戻る