この記事にはプロモーションが含まれています
PR

htmlとcss初心者がサイトで学ぶ

 

htmlとcss初心者がschooの動画である「HTML・CSS基礎講座」を体験することで、エディターの使用を含め、ホームページを作成することができます。
これを応用すれば、自分のホームページを1から作成することができます。

スポンサーリンク
スポンサーリンク
 

\ 楽天市場セール開催予定 /楽天売れ筋ランキング楽天イーグルス感謝祭 2024/11/14~11/16
楽天ブラックフライデー 2024/11/21~11/27
ふるさと納税もお忘れ無く

htmlとcss初心者がまずすること

職場のホームページの土台は、数年に一回しか更新されません。
土台から作り替えるとすると膨大な時間がかかるからです。
ホームページを作る際、前年度から完全モデルチェンジし、おっと思わせるサイトを作る場合、htmlとcssの理解は必須になります。
もちろん、しっかりとした構想も必要になります。
私は、そのような時、html&css関連の書籍を数冊購入し、いいとこどりをして、サイト完成を目指しました。
しかし、なんとなくhtml&cssを理解しているだけでは、作業がなかなか進みません。
ここを少し変更しようと考えても、こちらが意図したようにならないことが多くあるからです。
単純にcssファイルを結合するだけでは、意図した表現ができず、整合性をとるのがやっかいでした。

最終的には自分の実力を鑑み、できあいのテンプレートを使用してサイトを作成することが普通になりました。
もっぱら使用するテンプレートは、
テンプレートパーティ(https://template-party.com/)からお借りしました。

テンプレートパーティの素材は素晴らしいものです。あっという間に、見栄えの良いサイトの完成です。あとは、中身の充実を図るだけになります。

html初心者がサイトで学ぶ

このたび、デジタル人財の育成の観点から、html&cssの無料の講習会が開かれるということだったので、参加してきました。本来は、有料なのですが、市がその経費を負担してくれているようです。

講師は、弘中明彦先生です。先生のご経歴等は、株式会社ブイク(https://buiq.co.jp/message/)のホームページを見て下さい。

この講座は、schooのビデオを視聴しながら、講師の先生が補足していくという形ですすんでいきます。
全2回の講座で、前半の2回でhtmlとcssの基礎を学びます。
なおこの講座は、会場からオフラインで参加することもできますし、Zoomを使用しオンラインでも参加は可能になっていました。
わたしは初心者ゆえ、落ちこぼれると思いましたので、先生の指導を直接頂ける会場参加にしました。先生に随時確認してもらえるのは大変ありがたいです。
講座の方は、ビデオを見たり、先生の話を聞いたり、PCに打ち込んだりとなかなか忙しい講座ですが、あっという間に講座の時間である2時間が終了します。
講座の会場は、こちらです。この部屋の右奥で行われます。

スポンサーリンク

また講座の時間内にできなかったことについては、slackを使用して、講座のフォローが行われます。また次回の講座のご案内等もあり、連絡ツールが有効に働いています。

htmlとcssをサイトで学ぶ

講座の後に、講師の先生からメッセージが届きますので、そのメッセージをもとに講座の概要をお伝えします。

HTML・CSS基礎|オンライン動画授業・講座の概要

この日に使用した動画は以下のものです。
HTML・CSS基礎|オンライン動画授業・講座のSchoo(https://schoo.jp/course/7289)

動画の講師は、こばやす先生です。
デモサイトを模写しながら基礎的なコーディングスキルを習得する このコースでは初学者向けにHTML・CSSを使ったコーディング方法を架空の料理教室デモサイトの作成を通しながら学ぶことができます。

HTML・CSS基礎|オンライン動画授業・講座の構成

今回の講座は、全10回です。

1コマ目:Webサイト制作の工程とコーディングする前の準備
2コマ目:HTMLコーディング①
3コマ目:HTMLコーディング②
4コマ目:CSSコーディング①
5コマ目:CSSコーディング②
6コマ目:CSSコーディング③
7コマ目:CSSレイアウト レスポンシブデザイン①
8コマ目:CSSレイアウト レスポンシブデザイン②
9コマ目:WEBサイト公開
10コマ目:SEO対策とアクセス対策

HTML・CSS基礎|オンライン動画授業・講座のゴール

HTML・CSS言語の文法ができ、かつサンプルコードが読解出来るようになる。
自分オリジナルのホームページやコーポレートサイト、ビジネスサイトが作成できるようになる。

Visual Studio Code

コードエディターとして使用しているのはこちらの「Visual Studio Code」です。
エディターもたくさん種類はありますが、今もっともエンジニア(特にフロント側)に支持されているのはこちらであると言われていました。
わたしは、秀丸等のものかと思っていましたが、このエディターは、タグ書きに特化しておりサジェストがとてもありがたく、タイプミスを大きく減らすツールだと思いました。

このエディターを受講前にインストールをしました。
ダウンロードサイトは、こちら(https://code.visualstudio.com/) です。

HTML・CSS基礎|オンライン動画授業・講座の実際

この講座は、2日間開催で行われ、1日目に1コマ目から3コマ目の学習を行いました。
そして2日目は、4コマ目~6コマ目の学習を送りました。
初めて使用するエディターであり、少し戸惑うこともありましたが、先生の指示でコピペを駆使することで、htmlとcssの概要を知ることができました。

まとめ

1回の勉強会が2時間、そしてその2回の勉強会で、htmlとcssの基礎を知ることができました。
しかし指示通りに作業しただけで、一旦復習することが必要かと思います。
インプット後には、アウトプットが必要だと感じました。

スポンサーリンク
この記事を書いた人
老いぼれ教師

退職したら、大切なことが2つある。これは、先輩に言われたことです。「教育」と「教養」であると・・・

しかし、よくよく聞くと
今日行くところと今日の用事を作ることが大切とのこと!

そこで、次のことを念頭に置き、このブログを創って行きたいと思います。
教育(今日行く)と教養(今日用)のための覚え書き
教育公務員ならではの第2の人生の歩みをここに記したいと思います。

老いぼれ教師をフォローする
ホームページ
老いぼれ教師をフォローする

コメント

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