web好きを生産するオウンドメディア
web好きを生産するオウンドメディア
html&css入門講座
IT・webデザインの全くの未経験の状態から独学でwebサイトをつくれるようになるまでの「力」をつけましょう。執筆は全て現役のwebデザイナーである運営者が行なっています。「実際の現場で通用するスキルをどのサイトよりもわかりやすく解説」というコンセプトをもとにコンテンツを公開していきます。
まずは下の8ステップの記事から学習していきましょう。独学でwebサイトを作れるようになるための基本の”き”の部分です。効率よく学習するためにこの8ステップの記事を最低3周は読んでください。
記事を読むときの心構え
これだけで今後のhtmlとcssの知識の吸収が大幅に変わります。きちんとやりきれば必ずその違いを感じられるはずです！
1webサイトをつくるために必要な2つのツール「webブラウザ」と「テキストエディタ」を用意しましょう。記事の内容は深く読まず「ダウンロードだけでOK」です。DLしたら次のステップへ進みましょう！
2webとはそもそも何か？というテーマをもとにハイパーリンク / サーバー / ドメイン / IPアドレスといった専門用語の解説をしていきます。webサイトが表示される仕組みや流れも学習することができます。
3webサイトはどんなファイルから作られているのか？というwebサイトのフォルダ構造について学習していきます。
4webサイトの骨組みとなるHTMLとは何か？を簡単に理解しましょう。（※ここでは実際に書く必要はありません。HTMLをなんとなく理解しましょう）
5それではHTMLの基本的なタグを書いて覚えましょう。1つ前のステップと内容が被る部分がありますが、復習の意味合いも兼ねて読むのがオススメです。
6webサイトの見た目（デザイン）を調整するCSSを学んでいきましょう。セレクタ / プロパティ / 値などの用語解説から基本的な使い方などをサンプルを実際に書いて覚えていきます。
7html / cssの基本で出てきたidとclassについてさらに詳しく解説していきます。少し難しいですが必ず使いこなして欲しいものなので頑張りましょう。
8htmlの基本で出てきたwebサイトの情報を書くheadタグについて具体的に解説します。ファイルの読み込みなどを行うhtmlの「脳」のような役割を行う部分なのでしっかり覚えましょう
基本の８ステップを終えたら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タグを使って画像を表示する方法
