本サイトはこちら。
DesignOffice Macs デザインオフィス マックス
**********************************
こんにちは。イソさんです。
ホームページ制作で使うcssは難しいのか
さて今回はホームページ制作で使うcssについてだ。
windows95が出た頃からホームページを作成している人たちは、htmlファイルに直接タグを書いて、装飾もこのファイルに直接書き込んで表現していた。
ところが今はhtmlファイルには必要な文言などの情報を記し、ホームページの装飾はcssと呼ばれる言語で、別ファイルに書くことが多くなっている。
当方も初期の頃は２枚に分けるのは面倒だなと思っていたのだが、なかなかどうして。
このcssを使いこなせるようになると、これほど便利なものはない。
例えば、ある箇所の文字の色を黒文字で書いていたが、ここを赤色に変えようとした時に、
htmlだと全てのファイルの該当箇所にfont color云々を書き込まなければいけなかったものが、cssファイルの該当する所を１ヵ所直せば済んでしまう。
一見すると取っ付きにくそうなcssだが、慣れてしまえばなんてことはない。
プログラミングをやっている方から見れば、超かんたんな部類だろう。
ある意味ただの手続き言語なので、論理的思考力などはほとんど使わない。
要は、この表現にはこれっていう決まりごとが書いてあるだけだ。
総じてこういったフロントエンドデザインと言われているものは、言語的には難しいものではない。
javascriptなどのプログラムでさえ、スマホアプリ製作者からすれば、おちゃのこサイサイだろう。
この手の類を難しく感じさせるのは、まずは慣れていないのが原因。
毎日見てれば、htmlもcssも同じような表現が出てくるので、オリジナルのclassを作って、表現を変えたりすれば、すぐに自分のものになる。
ホームページ制作で使うcssを最短で習得する方法
最短で習得するコツを教えましょう。
０から白紙の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