CSSの書き方の練習方法【オフラインでの練習方法を紹介】

はい!こんにちは!

今回は

CSSをオフラインで書いて練習する方法

を説明していこうと思います♪

WordPressを使用している皆さん、CSS弄くってるとき、サイトの表示気になりませんか?

タイトル表示(h1~h6)に試しにこれを使ってみたいけど、その間にブログに訪問者がいたら…とか、

ここのCSSちょっと角丸くしたい、背景色変えたい!でも、まだまだCSSを触る自信がない!という時、

オフラインで練習できたらと思うときありませんか?

私、以前はhtml・CSSを手打ちでHPを作っていたので、誰かに需要があるかも!と思い、この記事を書くことにしました。

さて、本題に進んでいきましょう。

練習する環境を作成する。

まず

PCの機能からメモ帳を開きます。

htmlファイルの作成

下記のコードを貼り付けます。

<!DOCTYPE html><head>

<link rel=”stylesheet” media=”all” type=”text/css” href=”sample.css”/>

</head>

<body>

<div id=”site-box”>
<p class=”h1″>おはよう</p>

</div>

</body>

</html>

張り付けたら、名前をindex.htmlで保存しましょう。

CSSファイルの作成

次にもう一回新しいメモ帳を開きます。

下記のコードを貼り付けます。

.h1 {
background: #c2edff;
padding: 0.5em;
}

張り付けたら、名前をsample.cssで保存しましょう。

その次に新しいフォルダを作成して、名前をCSS練習用としておきましょう。

CSS練習用フォルダにindex.htmlとsample.cssを移動します。

これで練習する環境が出来上がりました。

実際に使用してみる。

表示を確認する。

表示の確認の仕方は簡単です。

index.htmlをダブルクリックしてみましょう。

表示されましたか?

もし表示されないようでしたらindex.htmlとsample.cssが同じフォルダに入っているか確認してください。

同じフォルダに入れなければ参照できません。

今回は例として『おはよう』の文字を四角い水色の枠で装飾しています。

文字はindex.html

文字を変更したい場合は<p class=”h1″></p>の間に打ち込みます。

コードを見てみると『おはよう』と書いてあるところがありますね。

<p class=”h1″>おはよう</p>

ここを変更すると文字が変更できます。

Htmlファイルの開きかたは空のメモ帳を開いてindex.htmlをドラッグ&ドロップです。(画像参照)

CSSのコードはsample.css

こちらのファイルはダブルクリックで開いて編集することが出来ます。

CSSを打ち込む場所はsample.cssの.h1{ }のカッコ内に記入していきます。

.h1の部分を変更すると反映されなくなりますので注意が必要です。

過去記事でCSSの参考サイトを紹介しているので合わせてどうぞ♪

DIYer

はい!こんにちは! 今回のテーマは 目次 1 【WordPress】プラグインを使わずに見出しを装飾する1.0.0.1 …

よく使用するCSS

コードを置いておきますので参考にどうぞ♪

文字色を変更する

color: 〇〇〇; ☜丸の中はカラーコード

背景色を付ける

background-color: 〇〇〇; ☜丸の中はカラーコード

枠に線を付ける&太さを変える

border: solid 〇px 〇〇〇; ☜最初の丸の中には太さを指定する数字、後の丸の中はカラーコード

角を丸くする

border-radius: 〇em; ☜丸の中には太さを指定する数字(〇%でも指定可能)

まとめ

練習用のファイルを作成しただけなので、色々書いてない部分もありますが、練習する環境としては十分だと思います。

思う存分練習してみて下さい♪

CSSはかなりの種類がありますので、ここでは全ては説明できませんが、『CSS 一覧』とかで検索するとすぐ出てきますので探してみて下さい。

今回の記事はここまでになります。

最後まで読んで頂き感謝!

また次の記事で。。。

最新情報をチェックしよう!