ゼロから独学でHTMLとCSSについて学んできて、一通りのことができるようになりました。
これまでのHTML/CSS勉強についての記事をまとめます。
HTML勉強の流れ
開発環境構築編
プログラミング学習の第一歩は、学ぶ言語に合った開発環境を自分のPCに構築すること。
とは言っても、HTML/CSSの環境構築は簡単！
詳しくは下記記事で、実際の手順とともに紹介しています。
(adsbygoogle = window.adsbygoogle || []).push({}); HTMLとは、Hyper Text Markup Languageの略で、 文章に意味付けをするマークアップ言[…]
また、おすすめのテキストエディタ・Atomについては別記事で詳細に解説しています。
(adsbygoogle = window.adsbygoogle || []).push({}); 以前、Webページ開発環境構築の一環として、Atomというテキストエディタを紹介しました。 [siteca[…]
実践編
開発環境が整ったら、実践あるのみ！
参考書やWeb学習サイトを見ながら、実際にWebページを自分で作りながら学んでいくと良いです。
大まかな流れは、以下の記事を参考にどうぞ。
(adsbygoogle = window.adsbygoogle || []).push({}); webサイトって普段は頻繁に見ていても、実際どうやってできていくものなのか、あまり知らなかったりします。 私も[…]
私が参考にした本やサイトは、また次回まとめますね。
ある程度、自分でWebサイトを作れたら、もっと見栄えを良くしちゃいましょう。
特に、「favicon（ふぁびこん）」の設定は、Webサイトの見栄えの肝とも言えます。
以下の２記事では、faviconの作成方法から実装するところまでをまとめています。
(adsbygoogle = window.adsbygoogle || []).push({}); ドットインストールで動画を見ながら、HTMLを勉強中。 やっぱり動画で見ると、分かりやすいですね！ ドッ[…]
(adsbygoogle = window.adsbygoogle || []).push({}); faviconとは、タブに現れるサイトの小さいアイコンのこと。 小っちゃくても、その存在は大きいです。 […]
WordPressを使った実践編
HTMLとCSSを操れるようになってきたら、ブログで使っているWordPressも思い通りにカスタムできるようになります。
私のブログでカスタムした実例を、手順・コード付きで紹介していますよ。
・ヘッダー画像、サイトアイコンの設定
(adsbygoogle = window.adsbygoogle || []).push({}); お気付きかもしれませんが、このブログ、かなーり地味なマイナーチェンジを繰り返しているのです。 右も左も分からず[…]
・フッターのカスタマイズ
(adsbygoogle = window.adsbygoogle || []).push({}); 素晴らしく多機能なwordpressテーマ「THE THOR」ですが、 たまに出てくる「もっと変えたい」願望（[…]
・レスポンシブデザインへの対応（背景）
(adsbygoogle = window.adsbygoogle || []).push({}); こんにちは、sateです。 私はwordpressのテーマ「THE THOR ザ・トール」を使って、このブ[…]
主要なHTML/CSSコード一覧
HTMLにもCSSにも、たくさんのタグやスタイルなどがあります。
とても多くて覚えきれるものではないので、使用頻度の高いものをまとめました。
・HTMLタグまとめ
(adsbygoogle = window.adsbygoogle || []).push({}); これまで学んできたHTMLについて、定番の骨組み・主要なタグについてまとめました。 定番の骨組み <![…]
・CSSスタイルまとめ
(adsbygoogle = window.adsbygoogle || []).push({}); HTMLのタグについてまとめた記事はこちら↓ [sitecard subtitle=関連記事 url=http[…]
HTML/CSS勉強・実践のご参考になれば、幸いです。
