2017年9月9日おおかみくんひつじくんひつじくん。俺のサイトカッコよくしたいんだけど、サイトデザインって何から始めればいいんだ?ひつじくんそれならまずはHTML/CSSの基礎から学んでいけばいいんじゃないかな?おおかみくんえ、えいちてぃーえむえる!?やばい、持病の頭痛がひどくなってきたぞ。「今のサイトをもっと綺麗にデザインしたい!でもやり方がわからない」という人は多いのではないでしょうか?WordPressのテンプレートを使えばある程度綺麗なサイトを作ることが出来ますが、オリジナリティを出していくならHTML/CSSの知識が絶対必要になってきます。HTML/CSSって聞くだけで頭が痛い人もいるのではないでしょうか?そこで当記事では、誰でも理解できるくらいにHTML/CSSをわかりやすく解説していこうとおもいます。コードについては敢えて詳しく解説せず、HTML/CSSというプログラム言語の全体像を掴んでいただけるように作りました。人によっては他もおすすめ?まとめWEBデザイン入門|HTML/CSSの基礎知識HTMLとは、箱(ボックス)を作るプログラム言語サイトというのは、実はボックス(HTML)の集合体なんです。当サイトのサイドバーにあるプロフィールなんかも箱の集合体なんです。複雑なデザインなように見えるかもしれませんが、幾つもの箱が組み合わさって1つの箱を魅せているのです。CSSとは、箱(ボックス)を彩るプログラム言語そして、配置された箱をデザインするのがCSS(スタイルシート)ですね。箱にはそれぞれHTMLの名前が付けられていますので、これにCSSコードを当てていくと箱のデザインが出来上がっていきます。背景色/余白/箱の大きさなどいろんなことをCSSで決められます。WordPressならCSSだけ覚えればOK!WordPressはHTMLコードは標準記載されている「WordPress」を使っているなら、HTMLコードを覚える必要は実はあまりありません。WordPressのテンプレート(AFFINGER4,賢威など)にはHTMLが標準記載されているからです。この事前に用意されたHTMLにCSSを当てはめればデザインができていまいますので、HTMLコードを知っておく必要はあまりないのです。記事の投稿部分で使う「h2」「h3」「li」「ol」「a」くらいを知っていれば十分です。これも基本的に書く必要はなく、タグを使うだけで入力できますしね。オリジナリティの高いデザインをするならHTMLコードを自分で組んだりする必要もあります。「俺にしか作れないカッコイイサイトを目指すぜ!」というなら是非HTMLコードを覚えてガンガンコードを組んで行って欲しいですが、そうでない限りは知らなくて大丈夫ですね。CSSを覚えるだけで基本的なデザインはできるWordPressテンプレートには、HTMLコードが標準記載されています。自分でHTMLコードを書く必要はほぼないのですね。HTMLは箱を作っているということだけ知っておけば問題なしです。したがって、CSSさえ覚えてしまえばオリジナリティのあるWEBデザインができてしまうというわけです。CSSを覚えれば、箱(HTML)の名前を見てそれにデザインを当てはめるだけですからね。検証ツールでサイト研究したり、書籍を読んだりして少しづつCSSを学んでいきましょう。簡単なデザイン練習をしてみよう!HTMLを投稿に書いてみる(本来なら不要)ではお試しにHTMLコードを書いて、CSSを当てはめてみましょう。WordPressにはHTMLは標準記載されているので書く必要はほぼないのですが、今回は練習のために書いてみましょう。WordPressの記事作成画面を開いて、新規記事の中に以下のコードを記載してください。このコードが書けたら記事を公開してください。(非公開記事にしておけば誰も見れないし、インデックスもされないのでおすすめです。)スタイルシート(style.css)に記載するではスタイルシートにCSSを記載して、先ほど書いたボックスを飾りつけてみましょう。WordPressの管理画面を開いて、「外観」>「テーマ編集」と進んでください。するとスタイルシート(style.css)が見つかるはずなので、スタイルシートの最下部に、以下のコードを記載してみてください。ボックスが装飾されて完成!CSSが適応されると、ボックスが以下のように装飾されます。うまくできましたでしょうか?もし上手く反映されない時は「更新ボタン」か「キャッシュ削除」を試してみてください。このようにして実際にコードを書いて、1つ1つ勉強していくと、少しずつ少しずつデザインができるようになっていきます。最初は難しくて辛い部分も多いかと思いますが、1度覚えてしまえばアフィリエイトする上では一生の武器になりますので、十分練習する価値があると感じますね。CSS基礎”]最後に書籍の紹介ですが、これからCSSを学び始めるなら間違いなく本書がおすすめです。本当に必要最低限な基礎部分が書かれていますので、「CSSっていったいなんやねん」という状態の人にはぴったりですね。完成デザインを元にコードを逆引きできますので、サイトを作りながら部分的に覚えていけるのが嬉しいです。(Design&IDEA)”]HTML/CSS本はいろいろなものがリリースされています。わかりやすい本というのは人によって結構異なりますので、これらを読み比べた上で最もしっくりくるものを採用するのもアリかと思いますね。まとめHTML/CSSの基礎と勉強方法のまとめでした。なんとなくHTML/CSSの全体像は掴めましたでしょうか?全体像を掴んだら後は練習あるのみです。検証ツールで綺麗なサイトのデザインを研究したり、参考書を買ってきて1つ1つ手を動かしながら覚えていったりするのが、サイトデザイン上達への近道ですね。管理人のひつじです!「働きたくない」という思いから会社を辞めて専業アフィリエイトを開始。半年で20万円、1年で月100万円を達成。サイト作りやWordPressテーマ制作をして生きている。詳細はプロフィール記載。ひつじアフィリエイト。