Sponsored Link
前回の講義内容は覚えてますか??
それぞれの言語の役割やhtmlタグの「開始タグと終了タグ」の理解、またよく使うhtmlタグの解説を行いました。
今回はcss文書ファイルのコーディングの基本的な考え方と記述方法を解説していこうと思います。
また今回からCodePenによるコーディング練習を行いたいと思います。
この記事の目次
コーディングの基礎 cssの基本的な考え方と記述方法
以下の記事をCtrl + クリックください。
CodePenを使ってコーディングの練習や課題の提出を行おう
さてこの授業ではコーディングの練習かつ課題提出を行うためにCodePenというWebサービスを使います。
CodePenは、初学者がコーディング学習を手軽に始めることができる無料のWebサービスです。
CodePenの登録
CodePenの概要を説明したいところですが、使用のために登録が必要です。
Googleアカウントがあればすぐに始めることができますので、
早速以下の記事を参考にGoogleアカウントを使って登録作業を行いましょう。
CodePenとは
では以下の記事でCodePenの概要を確認しましょう。
CodePenの課題提出方法
次に肝心の課題提出方法について案内しておきましょう。
コーディング課題
今回から練習としてコーディング課題を行なっていきます。
課題の手順
手順は以下。
- CodePenログイン手順を参考にCodePenにログインする。(※ログイン済みの場合は不要)
- CodePenのページをウィンドウの右上のリンクをクリックして開く。
- ①で開いたページのPenをForkする。
- HTMLの枠上部のコメント(<!–から–>までのこと)の指示を確認し、コーディングを行う。
- CSSの枠に上部のコメント(/**から**/までのこと)の指示を確認し、コーディングを行う。
以上です。
課題のページ
以下のウィンドウ右上の「EDIT ON CODEPEN」をクリックしてページを開き、
上記「課題の手順」を参考に課題を行い提出しましょう。
See the Pen CodePen Home Coding Basic / description method No.0 by 脇坂基徳 (@rvyolqet-the-vuer) on CodePen.
課題の提出
では課題の提出を行いましょう。
- Forkした課題のPenのURLをコピーする。
- 下記フォームの該当の入力枠にコピーしたURLをペーストする。
では、以下のフォームの必要項目に記入を行い、送信を行ってください。
通常通り、提出期限は来週の授業開始までとします。
まとめ
CodePenはテストした結果がすぐに見て取れるコーディング練習に特化したWebツールです。
初回での案内の通り、コーディング練習をCodePenで、実際のWebサイトコーディングをPCのVisual Studio Codeというソフトを使って行います。
コーディングは多くの学生が最初のハードルを高く感じてしまうものですが、
練習特化のCodePenで行った記述はVisual Studio Codeでもそのまま流用できます。
キーボードをカタカタするのがとにかく楽しくて、苦にせずに何時間でもできる人は、
コーダーとして優れた才能が潜んでいるかも??かもしれませんね。
