2009-05-24

CSS Happy Life様のビギナー向けのエントリーを実際に組んでみた。その５

web制作 CSS

今回でビギナー向けカテゴリも最終回のようです。
取りあえず最終回：コンテンツ部分のデザインを完成させる - CSS HappyLife

１．「メイリオ」
メイリオは和文ゴシック体フォントということです。
メイリオ - Wikipedia

２．「画面の色を拾いたい場合はカラーピッカー使うと良い」
サイトを見ていて、自分のサイトにも使用したいと思ったりした時によさそう。時期をみてインストールします。

３．「ボリュームによってdiv要素を追加」
将来的にコンテンツが増えるようであれば、div要素を使用する。余白指定を確保するのに便利ということらしいです。

４．「見出し横のボタンの配置はpositionで指定」
これは目から鱗でした。確かに、floatで組むより楽ですね。
詳しい記事は、見出しの横などにボタンを配置 - CSS HappyLifeを参照。
これからのコーディングに使わせてもらいますね。

display:blockを使わずにa要素が心なしかボタンっぽくなってるのは、paddingとline-heightで調整しているからです。

というのが、ポイントのようです。

５．「li要素にimgを使いたい場合は、background指定」
li要素でlist-style-typeでマークを指定しないのは、位置調整が上手くいかないからです。
リストマークの大きさにもよると思いますが、滅多に上手くいかないので自由度が高いbackgroundで指定するのをオススメします。

とのこと。なるほど、これも使えそうなので真似させてもらいます。

ということで、完成しました！！！
一から基本をやり直すと、見えてくるものもたくさんあって、目から鱗が落ちまくりでした。
ありがとうございました。

引き続き、CssHappyLife様と(個人的に勝手に)お付き合いさせて頂きますので、よろしくお願い致します。

2009-05-22

CSS Happy Life様のビギナー向けのエントリーを実際に組んでみた。その４

web制作 CSS

なんだか記事を書く毎にトラバしているので、スパムと勘違いされたらどうしようと思っている今日この頃です。
あわわ、決してトラバスパムではないです。純粋にCSSを学びたいだけです、ハイ。

今回はサイドのデザインをば。
サイドのデザインを - CSS HappyLife

１．「リンク貼り」
そういえば、前の会社でこれに似た貼り方をしている方いました。webデザイン重視でコードは、「表示さえすればいい」って思っているwebデザイナーにはなりたくないと思ったのは言うまでもありませんｗ

２。「text-transformについて」

見た目は大文字になりますが、コピってメモ帳とかに貼り付ければ書いた通りに表示されます。

ちょっと面白い機能。

３．「aにリストマークを指定すると」

a要素に指定することで、リストマーク部分もクリック出来るようになります。
CSS HappyLifeのCategoriesでは、li要素にマークとかの指定をしているのでマーク部分はクリックできません。
一応コレには理由があって、リンクを貼ってない場合も同様に見えるからです。
今回のサンプルのようにa要素に指定してると、リンクが貼られないリストには何のスタイルも適用されないのでかっこ悪くなっちゃいます。

状況に応じて使い分けですね。
li要素に指定するのとa要素に指定する場合の違いがわかりました。

2009-05-21

CSS Happy Life様のビギナー向けのエントリーを実際に組んでみた。その３

web制作 CSS

出来上がっていくのが、楽しいです。
今日はフッターの部分です。はりきって組んでいきます。(｀・ω・´)
フッター部分を - CSS HappyLife

１.「回り込みの解除(clear:both)」
div要素でclass指定して別口でクリアするものだとばかり思っていたのですが、そうでもないのですね。CSSを使うメリットの一部に「htmlファイルの容量を削減すること」とありますので、div要素で別口でクリア設定を組むと容量の無駄になるといえばそうなのでしょうか。

ちなみにclearは一方の解除も指定出来るので、clear:leftで左の回り込みを解除でもOKです。

今回は「float:left;」のみの使用だったので、「clear:left」の解除でもOKということ(個人メモ)。

２．「上書き」

#foot p {  
	margin:0 0 2px 0;  
}

を入れたことにより、foot内のpタグにのみ適用を上書きということだと個人的には解釈しました。

2009-05-20

CSS Happy Life様のビギナー向けのエントリーを実際に組んでみた。その２

web制作 CSS

今回も、前回に引き続き組んでいきます。
2段組 - CSS HappyLife

１．「閉めタグの前にコメントを入れる」
divタグでidを指定する時に、閉めタグがかなり離れてどれが閉めのdivタグかわからない時があるので、記述の仕方を工夫するとわかりやすいです。

例：<!-- side END --></div>

２．「sideにmargin-right:10pxを指定」
この行で実際にIE6で観たはずなんだけど(PCのIEは確かIE6)、よくわからないのでもう一度読み直します。理解力なくて、ごめんなさい＞＜；

３．「container内のidにスタイルを適用させてから、containerのスタイルを適用させる」
こうすれば、細かい修正にヤキモキすることもないですね。次回使います。

というわけで、こんな感じです。いい感じになってきました♪

しかし、個人的には背景画像を繰り返す為の仕掛けがよくわかってないので、参考エントリーを読んでみます。

2009-05-19

CssHappyLife様のビギナー向けのエントリーを実際に組んでみた。その１

CSS web制作

CSSの基本を確認するということで、今回はCssHappyLife様の素材をお借りしてみました。
お借りした素材は、まずは構成。んで全体、headerをば - CSS HappyLifeより。

このエントリー内で、覚えておきたいところを勝手に記事にしました。
個人メモなので、長文になりますが(ﾟεﾟ)ｷﾆｼﾅｲ!!という方はどうぞ。

１．「構成を書く」
そういえば今まで、全体の構成をある程度脳内で整理はしていましたが、紙に書いてはいないです。途中で、divタグを追加したりと手間がかかったりもしたので、紙かPCでWebデザインの複製にでも構成を書いてみたら、修正の手間が省けるかもしれませんね。
CSSを入れる前に、htmlを完成させるのも次から心がけることにします。

２．「アスタリスクの使用」
今まで、何となくで使っていたものですが、ココでおさらいの意味も含めて。
CSSにおいてアスタリスクは、ユニバーサルセレクタというらしいです。ググってみたり、辞典で調べても差異はないようで、「すべての要素に対してスタイルを適用する」という意味です。ブラウザの差異をなくすためにユニバーサルセレクタでリセットします。

CSS セレクタに関するおさらい | WWW WATCH
この方のブログに、すごく詳しく載っていました。
ユニバーサルセレクタ以外のセレクタも載っていて、初心者の私でも面白そうだと思いました。

３．「背景画像はリピートさせる」
背景は小さく切り出して(こちらの背景画像の場合、４×４pxの画像)、リピートさせること。
背景画像を小さくしてリピートさせるメリットは、聞いた話では『画像ファイルの容量も少なくなるから、表示も速くなる』ということみたいです。
他にどんなメリットがあるか、お解かりの方コメントお待ちしています。

４．「中央寄せ(センタリング)はmarginの右左をauto指定」
い、一応知っていたんだからねっ！！！(ツンデレ風)

※1：IE5とかIE6の過去互換モードとかの場合、bodyにtext-align:centerを指定して、全体を囲っているdiv（サンプルだと#page）にtext-align:leftとmargin:0 autoを指定することで、センタリングできます。

まず、「IE5とかIE6の過去互換モード」って何だろう？と思い、とりあえずググってみました。初心者の私でもわかりやすかったのが、こちらのページでした。
標準準拠と過去互換〜CSSテクニック〜

とりあえず、過去相互モードによる解釈の違いで思うように表示してくれないといった問題を、CSSのbodyというセレクタにtext-align:centerを指定して、全体を囲っているdiv（サンプルだと#page）というセレクタに、text-align:leftとmargin:0 autoを指定することで、センタリングできるということでしょうか。

５．「余計なdivは使うな」
ここでdivを使用すると『div厨乙』といわれるのですね、わかります。。。と冗談はさておき。
でも、どうしてh1にbackgroundで背景指定して、下のように表示されるのでしょうか？

自分の勝手な解釈ですが、h1に指定するってことはロゴ画像部分の後のみ表示されるということだと思っていたのですが、違うのでしょうか？(というか、表示されている時点でそうではないのだとは思うのですが。)
アホでごめんなさい。

６．「高さや幅からpaddingの分は引け」
「表示させたい高さ(幅)−padding＝CSSで記述するheight(width)」ということ。

2009-05-19

豚インフルエンザとか

雑談

まずはコメレス。
＞どこかの○田さん。
safari4のサイト見ましたｗ<！DOCTYPE html>はFireFoxでも確認できました。
出オチすぎるｗ
safariかー、インストールする利点ってありますか？（←ググレカス

さて、コメレス関係でIE8のオフィシャルサイト観ましたが、今回ウリにしているのはどうも「早さ」と「セキュリティ」みたいですね。
しかも、FireFoxに対してモロ敵対心むき出しｗｗｗ

※Windows 7 に標準搭載される Internet Explorer 8 は Firefox に比べ、セキュリティにおいて優れているという結果が出ています。(出所 : NSS Lab 試算データ)
※サイトの表示スピードにおいて、Firefox よりも 3 倍多くのサイトで最速表示を記録しています。
http://www.microsoft.com/japan/windows/products/winfamily/ie/function/default.mspx

私はFireFoxの早さを知ってから、IE使えなくなったです。
FireFoxの便利さに目覚めるまで、スレイプニル厨でしたが封印してしまいました。
OSもWindowsはお金かかるわ、ウィルス対策しないといけないわで面倒くさいので、サブPCでネットブック買う際は、Ubuntuにしようかと妄想中です(ただし、欲しいと思っているけど、活用方法があまりないので我慢中)。
Ubuntuを入れようと考えたのはモロ少佐の影響です、ハイ。
少佐のPCにインスコしてあるUbuntuを操作したけど、Windowsに近いので苦痛もなかったので。
でも、今のPCにUbuntuを入れても恐らく使わないとは思います。

というか、まず、今使っているPC自体使いこなせてないともいえますがｗ
過去にXAMPPをインスコしたが、活用方法がなくアンインストールしたり。。。
また、PHPとかPerlを勉強する段階になった時に、お世話になると思います。

さてさて、やっと本題。
豚インフルエンザが流行ってますねー。大阪市内在住ですが、周りを見渡せばマスク・マスク・マスク。もうね、マスクまみれ。
ドラッグストア、ホームセンター、スーパー、果てはコンビニまでマスクは売り切れ状態です。
せっかくの平日の三連休だというのに、街を歩けば休校の子供がウロウロしているし、マスクをして外出しなければならないし、やっぱり家に引きこもっているのが得策だと思いました。
まぁ、仕事が閑散期真っ只中の５月ですから、勉強でもしてさっさと転職フラグ立てようと思います。

仕事で忙しいってのは、ありがたいことと思う今日この頃なのでした。

2009-05-18

いつの間にか・・・。

雑談

いつの間にかコメントをたくさん頂きまして、ありがとうございます。
このブログ、スパムトラバやコメントが多いので承認制にしているのですが、こんなにコメント頂くとは思っていませんでした。

それでは恒例のコメレスから。
＞ラルちゃん。
ありがとうです、ありがとうです(嬉)。
そういえば、mixiの日記にPCのモニターが壊れたという記事書いてたね。早く届いて復旧することを祈ります。そういや、遊びに行った時に教えてもらった鬼畜ゲーム、少佐がたまにプレイしているよｗ　観ているだけでテラオモシロスｗ
ちなみに、ゆっくり少佐のデフォルトの台詞は『ゆっくりしね！』か『ゆっくりふぬぅっていってね！』ですｗ

＞どこかの○田さん。gizmo_sさん。
そういえば、IE7なんて代物がありましたね(汗)。
さっさと追いついて、IE7やIE8関連のエントリーも読みたいのですが、まだまだ未熟者といったところです、ハイ。私の場合、どちらかというとIE対策より、FireFoxにまず綺麗に表示されないので、とりあえず、FireFoxにwebデザインした通りに表示される事が前提かもしれません。

そういえば、私もmixiを細々とやっていまして、今の会社で仲良くなった方々にマイミクしてもらっているのですが、その方々から日記にコメントできないよーとよくいわれます。
ちなみに、mixiの日記はこのブログを表示させています。
たぶん、ほぼ全員ケータイから閲覧してきていると思うのですが、mixiブラウザ経由で観ているのでコメントできないと思われます。

まぁ、細かい理論はわからないし、説明もできないので割愛しますが、コメントしたい方は一番手っ取り早い方法として、パソコンでmixiを開いてコメントしてください。
いや、パソコンなんて家にないし。ケータイからしかmixi観ないよ・・・って方は、ケータイで直接このURL【http://d.hatena.ne.jp/midora333/mobile】を入れてアクセスしてください。ケータイのお気に入りでも登録しておけば、おｋ。

時事ネタなんですが、大阪でも豚インフルエンザの感染者が広がっていますね。
東京から感染者が広まるとばかり思っていたから、神戸・大阪で流行るとは思っていませんでした。職場でもマスクつけてる人は増えたけどねー。

それとは関係ないですが昨日、仕事中に頭痛と身体がだるくて帰宅後に熱を測りましたが、平熱。動く気にもなれず、彼氏にアイスを買ってきてもらったり、氷枕を用意してくれたりと気を使ってもらいました。ありがとう。お蔭様で、今日は身体のだるさもだいぶ減って頭痛もなく元気になりました。
なので、心配してくれた方々、ありがとうございました。

追記：
＞少佐
アーッ！！！　そうだたorz
どこかの○田さん、gizmo_sさん、ごめんなさい。