初心者が簡単にHTML、CSSを学ぶ手順を自分のおすすめ方法で情報発信します!1

おすすめ情報
打ち込み

初心者だった僕が、独学で無料で学んできた自分の分かりやすいと思った方法。簡単にHTML、CSSを学ぶおすすめの手順を皆さんに情報発信します!

独学で勉強したけど、いまいちわからない人の為に、
「どうやったらやりやすくホームページが制作できるのか」を意識して、出来る限りわかりやすい方法で載せていこうと思います。

とはいえ、僕も初心者と大差ないので探り探りな感じになってしまうかもしれない(笑)
まあ、僕自身、初心者抜けたくらいなので、初心者の気持ちはわかります。

その点を踏まえ、試行錯誤、一緒に勉強していきましょう!

まずは、HTMLの基本構造です。

htmlにコードを記述していくわけですが、基本となるコードを復習しましょう!

絶対的な記述するコードはこちら↓

<!DOCTYPE html> ←HTMLで作成するという宣言

<html lang=”ja”>  ←日本語の指定

<head> ←meta要素やページタイトル、css等スタイルシートリンク場所   

<meta charset=”UTF-8″> ←文字コードの指定

<title> タイトル </title> ←ページタイトル

</head>

これがコードの基本的な記述内容です。

この構造を覚えておきましょう!

次は、 body の中身を勉強していきましょう!
今回は、このようなサイトを作っていきます。

まず、header です。
ロゴ、タイトル、ナビゲーション等をここに入れていきます。

次にmain
ホームページの本文。主に伝えたい内容を記述。

sidemenu
ここは人によって変わってきます。メニューだったり、リンク、記事など。

footer
会社の情報や問い合わせ、プライバシーポリシー、SNSリンクなど。

作るサイトによって色々と変えていきますが、この構造を理解して作れるようにすれば、違うデザインでも応用がききますので、頑張って手順通り作れるようになっていきましょう。

Pro講座 短期集中

コードをどこに記述していくのか?
コードはパソコンに初期搭載されているメモ帳でも出来ますが、
効率的にコードを入れてサイト作成したいのなら、「HTMLエディタ」を使うことをおすすめします。

プロのエンジニアもこの「HTMLエディタ」を使って仕事をしています。

僕が使っているエディタは、

「Atom」

というものです。
基本無料で使用でき、コードもわかりやすく色分けされるため、混乱せずに進めることが出来ています。よく使うタグなどは頭文字を入れると自動入力できるため、コードの入力時間を短縮することが出来ます。使いやすいのでこの「Atom」はおすすめです。

CSSのテキストも同時に見ながら作業出来るのでとてもやりやすいです。

追加機能を無料インストールすれば、
特定のショートカットキーを押すだけで、サイトデザインをプレビューすることも出来ます。

ATOMの場合は、Ctrl+Shift+H を押すと見ることが出来ます。

↓次のパートで設計しながら説明しますが、このエディタでHTML、CSS、サイトプレビューを同時に見ながら作業できます。

では、この「ATOM」を使ってサイト制作やっていきましょう!

まずは、サイト制作の素材を入れるフォルダをディスクトップに作ります。

フォルダの中にHTMLファイルとCSSファイルを作ります。

これはメモ帳を新規で作って、名前を「style.html」と「style.css

」とします。

出来たら、「ATOM」を起動。

ATOMの中にこのテキストをドラックして入れます。

手順がここまでくれば、コードを打ちこんでいくだけ!

とりあえず、長くなりそうなので続きはパート2に情報発信していこうと思います。勉強したい人は一緒にお付き合いください!(^_^)ノシ

こちらのページでは副業を色々と紹介しています。興味のある人は、是非ご覧ください。

タイトルとURLをコピーしました