節約生活日記

フリーエンジニアの、仕事&子育て&節約生活などを綴っています!

 TOPへ

節約生活 画像を使わずオシャレなサイトを作る、オススメCSSコード2つ

2013.12.11 Wednesday

HTML5とCSS3を駆使すれば、かなりデザイン性と高いサイトを作ることが可能になった。

今日は、画像を使わずオシャレなサイトを作る事ができる、覚えておいて損はないCSSコード2つを紹介する。

’愀平Г離哀薀如璽轡腑
bodyやbox要素の背景色として、グラデーションを表現するコード。ちょっとした見出しの背景色として画像を使わずオシャレにレイアウトできる。

サンプルコード:上から下、緑から青↓


{
background: #009900; /* デフォルト */
background:-moz-linear-gradient(top, #009900, #000099); /* Safari,Chrome */
background:-webkit-gradient(linear, left top, left bottom, from(#009900), to(#000099)); /* Firefox */
background: linear-gradient(to bottom, #009900, #000099); /* ie */
}

すべてのブラウザでグラデーションを表現するには、4行すべて書かなくてはいけない。
1行目が、グラデーションを表現出来ないブラウザ用の単色コード。
2行目、Safari,Chrome 用。
3行目、Firefox 用。
4行目、IE 用。(古いバージョンでは表現できない。)


.謄ストのシャドウ
文字に影をつけるコード。一見バナー風にデザインすることができる。

サンプルコード:テキスト緑、影グレー

テキストのシャドウ

{
color: #009900; 
text-shadow: 2px 2px 3px #333333;
}

1行目テキストのカラー。
2行目シャドウ、先頭の要素が上下のずれ、次に左右のずれ、三番目がぼかしの強さ、最後に影のカラーを指定します。

サンプルコード:全方向に影、ぼかし強め

テキストのシャドウ

{
color: #333399; 
text-shadow:
2px 2px 5px #dc143c,
-2px 2px 5px #dc143c,
2px -2px 5px #dc143c,
-2px -2px 5px #dc143c;
}

カンマで区切って、異なる方向への影を同時に記述することもできます。上記サンプルコードでは全方向へ均等に影を表現しています。


以上!覚えておくとサイトを少しだけ華やかに表現できるCSSコードでした!



節約生活 ひた向きに質の高さを追及する国民性は文化

2013.11.03 Sunday

11月3日今日は「文化の日」ですね。

ところで皆さん、日本の文化ってステキだと思いません?ミャア先生は、日本という国と日本の文化が大好き!

工芸、民謡、舞踊、お茶、習字、武道とあげばきりがないけど、それらすべてが「高い品質」で提供されていることが、「日本の文化」の素晴らしい特色だよね〜

日本製の質の高さ、日本産の安全性は世界でも認められている。そういうのって、誇りに思って良いとおもうんだ!

ただ、ひた向きに質の高さを追及する国民性、それが日本の文化なのだから。

ミャア先生も、常にユーザーの利便性を追求した、質の高いサイトを制作していきたいな〜、と思った今日この頃でした。



節約生活 クイズ100.net リリース!

2013.10.23 Wednesday

新サイトオープンのお知らせです。

またまた、大好きなクイズのサイトを作ってしまった ( *´艸`)

このサイトは、おもしろいクイズネタを掘り下げてトータルで取り扱うブログ形式のサイト!乞うご期待!

クイズ100.net

以下技術的な書留

今回、なんか流行りということで、Word pressでサイトを制作してみた。
が・・・・どうも自分には向いていない。
長年テキストエディタのみでサイトを制作して来たこともあり、人の作ったプログラムに馴染めない体質らしい。

なんせ、ちょっとデザインを変更しようにも、対応するCSSの記述を探すところから始まり、多大な時間と労力がかかっってしまった。( ̄д ̄)

結果「自分には必要のないものだ」という結論に至ったが、やはり爆発的に普及するCMSというのは脅威ではある。
少しの対応の遅れが、大きな機会損失につながる業界なので、Word pressで1サイト運営することで自身の知識として蓄えておこうと思う。




<< | 2/59ページ | >>

節約生活プロフィール

管理人:ミャア先生

このブログは、節約生活の色々な出来事を日記で紹介するはずでしたが・・・最近は単なる管理人ブログと化しています。タイトルに釣られてやって来た人は、なるべく過去の記事を読んでみてください(笑)たまに真面目な記事も書いてます。




節約生活最近のコメント

節約生活最近のトラックバック