SSブログ

HTML/CSSをYoutubeの動画で学ぶ [パソコン・ネット]

HTMLとCSS

HTML(HyperText Markup Language)とCSS(Cascading Style Sheets)といえば、サイト(ブログ)を構成する車の両輪です。最初から作るだけでなく、すでにあるものをカスタマイズするときのためにも覚えておきたい技術ですが、ではどうやって覚えるか、Youtubeには、わかりやすい無料動画がたくさん公開されています。


HTMLとCSSはウェブ開発において非常に重要な役割を果たすテクノロジーです。HTMLはウェブページの構造を定義するために使用され、CSSはウェブページのスタイルやデザインを定義するために使用されます。これらの技術を学ぶことは、ウェブ開発者にとって非常に重要です。

Youtubeには、HTMLとCSSを学ぶための多くの無料の動画チュートリアルがあります。これらの動画を使って学ぶことは、非常に効果的であり、オンラインでの学習にとって非常に適しています。

以下に、HTMLとCSSを学ぶための手順をいくつか紹介します。

基本的なHTMLの構文を学ぶ
最初に、HTMLの基本的な構文を学ぶ必要があります。HTMLは、タグを使用してウェブページの構造を定義します。HTMLのタグには、開始タグと終了タグがあります。開始タグは、<タグ名>の形式で書かれ、終了タグは、の形式で書かれます。タグの中には、属性を指定することができます。属性は、タグの機能をカスタマイズするために使用されます。

CSSの基礎を学ぶ
次に、CSSの基礎を学びましょう。CSSは、ウェブページのデザインを定義するために使用されます。CSSは、HTMLのタグにスタイルを適用することで、ウェブページを装飾します。CSSは、セレクタとプロパティのペアで構成されます。セレクタは、スタイルを適用するHTML要素を選択し、プロパティは、その要素に適用するスタイルを定義します。

オンラインの動画チュートリアルを使用する
多くのオンラインの動画チュートリアルがあります。これらの動画は、非常にわかりやすく説明されており、実践的な例も含まれています。動画チュートリアルを使用することで、HTMLとCSSの基本的な概念を簡単に学ぶことができます。

実際に手を動かして学ぶ
HTMLとCSSを学ぶためには、実際に手を動かして学ぶことが重要です。例えば、簡単なウェブページを作成して、HTMLとCSSを使用して装飾することができます。

といったことを踏まえた上で、以下をお読みください。

ノーリスクでチャレンジできる


昨今、スマホによるサイト(ブログ)閲覧者が急増したため、テンプレート(テーマ)を「レスポンシブWebデザイン」に変更する人が増えてきました。

レスポンシブWebデザインというのは、パソコンやスマートフォン、タブレット端末など、複数の機器や画面サイズに対応できるように作られたテンプレート(テーマ)です。

残念ながら、So-netブログを含む一部の無料ブログは、レスポンシブWebデザインが自動的には表示されず、通常はパソコン用のデザインとスマホ用のデザインが異なるのですが、ただしSo-netブログは、閲覧者が手動で、パソコンに表示されるデザインと同じファイルをスマホでも表示できる、いうなれば準レスポンシブWebデザインがあり、実際にそれを使っている方もおられます。

そして、So-netブログの場合、HTML(テンプレート)とスタイルシートを、自分で編集することができます。

ということは、自分でデザインしたレスポンシブなWebデザインで自分のブログを見せることができるわけです。

といっても、自作はなかなか敷居が高いですよね。

私も、日々の更新が精一杯で、5年前にテンプレートを入れ替えてからほったらかしです。

でも、プログラムの技術の進歩や流行もありますから、たまには手直ししたり、リニューアルしたりといったこともできたほうが望ましいですよね。

では、どうやってそれらをできるようにしましょうか。

そんなとき、ノーリスクでチャレンジできるのが、ネットに発表されているレクチャーコンテンツです。

サイト(ブログ)は、いろいろむずかしい専門用語が書かれていて読みづらいということなら、Youtubeにある、動画で「ウォーミングアップ」をされてはいかがでしょうか。

私は、HTML/CSSにかぎらず、わからないことがあると、Youtubeの関連動画で勉強し直すことが少なくありません。

スポンサードリンク↓

お勧めの動画講座


Youtubeには、動画と音声を使ったレクチャーものが数限りなく公開されています。

その中で、HTMLやCSSについて解説されているものも少なくありません。

Youtubeですから、もちろん無料で誰でもいつでも観ることができます。

無料だからと侮れない完成度の動画もたくさんあります。

どうして、無料でレクチャー動画を公開しているのか。

そこから、その人のサイトに来てもらって、何かのセールスがある場合が多いのですが、自分自身の知識を整理するなど、「物売り」とは限らず、そのへんは一概には言えません。

ただ、いずれにしてもYoutubeの動画を見るだけなら無料ですから、心配はいりません。

ということで、以下は私がおすすめの動画です。

30分でわかる!かもしれないHTML/CSS入門講座




これは、サイト作成に関心はあるけれどできるかな? と思っている人に必見の動画です。

田中祐介氏が、エディタソフトに入力されている、ありふれた文章に次々タグを付けて、ブラウザで開けるとホームページとして表示されます。

さらに、そのデザインについてスタイルシートに次々記述して、2カラム(本文とサイドバーの2段構成)のホームページとして完成させます。

とくにスタイルシートについて、「なにが書かれているかちんぷんかんぷん」と思っている人は、「なるほど、スタイルシートというのはこういうものか」と、敷居がぐっと低くなるでしょう。

HTML/XHTML/CSS講座-第1回(全12回)



HTML/XHTML/CSS講座

これも、発表者のアカウントは田中祐介氏です。

HTMLやCSSが使えると、「すぐにプロレベルのホームページを自分で作ることができる」といいます。

こちらは、全12回で解説されており、本格的です。

第1回 基礎から覚えたい人のためのCSS入門講座




無料のオンラインスクールであるSkillhub[スキルハブ]の講座です

HTML5による、よりセマンティックなマークアップを学ぶ構成です。

超初心者のためのHTML × CSS講座!ワードプレスブログをカスタマイズしてみよう!




渚ひろし氏の講座で、タイトル通り、キーワードは、「超初心者」と「カスタマイズ」。

既存のテンプレートをカスタマイズできるようにしましょう、という眼目です。

たとえば、So-netブログのユーザーが、最初から作るのではなく、現在使っているテンプレートとスタイルシートを少しだけ手直ししたい、という場合には、渚ひろし氏の講座が最適ですし、本格的に学習するためのきっかけとするなら、「HTML/XHTML/CSS講座-第1回(全12回)」を閲覧されることをおすすめします。

せっかく公開されているものですから、叡智はどんどん共有しちゃいましょう。

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)

  • 作者: エビスコム
  • 出版社/メーカー: ソシム
  • 発売日: 2014/10/28
  • メディア: 単行本



nice!(286) 
共通テーマ:パソコン・インターネット

nice! 286

Facebook コメント

Copyright © 戦後史の激動 All Rights Reserved.
当サイトのテキスト・画像等すべての転載転用、商用販売を固く禁じます