rock_machiner

オタクとしてもプログラマ(本職)としてもヌルッヌルなダメリーマンがどうにか生きる、ある意味ワナビでライフハックなブログ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

【Webテク】CSSで背景がグラデーションのボックスを作る【CSS】

WebプログラマやWebデザイナでない人が、HTMLを自分で作成する機会は今ではほとんどありません。
昔は自分のHPを作ることやネタ系のテキストサイトを巡回することなんかが流行りましたし、
僕が学生のころ(5~10年くらい前)はブログが最初期~隆盛期のころでしたので、
自分でタグを打ったりスタイルの設定したり、なんていう行為は結構身近でした。
最近は
かっこいいテンプレートが最初からたくさん用意されていたり、
Twitter Bootstrap みたいなツールも結構充実しているので、
見た目を整えるためにHTMLCSS の記述をゴシャゴシャ試行錯誤することは少ないと思います。

まあでも、僕が(サーバサイドPGなのに)仕事でHTMLCSSをゴシャゴシャ書いていることや、ブログテンプレートなんかもスタイルの設定をいじれるようになっていることを考えると、
0から作ることは少ないにせよ、ちょっとしたところを変えたりすることはまだまだみなさんやってらっしゃると思われます。
自分のブログのタイトルの背景画像をちょっと変えてみたり、
記事のタイトル部分の文字色を変えてみたり、
などなど...ですね。

今回ご紹介するのは、Webサイトのデザインを定義するときに、背景色にグラデーションを設定する方法です。CSS だけで背景にきれいなグラデーションを描けちゃいますので、いままでHTMLの部品(ボタンとかタイトルヘッダとか)の背景をグラデーションにするのにわざわざ画像を用意していた人には参考になると思います。
HTMLはなんとなくわかるけどCSS ってなに?という初心者の方向けに書いていますが、良くご存じの方でも発見があるかもしれませんので、一度ご覧いただければうれしいです。

※以下は、「CSS ?とかようわからんけど、タイトルの背景をグラデーションにしたいんや、ええやろ?」という人向けの記事です。
続きを読むからどうぞ↓
スポンサーサイト

about us

    J太郎

    Author:J太郎
    カノジョもいないし、ブログでも書くか!

Counter


    on-line:

作成者:JTROさん / powered by: jQuery & SyntaxHighLighter
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。