<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>【初心者】タグの記事一覧｜うがちゃん　blog</title>
	<atom:link href="https://ugachanblog.com/tag/%e5%88%9d%e5%bf%83%e8%80%85/feed/" rel="self" type="application/rss+xml" />
	<link>https://ugachanblog.com</link>
	<description>名古屋から発信してます</description>
	<lastBuildDate>Sat, 19 Feb 2022 10:42:02 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>
	<item>
		<title>HTML＆CSSを学んでみた！</title>
		<link>https://ugachanblog.com/htmlcss-study/</link>
					<comments>https://ugachanblog.com/htmlcss-study/#respond</comments>
		
		<dc:creator><![CDATA[ugachan]]></dc:creator>
		<pubDate>Sat, 19 Feb 2022 12:00:00 +0000</pubDate>
				<category><![CDATA[徒然なるままに]]></category>
		<category><![CDATA[html css　Web 　学習　Progate]]></category>
		<category><![CDATA[Webデザイン　入門　IT知識　ITスキル]]></category>
		<category><![CDATA[初心者]]></category>
		<guid isPermaLink="false">https://ugachanblog.com/?p=1535</guid>

					<description><![CDATA[Webデザインに必要なHTML＆CSS いろいろと手をつけ始めてしまって、なんか中途半端な感じを受けつつ、その中で楽しめることがあればいいかなぁと思っています。あとからつけた言い訳なんですけど‥。今回は、すべてが身につく]]></description>
										<content:encoded><![CDATA[
<h2 class="wp-block-heading" id="webデザインに必要なhtml-css">Webデザインに必要なHTML＆CSS</h2>



<figure class="wp-block-image size-large"><img fetchpriority="high" decoding="async" width="1024" height="768" src="https://ugachanblog.com/wp-content/uploads/2022/02/IMG_9819-1024x768.jpeg" alt="" class="wp-image-1540" srcset="https://ugachanblog.com/wp-content/uploads/2022/02/IMG_9819-1024x768.jpeg 1024w, https://ugachanblog.com/wp-content/uploads/2022/02/IMG_9819-300x225.jpeg 300w, https://ugachanblog.com/wp-content/uploads/2022/02/IMG_9819-768x576.jpeg 768w, https://ugachanblog.com/wp-content/uploads/2022/02/IMG_9819-1536x1152.jpeg 1536w, https://ugachanblog.com/wp-content/uploads/2022/02/IMG_9819-2048x1536.jpeg 2048w, https://ugachanblog.com/wp-content/uploads/2022/02/IMG_9819-scaled.jpeg 700w, https://ugachanblog.com/wp-content/uploads/2022/02/IMG_9819-1024x768.jpeg 856w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>いろいろと手をつけ始めてしまって、なんか中途半端な感じを受けつつ、その中で楽しめることがあればいいかなぁと思っています。あとからつけた言い訳なんですけど‥。<br>今回は、<strong>すべてが身につく「HTML＆CSSとWebデザイン」入門講座　mana（マナ）著　SBクリエイティブ　2,260円＋税</strong>　に挑戦してみました。<br>Webデザインって、ちょっとおしゃれなWordにも惹かれたのですけど‥。ホームページの仕組みなど、わかっていたら役にたつかなぁという考えでスタートさせました。<br>とか言って、このblogは<strong>WordPress</strong>使っちゃっているんですけどね。本当、WordPressって優れものと感じる今日この頃。</p>



<h3 class="wp-block-heading" id="そもそもhtml-cssって">そもそもHTML&amp;CSSって？</h3>



<figure class="wp-block-image size-large"><img decoding="async" width="1024" height="576" src="https://ugachanblog.com/wp-content/uploads/2022/02/5ba897d6d697425ab4b38f14e988b482-1-1024x576.png" alt="" class="wp-image-1544" srcset="https://ugachanblog.com/wp-content/uploads/2022/02/5ba897d6d697425ab4b38f14e988b482-1-1024x576.png 1024w, https://ugachanblog.com/wp-content/uploads/2022/02/5ba897d6d697425ab4b38f14e988b482-1-300x169.png 300w, https://ugachanblog.com/wp-content/uploads/2022/02/5ba897d6d697425ab4b38f14e988b482-1-768x432.png 768w, https://ugachanblog.com/wp-content/uploads/2022/02/5ba897d6d697425ab4b38f14e988b482-1-1536x864.png 1536w, https://ugachanblog.com/wp-content/uploads/2022/02/5ba897d6d697425ab4b38f14e988b482-1-320x180.png 320w, https://ugachanblog.com/wp-content/uploads/2022/02/5ba897d6d697425ab4b38f14e988b482-1-640x360.png 640w, https://ugachanblog.com/wp-content/uploads/2022/02/5ba897d6d697425ab4b38f14e988b482-1-1280x720.png 1280w, https://ugachanblog.com/wp-content/uploads/2022/02/5ba897d6d697425ab4b38f14e988b482-1.png 700w, https://ugachanblog.com/wp-content/uploads/2022/02/5ba897d6d697425ab4b38f14e988b482-1-1024x576.png 856w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<h4 class="wp-block-heading" id="html">HTML</h4>



<p>Hyper Text Markup Languageの略で、HTMLの<strong>もとになるファイルを作成する</strong>言語。<br><strong>Webで表したい文</strong>などを「＜」「＞」で挟まれた「タグ」と呼ばれる<strong>特殊な文字列</strong>で囲んで書いていきます。</p>



<h4 class="wp-block-heading" id="css">CSS</h4>



<p>HTMLだけでは、Webは白い背景と黒い文字だけになってしまいます。CSSを使用することで<strong>Webの元であるHTMLの見た目を調整できる言語</strong>。文字の大きさ、カラーなどなど。</p>



<p>う～ん、私も実際はなんのことかよくわからずに、とりあえず読み進めようということで、学習をスタート。</p>



<h3 class="wp-block-heading" id="テキスト-前半-基本">テキスト　前半（基本）</h3>



<p>テキストを開き、まず<strong>Webサイトの基本</strong>について学びます。知らない基本的知識なので書いてあることが、新鮮です。「へぇ～、こんな風にサイトができているんだぁ」と気持ち高らかに学びながら、こんなおしゃれなWebサイトが作れるのかぁとわくわくし始めます。</p>



<p>また、実際の基本的な入力も体験できHTML＆CSSで入力した言語が、パソコン上でWebページとして表示されるだけで、<strong>感動</strong>です。<br><strong>コード</strong>を書いたり、<strong>画像を挿入</strong>したりと少しずつできることが広がっていきます。</p>



<p><strong>特に苦もなく、楽しく少しずつ丁寧に学べるところはよい点です。</strong></p>



<h3 class="wp-block-heading" id="テキスト-後半-実践編">テキスト　後半（実践編）</h3>



<p>実際のホームページ制作です。テキスト通りに入力していけば、更に感動が待っています。おしゃれなサンプルのようなWebサイトがつくれます。<br>しか～し、そんな甘いものではありませんでした。<strong>コードの入力など量が増える</strong>につれ、1か<strong>所のうち間違え</strong>でさえ、なんか<strong>変な画面</strong>になっちゃうし、その間違えたコードを探すのも大変。その繰り返しの中、サンプルに近づいていくのは<strong>楽しさ</strong>がありました。<br>一部OS環境の違いなのか、サンプルコードなど確認しても間違いも見つからず、うまく起動しないものもありました。<br>実際の画面とHTMLファイル、CSSファイルをいったりきたり、手直ししてはWeb表示させてとかなり時間を要しました。</p>



<p><strong>とりあえずWebページとしてみられるようになったことで、達成感を得ました</strong>。</p>



<h2 class="wp-block-heading" id="まとめ">まとめ</h2>



<p>HTML＆CSSを学びましたが、実際最初から一人で‥とは無理なレベルです。けれど、<strong>基本的知識を得ることができ、Webの構造もや制作の流れは少しだけ理解できたこと</strong>は、これからプラスになるはずです。もう1回、最初からテキストをやりなおし知識の定着をしていきたいと思います。独自でWeb制作できたら‥なんて夢をみながら（笑）</p>



<h4 class="wp-block-heading" id="補足">補足</h4>



<figure class="wp-block-image size-large"><img decoding="async" width="1024" height="576" src="https://ugachanblog.com/wp-content/uploads/2022/02/IMG_9818-1024x576.jpeg" alt="" class="wp-image-1541" srcset="https://ugachanblog.com/wp-content/uploads/2022/02/IMG_9818-1024x576.jpeg 1024w, https://ugachanblog.com/wp-content/uploads/2022/02/IMG_9818-300x169.jpeg 300w, https://ugachanblog.com/wp-content/uploads/2022/02/IMG_9818-768x432.jpeg 768w, https://ugachanblog.com/wp-content/uploads/2022/02/IMG_9818-320x180.jpeg 320w, https://ugachanblog.com/wp-content/uploads/2022/02/IMG_9818-640x360.jpeg 640w, https://ugachanblog.com/wp-content/uploads/2022/02/IMG_9818-1280x720.jpeg 1280w, https://ugachanblog.com/wp-content/uploads/2022/02/IMG_9818.jpeg 700w, https://ugachanblog.com/wp-content/uploads/2022/02/IMG_9818-1024x576.jpeg 856w" sizes="(max-width: 1024px) 100vw, 1024px" /><figcaption>Progate　HTML＆CSS以外も学べます。一部無料で使用できます。</figcaption></figure>



<p>私、このテキストを始めてからしばらくして、アプリ「Progate」の無料版「HTML＆CSS」も同時に学びました。相性がよかったです。テキストであまり理解できていないところも「Progate」でテスト方式で構造が学べて理解がすすんだと感じました。</p>



<figure class="wp-block-image size-large"><img decoding="async" width="1024" height="768" src="https://ugachanblog.com/wp-content/uploads/2022/02/IMG_9820-1024x768.jpeg" alt="" class="wp-image-1542" srcset="https://ugachanblog.com/wp-content/uploads/2022/02/IMG_9820-1024x768.jpeg 1024w, https://ugachanblog.com/wp-content/uploads/2022/02/IMG_9820-300x225.jpeg 300w, https://ugachanblog.com/wp-content/uploads/2022/02/IMG_9820-768x576.jpeg 768w, https://ugachanblog.com/wp-content/uploads/2022/02/IMG_9820-1536x1152.jpeg 1536w, https://ugachanblog.com/wp-content/uploads/2022/02/IMG_9820-2048x1536.jpeg 2048w, https://ugachanblog.com/wp-content/uploads/2022/02/IMG_9820-scaled.jpeg 700w, https://ugachanblog.com/wp-content/uploads/2022/02/IMG_9820-1024x768.jpeg 856w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>もうひとつ、でてくるコードなど意味や使い方がわからない時に使用した　Web制作者必携　HTML＆CSS　全辞典　加藤善規＆できるシリーズ編集部　(株)インプレス　1,880円＋税　も理解への助けとなりました。</p>



<p><strong>諦めなければ、何歳になっても新しいことはできるはずですから。</strong></p>



<p>みなさんも、HTML＆CSSに触れることでWebのことが少し近くになりますよ。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://ugachanblog.com/htmlcss-study/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
