フリーランスwebデザイナーのwebデザインブログ

ちいさなwebデザインブログ CHIIWEB BLOG

①そもそもコーディングって何?–はじめてコーディング–

初心者さんの為のコーディングレッスン〜はじめてコーディング〜

この記事を書いている人

Marie

Marie

  • フリーランスwebデザイナー&講師
  • 2児ママ
  • 制作会社・インハウスデザイナーを経験し独立
  • オンラインwebデザイン教室ちいウェブ運営
  • 仕事の合間の息抜きに植物を育てています♡
もっと詳しくみる

コーディング入門に役立つような投稿をスタートします

はじめてコーディング

①そもそもコーディングって何?now

コーディングに必要なもの

③実践コーディング編 HTML

④実践コーディング編 CSS

⑤実践コーディング編 レスポンシブ

コーディングが本当に”初めての方“が、コーディングができるようになるまでの手助けになるような記事を投稿したいですプロフィールイラスト

そもそもコーディングって何?

コーディングとは、デザインツールで作成した「デザイン」をコードで組み立てていくことです。

Webサイトは、デザインを作って、その画像1枚を貼り付けて終わりという訳ではなく、htmlというコードで組み立てられています。

例えば、このようなデザインがあるとします。

このデザインは、リンクを貼る箇所やお問合せフォームがあります。

このままサーバーに画像をアップロードしただけでは、リンクやお問合せフォームを動かすことができません。

そこで、htmlというコードで、適切な意味を示してマークアップする作業が必要です。

それが、コーディングです。

それぞれが何を表しているのかをhtmlでしっかりと伝えなければいけません。

デザイン画像1枚の状態だと、その画像内の一箇所だけにリンクを貼るという実装も面倒になりますし(できなくはない)、お問合せフォームに入力してもらうのは難しいと思います。

デザインを分解し、デザイン通りに組み立てていくのです。

Webサイトの完成までには、意味を持たせてコードを書いていく(=サイトを作っていく)という、コーディングが必要になります。

最近は、ノーコードでサイトが作成できるサービスが増えていますが、それは、”既にコーディングしてくれている”という感じなので、コードが不要という意味ではありませんので、ご注意くださいましちゅ

HTMLを使ってマークアップする

さっきから出てきているhtmlとは何ぞやというところを見ていきます。

htmlとは、ハイパーテキスト・マークアップ・ランゲージ(Hyper Text Markup Language)の略で、Webサイトの構造を作るために使うコードです。

例えば、Webサイトは、段落、リスト、画像、テーブルなどさまざまな組み合わせで構成されています。

デザインで分解した”画像”や”テキスト”をhtmlを使ってマークアップし、形作っていきます。

「これは段落ですよ〜」「これは画像ですよ〜」「これは箇条書きリストの1つですよ〜」等を示すんです。

html要素にどんなタグがあるのかは、コーディング実践編で具体的に見ていきたいと思います。

そして、コーディングは、htmlだけでは仕上がりません。

htmlに加えて、cssというスタイルを指定する為のコードを書きます。

cssを使って形を整える

cssとは、カスケーディング・スタイル・シート(Cascading Style Sheets)の略で、htmlでマークアップした要素をデザイン通りの場所に配置したり、整えたりする為に必要です。

htmlでは「これは段落ですよ〜」「これは画像ですよ〜」と記します。

何もしなければそれらは順番通りにそこに存在するだけです。

それを「あなたはこの色です」「あなたはこの大きさです」と指定するのがcssなんです。

なので、htmlとcssはセットで使います。

両方必要です。web designer

結論、コーディングとは

コーディングとは、htmlとcssを使って、コードでデザインを組み立てていくことですね。

詳しくは、コーディング実践編にて実際にコーディングをしていきましょう。

コーディングを始める前に、タグを覚えていくのも良いですし、知識のないまま早速コードを真似して書いて行っても良いと思います。

次回の記事は、”コーディングに必要なもの”です。

コーディングを実際に行う時に必要なツール等を紹介しようと思います。

①そもそもコーディングって何?now

②コーディングに必要なもの(デザイン、コーディングエディタ)

③実践コーディング編 HTML

④実践コーディング編 CSS

⑤実践コーディング編 レスポンシブ

コーディング学習にオススメの本

以前に生徒さんから「コーディングでオススメの本ありますか?」と聞かれた時に、コーディング本を色々読んでみました。

その中でも、この本は、Webサイト制作の流れから、コーディングの具体的な方法まで書いてあります。

この1冊を何度か繰り返すことで、コーディングやサイト制作の理解が深まると思いましたので、オススメします。

私の生徒さんの中でも、既にこの本を持っている方が何名かいましたプロフィールイラスト

とても人気な本ですbook

最近は、YoutubeやUdemyで、たくさんの動画を見ることができるのですが、私は動画が苦手なタイプで…。

本や文章の方が好きなんです。

先日コミュニティ内でお話していると、同じような方がいらっしゃったので、やっぱり動画見ない派の方もいるんだな、と思いました。

同じように文章派の方にぜひオススメしたいですheart

コメントを残す

CAPTCHA


コメントは承認後に表示されます。

ドメインとサーバー、エックスサーバーで一括管理が便利♪

関連記事