ホームページをつくろう!③

記事
デザイン・イラスト
こんにちは、Webデザイン企画 palletpallet の「パレット」です。

今回は、「コーディング」と「テスト」についてお話します。
「コーディングって何か難しそう、、」
「なんかカタカナ出てきた、、」
という方でも大丈夫です!

少しずつ知るだけでも、
着実にホームページ作成にくわしくなっていきます!
難しいところは、実際にやりながら覚えていくものです。(私も)


3: コーディングとテスト

ステップ1: HTMLとCSSの基本を学ぶ

ホームページを作成するためには、
HTMLとCSSの基本を学ぶ必要があります。

HTMLはコンテンツの構造を定義し、
色塗りできるHTML角アイコンのイラスト|ぬれよん-ぬれるフリーイラスト
CSSはデザインやスタイルを指定します。
色塗りできるCSS角アイコンのイラスト|ぬれよん-ぬれるフリーイラスト
イメージ的には、HTMLで文章を書いて
CSSでその文章に色をつけたり、レイアウトしたりする感じです!

基本的なHTMLタグやCSSプロパティについて学び、
ウェブページの基本的な構造を作成しましょう。
▼と、書きましたが

今はHTMLやCSSの知識がなくても
ブロックをはめ込んでいくように視覚的に
ホームページをつくることができます。

知っていると何かと便利ですが、
Wordpressや10Webで簡単につくるときは必要ありません(^^)



ステップ2: 必要なコンテンツを作成する

HTMLとCSSの基礎が身についたら、実際のコンテンツを作成しましょう。

先にプランニングしたコンテンツを元に、各セクションやページのHTMLコードを作成します。
このコードを書いていく作業を、コーディングといいます。
英数字がわ~っと羅列してあるやつですね。▼


<html>
 こうやって、はじまりのタグ(<>)とおわりのタグ(</>)で囲います
</html>


文章や画像、動画などのコンテンツを適切なタグでマークアップし、CSSを使用してデザインを適用します。
ウェブサイトのイラスト | かわいいフリー素材集 いらすとや

また、ウェブサイトのユーザビリティを向上させるために、ナビゲーションやリンクの機能も追加しましょう。


ステップ3: クロスブラウザのテストと修正

ホームページを完成させたら、さまざまなブラウザやデバイスでの表示をテストしましょう。

異なるブラウザやバージョンでの表示の違いやレスポンシブデザインの動作を確認します。
レスポンシブデザイン イメージ イラスト素材 [ 4950809 ] - フォトライブラリー photolibrary
表示に問題がある場合は、
ブラウザごとに対応策を見つけて修正しましょう。

また、ユーザーエクスペリエンスを向上させるために、
ナビゲーションの使いやすさやページの読み込み速度などもテストして調整しましょう。

いかがでしたか?

「よく分からないけど、なんとなく分かった・・・!」
これが結構大切です。

ホームページをつくるのは、
今まで使っていない知識を使うので、正直大変な部分はあります。

でも覚えてしまえば案外簡単につくれるようになるものです。

最初は頭がぐるぐるするかもしれませんが、
次に同じ内容を聞いたら
「あ、それね!知ってる知ってる!」
となるはずです。

少しずつ知識をたくわえて、
素敵なホームページをつくる準備をしましょう!

次回は「ホームページをつくろう!④」です



サービス数40万件のスキルマーケット、あなたにぴったりのサービスを探す