プログラミングを一度挫折した大学生がHTML、CSSに手を出した話・その2

プログラミング

前回の記事を見ていない人がいればまずはそちらからよろしくお願いします。

前回、教材として本を買ったわけなんですが、まずはこれを読み進めていきます。

チャプター7までありますが、本日読んでいくのはチャプター1。

チャプター1ではプログラミングをしていくのに必要な基礎知識をまとめているようです。

チャプター1で学んだ事


このチャプター1を読んで、学んだこと、ダウンロードしたものなどを書いていきます。

なにを目だたせるか


簡単にいうとそのWebページでなにをしたいか、ユーザーになにをさせたいかですね

とにかくその製品やサービスを目立たせたいのか、ユーザーに見やすくできているか、配色は適当か。

目立たせたいものを明確にするという点では、プレゼンでもよく使いますよね。自分が思うより、1.25倍くらいフォントを大きくするなど、その辺りのテクニックは使えそうです。

読みやすいものにする


これも当たり前といっちゃ当たり前ですが、意外とできていませんでした。

結論を先にいう、なるべく簡単な言葉、簡潔にまとめるなど。

またページを操作する際にその動作月日にどんなアクションを起こすのかをわかりやすくするのが大事だとのことです。

Webページを作成する上で必要なもの


Webページを作成する上で必要なものとしては

  • サイトマップ:ページ同士の繋がりや重要度などの構成を図にまとめていくこと
  • ワイヤーフレーム:1つのページで作成するデザインの骨組みのこと

この2つが必要です。

紙とペンで作ってもいいとのことですが、今回は良さそうなものを紹介していたのでそちらを紹介

  1. Cacoo(web上)
  2. Adobe XD(アプリ)

こちらの二つがいいとのことです。

Cacooは6枚まで無料でシートが作成できるオンラインツールです。

Adobe XDは無料で使えるグラフィックツール。ワイヤーフレームだけでなくデザインカンプまで作成できるアプリですね

HTML、CSSとは


読み進めていくとやっとHTML、CSSという単語が目に入ってきました。

ここでやっと「HTML、CSSって結局なんなんだろう」という疑問が解決できました!

  • HTML:Webページの表示したい文章や、画像などを記述する言語
  • CSS:HTMLでは配置や色、文字サイズなどは反映できないため、装飾を行うためのもの

自分はこんな感じで理解しました(有識者から見たら違うぞーって言われそうですが、、、)

次はドメインとレンタルサーバーの話だったので省略、、、

レンタルサーバー・ドメインってなに?っていう方がいればこちらを参考にしてみてください

テキストエディタ・ブラウザの導入


こちらも一度やったことがあるので省略、、、

ちなみに管理人はビジュアルスタジオを使っています。

テキストエディタってなにっていう方向けに簡単に説明するとプログラミングを書くためのキャンバスのようなものです。

もともとパソコンについている「メモ帳」のようなものを使ってもいいそうですが、上記で紹介した、プログラミング専用のテキストエディタの方が絶対に便利ですので必ずなにかしらのテキストエディタをダウンロードしましょう。

ブラウザに関してはGoogleChromeを導入しました

ブラウザは書いたプログラミングコードがちゃんと形になっているのか確認するためのテスターのような感じです。

SafariとかMicrosoft Edgeなど色々ありますが特にこだわりがなければGoogle Chromで大丈夫です。

導入終了、やっとスタートライン


ということでチャプター1終了です。

やっと導入が終わりました。これからコードを書いていくパートに入っていきます。

まだまだスタートラインに立ったばかり、これから私はプログラミングを勉強していけるのでしょうか

次回はいよいよコードを書いていくチャプター2に入っていきます。

ここまでお付き合いありがとうございました

次回までに管理人が逃げ出さないように監視をお願いします

次回:やっとコード書き始めるぞ

↓使用した教材はこちら↓
1冊ですべて身につくHTML & CSSとWebデザイン入門講座

コメント

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