ホームページ制作に使うcssは難しくない

本サイトはこちら。
DesignOffice Macs   デザインオフィス マックス

***********************************

こんにちは。マックスのイソさんです。

さて今回はホームページ制作で使うcssについてだ。
windows95が出た頃からホームページ制作している人たちは、htmlファイルに直接タグを書いて、
装飾もこのファイルに直接書き込んで表現していた。

ところが今はhtmlファイルには必要な文言などの情報を記し、ホームページの装飾はcssと呼ばれる言語で、別ファイルに書くことが多くなっている。

当方も当初は2枚に分けるのは面倒だなと思っていたのだが、なかなかどうして。
このcssを使いこなせるようになると、これほど便利なものはない。

例えば、ある箇所の文字の色を黒文字で書いていたが、ここを赤色に変えようとした時に、
htmlだと全てのファイルの該当箇所にfont color云々を書き込まなければいけなかったものが、cssファイルの該当する所を1ヵ所直せば済んでしまう。

一見すると取っ付きにくそうなcssだが、慣れてしまえばなんてことはない。

プログラミングをやっている方から見れば、超かんたんな部類だろう。
ある意味ただの手続き言語なので、論理的思考力などはほとんど使わない。
要は、この表現にはこれっていう決まりごとが書いてあるだけだ。

総じてこういったフロントエンドデザインと言われているものは、言語的には難しいものではない。
javascriptなどのプログラムでさえ、スマホアプリ製作者からすれば、おちゃのこサイサイだろう。

この手の類を難しく感じさせるのは、まずは慣れていないのが原因。
毎日見てれば、htmlもcssも同じような表現が出てくるので、オリジナルのclassを作って、表現を変えたりすれば、すぐに自分のものになる。

習得するコツを教えましょう。
0から白紙のhtmlやcssを作らないこと。

既存の簡単なサンプルのhtmlとcssのセットを入手する。
で、そのサイトの好きな所の装飾を変えてみる。

htmlに書いてあるタグのclass名を見て、そいつが「mojiiro」だったとする。
次にcssファイルをテキストエディタで開き、先ほどの「mojiiro」を検索かけて該当箇所を見る。
すると下記のような所がひっかかるはずだ。

.mojiiro{
text-align:right;
color:#fff;
background:#ff8c00;
}

ははーんと。この中に書いてある
text-align:right;
color:#fff;
background:#ff8c00;
こいつらが装飾しているのねと。

お次はこいつらをググってみる。
「css text-align」とか「css background」とか。
すると解説が出るので、あとは右側の要素を変えてみるだけ。
text-align:right;をtext-align:left;に変えて上書き保存。

ブラウザで見ると、右と左が入れ替わっているだろう。

こんな感じでいろいろいじってみる。すると、ここはこうすればこうなるのねと、わかってくるはずだ。これで自分のものになるのだから簡単だろう。

ここら辺はプログラミングも同じで、既存のコードを改変してどこが変わったのか見ていくと習得が早い。
かのwindowsだってビルゲイツが白紙からコードを書いたわけではない。
既存のOSのコードを買ってきて、オリジナルに改変して、商用にしていったのだ。
macOSも然り。フリーのLinuxをオリジナルのMacOSに改変していったものだ。

さあ、htmlとcssを入手してどんどん改変してみよう。
すぐに自分のものになりますぞよ。

 

編集後記
ここ埼玉県熊谷市内も春の恩恵をちらほら受けつつあり、かなり暖かい日も出てきました。
桜がきれいに咲く季節ですねえ。

今回のブログネタはhtmlに使うcssについてでした。
cssって何となく難しいイメージありますよね。
ホームページ制作には必須の技術なんですが、考えた人はすごいですね。
こういった無から有を生むってのは、お見事としかいいようがないですなあ。

**********


お問い合わせ
格安 ホームページ制作 SEO対策 YouTube動画なら埼玉県熊谷市のデザインオフィス マックス
TEL 048-580-3253

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です