ホーム(記事一覧)へ

【html入門】マンガでわかるホームページ作成について

↓続きはこちら(マンガのすぐ下に続きの記事を掲載しています。)

スマホでのんびりじっくり読みたい方へ、このページのQRコードです。

作者について

当サイトへようこそいらっしゃいました。私はテイクと申します。

9年間Webデザイナーとして働いておりました。年齢は30代前半です。

現在は退職し、ブログ更新にいそしんでおります。

Webサイトを作り続けて9年。デザインもhtmlもCSSもやります。一通りは自分一人で作成できます。

そんなノウハウをマンガという形でわかりやすく楽しくお伝えしたいなと思います。

当ブログの記事・マンガはすべて私が書いたものです。
当ブログ(サイト)のhtml,CSS,WordPressテーマも自分で作りました。

必要になったらさらに調べて理解を深めていってください。

マンガでわかるホームページ作成目次

当サイトでは以下の内容をマンガで学べます。

マンガにして186ページ、記事にして61記事あります。

マンガ1巻を読む感覚で読んでみてください。

サイトの目的(html入門)

「マンガでわかるホームページ作成」ではWebサイト(ホームページ)の作り方を、まったく作ったことのない人にもわかりやすいようにマンガで説明します。

いわゆるhtml入門です。CSS入門でもあります。

副業解禁で誰もがサイトを持つ時代に

副業が解禁され、多くの人が副業に関心を向けるようになりました。

副業の中でもローリスクハイリターンが見込めるものの一つにWebサイト運営があります。

つまり誰もがWebサイトを持つ可能性があるのです。

Webサイトの作成は実は簡単なのですが、サイトの作り方をわかりやすく最初から最後まで解説しているサイトは少ないように感じます。

これによりせっかくのチャンスを逃すのはもったないことです。

サイトを作るのはカンタン

サイトを作るのは簡単です。

htmlやCSSはphpなどのシステムに比べるとバグも少なくスムーズに作ることができるでしょう。

業者に任せると数十万円するホームページ作成も自分で作れば0円です。(時間とサーバー代・ドメイン代はかかりますが)

もちろん業者の方がデザインのいいサイトはできますが、逆にデザインをそこまで気にしないなら自分で作ってもいいわけです。

また、WordPress編でも紹介しますが「テーマ」というものを使うとhtmlやCSSを知らなくてもホームページが出来上がります。

ちょっとした修正なら自分でできるようになろう

「サイトを作る」まではいかなくてもちょっとした修正を自分でできるようになるだけでも大きく違います。

仕事柄、ホームページ修正を依頼されます。内容はちょっとしたテキスト修正であることが多いです。

「こんな簡単なこと自分でやればいいのに」

と思いますが、それでも仕事でやっている以上請け負います。ただし有料です。

ちょっとしたテキストの修正なのに数千円~数万円取られるわけです。

ちゃんと自分でhtmlを覚えれば、あるいはhtmlを知らなくても修正方法を覚えれば、タダで、10分で終わらせることができます。

 

と、このように簡単なことにわざわざお金をかけるのもったいないなぁと思ったので、ホームページ作成方法をマンガでわかりやすく解説することにしました。

サイトの見方

上部にマンガ、下部にテキストで説明します。

基本的にはマンガだけ読んでもOK

基本的にマンガもテキストもほぼ同じ内容を載せています。

マンガ下のリンクから続きが読めます。

テキストは補足もあり

書き終わってから気づいたことや追記したいこと、修正したいことをテキストの方だけに反映させる場合があります。

テキストの方ではマンガで表現が難しいことを補足として載せることがあります。

リンク

マンガにクリックできるリンクを載せるのは難しいためテキスト上にリンクを設置します。

大きい画像

マンガの限られた範囲でキャプチャ画像など載せると小さくなりがちです。テキストの方では最大サイズで表示できます。

ソースコード

マンガでは範囲が限られているのでソースコードの一部だけ表示することがあります。また、ソースコードのコピペができません。テキストの方では全部載せられますし、ソースコードをコピペできます。

デモ

ソースコードの結果をマンガの方で「こうなる」と描きますが、それはあくまで絵です。
テキストの方は実際にブラウザが解釈した結果を確認できます。

SEOのため

SEOではテキストが重要です。確かにマンガ画像のaltに詰め込むことも可能ですが、altがあまり長いと効果がないともいわれますし、マンガ内で脱線することもあり、それをそのままaltにしてもSEO効果が薄れる可能性があるので、別テキストにしています。

横書きになるとき

htmlやCSSなどのコードは横書きです。よって必要に応じてマンガの中でもセリフを横書きにすることがあります。

わかりやすさ重視

このサイトは初心者のためのサイトですのでわかりやすさを重視しています。そのためにマンガを使っているくらいです。

「わかりやすい」というのは「理解するまでにかかる時間が短い」ことだととらえています。

そのため「例外」や「厳密に言うと違う」といったことを省くことがあります。

 

「AはBである」というという説明に対し、詳しい人からしたら「いや、AがBなのは機能の一部であり、Cもあるし、Dもある。しかもEのときはBではなくなる」と思うかもしれません。

しかし、これを初心者に説明すると初心者はちんぷんかんぷんでわけがわからなくなります。

よって「理解するまでにかかる時間が短くする」ために「例外」や「厳密に言うと違う」ことを省くことがあります。

SNS(連絡先)

マンガの連載は終了しました。

それでもマンガや記事の感想をいただけるとしっぽ振って喜びますw

記事内やマンガに間違いがありましたら指摘していただけると大変助かります。

マンガの連載は終了しましたが、CSSやhtmlに関する技術記事を更新しております。

Twitter

twitter.com/take1264733

あまり更新していません。

Pixiv

pixiv.net/users/1264733

現在、更新していません。

では、下記リンクより続きをご覧ください!

関連記事