皆さんこんにちは。りょーちんです。最近色んなcssサンプルデザインみたいなのが出回ってますよね。このサイトでもサンプルで使えるデザインがあります！

サイトはこちら

「きれい。」「使ってみたい！」そう思う方沢山いると思います。しかし、サンプルデザインをいざ使おうとすると

と思う方も多いと思います。

結論から言います。HTMLだけで書けます！ただ、その解説をしている人がいないんですよね。

なので、今回は、HTMLとCSSの違い、サンプルコードの解説、そしてHTMLだけでの表記の仕方を紹介します！

そもそもHTMLとCSSの違いって？

皆さんはHTMLとCSSの違いについてはわかりますか？

となると思います。そこでまずは、HTMLとCSSについてのざっくりとした違いについて紹介したいと思います。

HTMLは骨組み

HTMLは、ざっくり言うなら「骨組み」です。基本ホームページでは、文字やある程度の大きさや見出しなどが、主な用途になります。

CSSはデザイン

CSSはざっくり言うなら「デザイン」です。昔はHTMLだけで構成されたホームページが多かったですが、デザインが乏しいという欠点がありました。そこで、ホームページを華やかにデザイン出来るように、CSSというものが開発されました。なのでCSSは、HTMLで作った文字などの骨組みに四角形の色付きのブロックなどのデザインで装飾するための物だと思ってください。

以上がHTMLとCSSのざっくりとした理解の紹介です。次に少しレベルアップしてコードの解説をしたいと思います。

HTMLの簡単な基礎

まず、HTMLの基礎を学びましょう。HTMLは基本は<p>ここに文章</p>のような形になっています。

これは<何か英語文字>が始まりで、

</何か英語文字>で終わりを表しています。なので、

<何か英語文字>この中に文章などを書く</何か英語文字>

が基本の形です。サンプルのHTMLを見れば

と複雑に書いていますが、

青がdivと呼ばれる中身

赤がpと呼ばれる中身

だと思ってもらえたらよいです。次に実際のサンプルの見出しをHTMLのコードだけで使えるように、アレンジしましょう！

これだけ学べばサンプルデザインを沢山使える！！解説と方法

コードの解説！

では実際にコードの解説とHTMLだけにする方法を紹介していきます。まずはこの見出しのサンプルコードを使います。

この見出しのサンプルデザインのコードはコチラです。

となっています。

HTMLの部分を見てください。class=”box1″と書いていますよね。これは、「君は、box1という名前にしよう。」と名付けをしているのです。

そして、cssの「.box1」の中に書いてあるのが、class=”box1″のデザインとなるわけです。今は、前にある「.」は気にしなくても大丈夫です。

※cssのルールで「.」はつけないといけないだけです。

「box1のデザインをするよ！box1のデザインはpadding(余白)を0.5と……」となっているのです。

.box1 pも同様です！説明としては「box1の<p>の デザインをするよ！box1のデザインはpadding(余白)を0と……」となっているのです！

以上が簡単な解説になります。ここからは、このコードをHTMLの表記だけに変える方法を紹介します。

HTMLだけにする作り方！

まずは、HTMLの class=”box1″の横にstyle=””と書きます。

次に、style=””の中に.box1のcssのコードをコピペし貼り付けます。

赤文字がCSSの.box1の中身をコピペして貼っているコードです。

この時にCSSのコードが改行してあることがあるので、改行はすべて消して1行にしましょう。

そして、<p>も同じようにします。

これで完成ですね。完結に言えば、css(デザイン)を直接中に書き込んでいる形になります。あとはHTMLのコードをかけるところに、この完成したコードを直接貼り付けてください！そうすれば出来るはずです。

以上がHTMLとCSSの解説と実際の使い方講座になります。

もし、cssの実際の書き方がわからない！と悩んでいる方には持ってこいの書き方ですね。ぜひ活用して記事に活かしてください！

それでは！！