WordPress初心者必見！HTML・CSSが面白いほど身につく最強コンテンツ7選

WordPressでブログ運営をしている方、ご自分でデザインを変えたいとか思ったことはありませんか？

WordPressは特にWebデザインの知識のない方でも簡単にハイクオリティなデザインのブログが作れて便利ですよね。

たくさんあるWordPressテーマの中から好みのテーマを選ぶだけでお気に入りのブログが出来上がっちゃいます。

いや〜これは本当に便利。

僕もつい最近までは「は？WordPress？なんじゃそりゃ」状態だったんですが、いざ使ってみるとテーマもたくさんあってどれもかっこよく見えてきちゃって、最初選ぶのには時間がかかりました。

 

 

ただテーマって人気のものだと他の人と被ったりしますよね。

ブログ向けテーマだと「STINGER」とか、「Simplicity」とか、僕が以前使っていた「Xeory」とか‥‥

結構いろんなブログで「あ、このテーマSTINGERだ！」とか、「このブログはSimplicity使ってるのか」とか思ったりします。

やっぱり人気のテーマはそれなりに理由があって、かっこよかったり機能性に優れていたりするんですよね。

だったらオリジナリティを出したくなるのが人間というものでしょう！

WordPress初心者でもオリジナリティ溢れるブログデザインにしたい！という方のために今日はとっておきの記事を書いておきます。

ぜひ参考にしてください！

 

 

ブログデザインを変えるために必要な知識・スキル

WordPressに限らないことですが、ブログのデザインを自分の思い通りにしたいなら、身につけなければならない知識・スキルがあります。

それが「HTML」と「CSS」です。

簡単にそれぞれを説明すると、まず「HTML」はWebブラウザに表示させるための大もとの言語のことです。

GoogleChromeやSafari、Internet ExplorerといったWebブラウザソフトは、この「HTML」をダァーーーッと読み込んだ結果としてWebページを表示させているのです。

そして「CSS」はHTMLで作ったWebページの原形にデザイニングをする言語のことです。

HTMLだけでは味気ない、文字ばっかりのWebページになっちゃいますが、CSSを使うことによって色や配置を変えたり、囲み線を使ったり、見出し部分のデザインをかっこよくすることができます。

 

この2つのスキルを、基本だけでも身につけると、WordPressのブログでもデザインを変えることができるようになります。

ただHTMLとかCSSとか、なんだか聞いたことない横文字で難しそうって思う人もいると思います。

ですがHTMLとCSSは簡単です！全部を理解する必要はないんです。むしろ基礎中の基礎部分くらいだけ分かれば十分なんです。（僕も基礎しかわかりませんf^_^;）

そして今の世の中には初心者の方でもめちゃくちゃ分かりやすく、かつ簡単にHTMLやCSSを勉強できるWebサービス、コンテンツ、本が多くあるのです。

この記事では僕が実際にHTML・CSSの勉強で利用したWebサービス・コンテンツ・本を紹介していきます。

とてもおすすめなのでかじるだけでもかじってみてください！

 

 

 

 

HTML・CSSが面白いほど身につく最強Webサービス3選

記事タイトルでは「最強コンテンツ」って言ってますが、紹介するのはWebサービス、記事、本の3種類です。

まとめるためにコンテンツというワードを用いていますが悪しからず。

では見ていきましょう！

 

 

1．Progate

「Progate」は無料のプログラミング学習サイトで、Web上で実際にコードを打ち込みながらプログラミングの勉強ができるサイトです。

運営している「株式会社Progate」のコンセプトが、「初心者から、創れる人を生み出す」となっている通り、HTMLとか全然分からないという初心者の方でも取り組みやすい学習サイトとなっています。

学習方法は、解説を読んで、実際にコードを打ち込んでみるという形です。

解説は文章だけでなくイラストやコード例を適切に載せてくれているので非常に分かりやすいです。

実際にコードを打ち込む「演習」では、画面左に課題、画面中央にコードを書き込むエディッタ、画面右にコードを書き込んだ結果というように一画面ですべてが見られるので非常に使いやすいです。

 

学べる言語は「HTML & CSS」、「jQuery」、「PHP」、「Ruby」、「Ruby on Rails（Rubyのフレームワーク）」があります。

ProgateでHTMLとCSS（他のレッスンは必要なし！）を一通り勉強すれば、ある程度ブログのデザインを好きなように変えることができるようになりますよ！

 

僕もProgate使っていますが、進捗状況はこんな感じです。

 

「HTML & CSS」、「jQuery」、「PHP」は一通り終えましたが、Ruby系が止まっているんですよね。

正直Ruby難しい‥‥orz

プログラミングさくさくできるようになって簡単なWebアプリケーションとか創れるようになりたいな！

 

「Progate」はコチラ

 

 

2．schoo

schoo（スクー）もWeb上の学習サイトですが、プログラミングに限らずITに関する幅広い分野を勉強できるのが特徴です。

もちろんプログラミングものも豊富に揃っています。

完全無料ではなく、すべての授業を見たいなら月額980円の「プレミアム学生」に登録をする必要があります。

schooの学習形式は動画で授業を受けるような形です。

会社のトップや副社長、起業家など最先端を走っている有名な方々が講師となって60分前後の授業をしてくれます。

HTMLやCSSの基礎部分も細かく丁寧に教えてくれます。

僕もHTML、CSSの授業をいくつか受けました。

ただ、このschooのネックは授業時間です。

60分って結構長く感じちゃうんですよね。

もちろん動画なので飛ばしながら進められるのですが、それでも一コマの授業が長いことがちょっとダレる心配があります。

最初は無料で登録すれば授業をいくつか見ることができるので試してみると良いでしょう。

 

「schoo」はコチラ

 

 

ドットインストール

ドットインストールはプログラミングに特化した、学習サイトの一つです。

ドットインストールも動画形式なのですが、schooと大きく違うのが、動画の時間です。

一つの動画が3分前後。長くても5分ほどです。

一つのレッスンを細かく章分けをして20個前後の動画で一つのレッスンとなっています。

3分ほどで一つの動画が受けられるのでとても取り組みやすいです。

感覚的には、schooの授業だと、「よし、今から一コマ授業受けるぞ！」とモチベーションを上げないと動画を見ないところを、

ドットインストールは「このレッスンどんなのかな？ちょっと見てみよ！」という良い意味でストレスなく動画を開くことができます。

動画の内容自体も3分前後で薄いということはなく、むしろ3分の中でぎゅっと詰めているので毎回毎回、「なるほど！」っとなります。

ドットインストールも無料登録で見られる動画の数は限られており、全部見たい場合は月額880円のプレミアム会員に登録する必要があります。

ただ、schooもドットインストールも言えることですが、月額費を払ってもこれらのサービスは利用する価値があると思います。

月々1,000円足らずで濃い勉強ができるのですからぜひおすすめです！

ちなみにドットインストールでのHTML・CSS関連のレッスンはこんな感じになっています。

 

「ドットインストール」はコチラ

 

 

HTML・CSSが面白いほど身につく最強コンテンツ3選

ここからはコンテンツ部門です。

僕がHTMLやCSSで勉強になった記事コンテンツを紹介していきます。

初心者の方にはとても分かりやすいんじゃないかなと思いますのでぜひ一度見てみてください。

 

 

1．超絶初心者のためのフロント入門（HTML、CSS、JavaScript）

まずはプログラミング関係の情報共有サービス「Qiita」の記事です。

結構シンプルに書かれてます。

ここは掘って説明すると厄介だなって部分は「おまじないだと思えばOK！」で片付けてるんですよね。

初心者には分かりにくいところはあえて濁らせることで重要な部分が理解しやすいと思います。

ちなみにHTMLとCSSに加えてJavaScriptも紹介していますが、ここは気にしなくて良いでしょう。

僕はJavaScriptノータッチです。Progateで「jQuery」を勉強しましたが、そんなに理解できていませんし（汗）

まーとりあえずHTML・CSSのさわり部分はこの記事を見ておきましょう。

 

 

2．実戦的 HTML & CSS 入門

パソコン関連の記事を書いているブログ「TipsZone」の記事です。

この記事ではHTMLでよく使われるタグの説明、CSSでよく使われるスタイル名の説明がされていますので参考になると思います。

HTMLやCSSではタグやスタイル名をどんどん勉強していくことになりますから、その出発点としてこの記事から始めてみると良いでしょう。

あとこの記事でもJavaScriptがちょっとだけ紹介されています。

本当にちょっとだけなので初心者の方もどんなものなのかな〜って見ておいて良いかもしれませんね。

とは言えJavaScriptはHTMLとCSSをある程度理解してからで良いですよ。

 

 

3．初心者のためのHTML/CSS入門！ゼロからの基礎知識と上達のコツ

プログラミング他IT関係の記事を扱っているメディア「Code部」の記事です。

Code部のコンセプトとして「プログラミング初心者を応援するメディア」と書かれてある通り、この記事でも初心者向けに丁寧に書かれています。

HTMLとは？CSSとは？から始まって基本的な用語の説明、それぞれのコードの書き方などが勉強できます。

ここで紹介した3つの記事のうち、最も教科書的な存在と言えるかもしれませんね。

3つの記事の中なら、まずこの記事を見てぼんやりとでもHTML・CSSの全体像が理解すると良いでしょう。

 

 

HTML・CSSが面白いほど身につく最強書籍1選

読者：「いやいや1選て‥‥」

管理人：「すみません、HTML・CSSに関する本は1冊しか紹介できるのがなくて。（実はもう1冊買って読んだのですがすごく読みづらかったので‥‥）」

 

ということでHTML・CSSの基礎が学べる本を1つだけですが紹介しておきます。

僕はこの本を一番最初に買ってHTML・CSSの世界に入りました。とっても良い本です。

 

 

スラスラわかる HTML & CSS のきほん

HTML・CSSを始めるなら最高の1冊だと思います。

これはHTML・CSSを勉強しながら実際にWebサイトを作っていくので非常に効率的に学ぶことができます。

しかも嬉しいのがWindowsにもMacにも対応していて両方のやり方説明を書いてくれています。

コードを書くのに必要なテキストエディッタのインストール方法や使い方、Webサイトを公開するときに必要なFTPソフトのインストールの仕方など、細かく解説してくれていてとても助かりました。

HTMLのバージョンの中でも最新のHTML5に対応していることもこの本を選んだ理由の一つでした。

この本を読破するころにはカフェのウェブサイトが完成します。

ちなみに本の中身はこんな感じです。

色を適度に使っていますのでとても見やすいです。

1ページ内の情報量も多すぎず少なすぎず、テンポよく勉強を進めていくことができます。

学習と演習が同時にできるので初心者の方には胸を張っておすすめできる1冊です。

 

 

まとめ

いかがでしたか？

今回はWordPress初心者の方やブログ自体初心者のために、挫折なくHTML・CSSを勉強できるコンテンツを紹介みてみました。

とはいえ7つ紹介して逆にどれから始めたら良いのか分からないって人もいるかもしれませんね。

ということで最後にどれから始めるべきか書いて終わりにします。

僕と同じように本（スラスラわかるHTML&CSSのきほん）から始めるのが良いと思います。

 

 

ただ、本はお金がかかりますので、「まずは無料で始めたい！」って人は「Code部」の記事、初心者のためのHTML/CSS入門！ゼロからの基礎知識と上達のコツをざっと見た後で、プログラミング学習サイト「Progate」で手を動かしながら覚えていくのが良いでしょう。

Progateが終わったらさらに「ドットインストール」で知識の補完をすると良いと思います。

頑張って自分好みのブログデザインを実現しましょう！