CSSの最近のブログ記事

僕が今使っているAdobe web premiumには、Fireworksというソフトが収録されています。
PhotoShop、Dreamweaver,Illustratorなどは誰もが知っているかと思いますがFireworksとは一体なんでしょう？
まず、Adobeのページで調べてみました。
Adobeのページのタイトルは、ずばり
「スクリーングラフィック」「プロトタイプ作成」との記述がありました。
プロトタイプ作成とは、ホームページの制作にあたって初期の構想段階であります。
こんなレイアウトで、ここのこのような文章を入れてなど大まかな感じを設計することを指します。

そしてこのソフトですが詳しく見た所、Web用の画像編集ソフトのような感じの事が書いてあります。
と、文章ばかり書いていてもよくわからないので立ち上げてみた。



ふむふむ、ツールバーは↑から選択・ビットマップ・ベクトル・Web・カラー
ほぉ、Photoshopと違う所はベクトルが書けるという所かな。
そして実際にいじってみた。
なんと！Webボタンにはリンクまで付いているではないか！
5分ほど触った感想を書いてみると。
PhotoShop+Illustrator+Dreamweaver的なソフト。
まぁ、プロトタイプ作成なので全ソフト的なものではないと作れないわけだが。
結構面白いこのソフト。
最終的には、CSSレイアウトを外部スタイルシートと一緒にエクスポートする機能までが付いているそうです。
かなり興味深いソフトでした。

BODY内でCSSを読み込む　禁断のJava Sctipt!!!

とある、CMSを利用していた時にどうしてもHEAD領域をいじれない事情が出てきました。
もしや、同じ現象に悩んでいる人もいるのではないか？
と考えGoogle先生に「BODY　CSS　読み込み」で聞いてみた。
すると、禁断のJava Scriptが帰ってきたのであった。

それが...これだ！

<script>
window.onload=function(){
var css=document.createElement("link");
css.setAttribute("rel","stylesheet");
css.setAttribute("type","text/css");
css.setAttribute("href","kindan.css");
document.getElementsByTagName("head")[0].appendChild(css);
}
</script>


これをBODY内に表記することによって「kindan.css」を読み込むというCSS
このスクリプトを使うとどんなことができるのか？という方はご想像にお任せ致します
。
最近のウェブシステムや、CMS、ウェブアプリケーションはScriptタグを許可していない所が多いので実用性は低いのですが
もしかすると、あんなことやこんなことができるかもしれません。

ブログを初めて、早1年が経ちましたが今後もWebデザイナーの方、コーダーの方に必見の情報をお届けしたいと思いますので
どうぞ、よろしくお願い致します。

最近、かなり忙しいです。
忙しいだけに、学ぶ事がたくさんあります。
時間が流れるのが早いので、あっこれは便利だと思ったことはできるだけブログに書いていきたいと思いました。
今日はDreamweaverというかホームページ制作で便利だと思った技をご紹介。
ホームページに点線を入れたいと思ってベタの画像を載せようのしましたが
縦とかだとかなりかっこ悪いし、縮めたりする時不便。
HTMLで点線かけそうな気もするけど
やっぱりCSSでしょ。
点線を書きたい部分に1px×縦もしくは横のDivを書いてあげます。
それでCSSのバックグラウンド指定でPhotoshopで書いた
1pxが黒の点残り2pxくらいが白とか透過とかにして
XとかYとかでリピートしてあげます。
これで完成。後の伸縮も自由自在。
初歩的な技ですが便利です。

ウェブページを制作するにあたってブラウザはかなり重要です。
いろいろとカスタマイズできるFirefoxを使いはじめていますが
アドオンといって機能を追加する事ができます。
その中で僕が使っている使えるアドオンを紹介しちゃいます。

GooglePreview
GoogleとYaooの検索結果にウェブページのプレビューを追加します。
参考にしたいウェブを探すのに便利。

はてなスクリーンショット拡張
ブラウザのスクリーンショットを撮ったりするアドオン
ブログをあげる時に画像化できちゃいます。

Measurelt
画像のピクセルをメジャーで測る事ができます。
フォトショップでヘッダーを作るときのピクセルの参考などにできます。

Firebug
個人的にお気に入りです。指定した場所のソースコードを見たりできます。
CSSをいじるのに無くてはならない存在となってます。

基本的にはこのへんのアドオンを入れてこのブログサイトをいじったりしています。

今、作っている他のブログでリストが付いているものがありました。
・お勉強
・ブログ
・3月
このようになっている物はCSSでリストと呼ばれています。
・だけではかなり寂しいのでこの・を画像にしてみます。
該当のCSSを見つけだして。。
今回は下記のような部分

div#utilities dl dd ul li {
    margin: 0.5em 0;
        list-style-image:url("/img/ico2.png");
}


list-style-image:url("/img/ico2.png");

が追加した部分です。
そうして・だった部分が画像にすり替わりました。
リストに色が付いただけでWebもがらりと印象が変わります。

テキストが寂しいので文字に影を付けてみました。
ブログのタイトル部分に影が付きました。
記述としては、該当のCSS部分を見つけだして

.asset-name a {
    text-decoration: none;
    text-shadow:#000 3px 3px 2px;
}

今回はこの部分です。

    text-shadow:#000 3px 3px 2px;

この行を追加しただけです。

text-shadow:（カラー）

その後の記述については
ピクセルの指定で左から順番に
１，影の位置で右方向に、どの程度移動した位置か
２，影の位置で下方向に、どの程度移動した位置か
これを指定します。ちなみにマイナスで指定してあげれば反対方向に
影を付ける事も可能です。
３，一番右の値は影のぼかす範囲をしていしてあげられます。
これで、ブログの文字が一層引き立つはずです！
お試しあれー。

CSSをいじっていて背景の色を変えたり背景に画像を指定する
場面が増えてきました。
CSSでは一部分の背景の色を変えたり、画像を組み込む事が
可能になっています。
前回はヘッダの画像で下記のような指定をやってみましたが

div#header {
    background-image:url("http://lunch-blog.com/img/top.png");
    background-repeat: no-repeat;
}

background-image:url("http://lunch-blog.com/img/top.png");
この部分を
background:#ff9900;
にすれば背景の色がオレンジになったりします。
ヘッダだけではなく、ブログの題名部分であったり
左右にあるウィジェットと呼ばれる部分の題名部分なども
同じく画像を指定したり色を変えたりが可能になってきます。
さらに、属性と呼ばれる文章を下に追加するだけで
同じ画像の横方向への繰り返し
background-repeat:repeat-x;
同じ画像の縦方向への繰り返し
background-repeat:repeat-y;
繰り返さない
background-repeat:non-repeat;
など様々な選択が可能になります。

こんにちは！
今日は他のサイトのヘッダの画像も作ってみました。
そしてCSSにバックグラウンド指定で組み込むのですが
今回は組み込み方の紹介です。
まず、対応しているCSSからヘッダーの部分を探します。

div#header {
    background-image:url("http://lunch-blog.com/img/top.png");
    background-repeat: no-repeat;
    width:1000px;
    height:150px;
}
このサイトではこの部分でした。

background-image:url("http://lunch-blog.com/img/top.png");

この部分で背景にイメージファイルで
http://lunch-blog.com/img/top.png
の画像を組み込むという意味になってます。
また、これを絶対パスと言います。
相対パスにすると
/img/top.png
この様に指定しても画像は入ります。
次に
background-repeat: no-repeat;
この文章を入れます。
この文章の意味は背景画像を繰り返し表示させない（リピートさせない）
というような意味になります。この文章を入れないと背景画像が繰り替えし表示され
ちょっと表示がおかしくなります。
最後に
width:1000px;
height:150px;
これは画像の縦幅のピクセル（width)
横幅のピクセル（height)
これを指定してあげています。
あとは、元の画像によってまた違うタグを使ったりして正常に表示させるようにしてあげます。

ここ最近でブログもがらっと変わりました。
一個前のブログから背景の色も、TOPの画像も文字のサイズも
変わっていると思いますが、これはほとんどCSSという物を編集して変化を加えました。
CSSはスタイルシートとも呼ばれていて、視覚的な部分に変化を与えるものです。
拡張子は.css
内容はというと..
.asset-name {    
    font-size: 20px;
    background:url(http://swzaob.com/img/bb.png)no-repeat;
}
こんな感じのものが何度も永遠と下まで続いています。
例えば、上の文章だと
この部分のフォントのサイズは20ピクセルだとか画像はこれだとかを指定しているようです。
このCSSですが駆け出しの僕には大変な作業でした。
MT(ムーバブルタイプ)はCSSをいじればいろいろと出来そうなので、これからもちょこちょこ紹介してみます。