cssの最近のブログ記事

CSS Nite in SENDAIから派生した勉強会、dachas(ダッチャス)。
2010年第1弾はdachasのロング・バージョンとして「dachas x CSS Nite」を開催します。 

益子さん、鷹野さんをお迎えし、「HTML5とCSS3」と「コンテンツを考えるワークショップ」の2セッションを予定しています。

詳細・お申込はdachas Webサイトをご覧ください。

------------------------------------------------ ↓ Aki's Think ↓ ------------------------------------------------

HTML5とCSSを使うにあたって

最近よく話題に上がる「HTML5とCSS」。

web制作をしているとCSS3を使いたくなる場面が多々でてくるので、
そろそろ本格的にお勉強しないとなぁと思っております。

使おうかなぁと思うものの、「プロジェクト」となると
HTML5とCSSの「スキルの共有」ができないのが現状。

人に説明できるくらいになれるように益子さんのお話をじっくり聞いて勉強します!


ユーザーのニーズ

今回は「アクセスマップ(地図)」を用いたワークショップ。

地図で思い出した出来事があります。

前回のdachasのあとみんなで仙グルを使って懇親会会場探し。
地図便利!しかも写真でお腹が空いている私の食欲を増進!

サクっと会場を決めて、念願の厚焼き玉子をいただきました。

「ニーズに合ったコンテンツってこれだ。」と考えさせられました。


今の私の課題はユーザーのニーズをどのように把握してお客様に説明するか。
お客様の考える理想のコンテンツとユーザーの求めるコンテンツの
差異を埋めるための分析・調査がスムーズに行えるようになりたいですね。







脈絡なくツラツラと書きましたが、私はこんなことを踏まえてdachasに参加します。

同じようなことを考えている人がいいたらお気軽にお声がけください。
それでは、みなさんの参加をお待ちしています☆

bn_dachas_banner.png

Firefoxではしっかりと表示されている背景画像。

IEでは表示されないという現象あり。

まとめて書いていたプロパティを分解することで解決。


    background:url('../img_top/ti_new.png') no-repeat;




    background-image:url('../img_top/ti_new.png');
    background-repeat:no-repeat;

仕様?バグ?

コリス
scrs_collis.pngCSS、JavaScript 、WordPress…その他、webサイトの構築に必要な情報が詰まっています。調べものをしていると、かなりの確立で出てきます。お世話になっております。


to-R
scrs_tor.pngjQueryをはじめとした様々なJavaScriptライブラリについて、その他にもSEO対策、CSS、Movable Typeなどの情報を発信しています。西畑さんが制作したライブラリもあり、活用させていただいております。


CSS HappyLife
scrs_csshappy.png名前の通りCSSがメイン。様々なサンプルがあるので、導入調査をする時などにとても役立ちます。
そして、平澤さんのラフだけどラフすぎない文章が大好きです。私とタメなのでとても親近感が…(*^▽^*)
余談でした。。。


WWW WATCH
scrs_watch.pngwebの最新情報がチェックできます☆XHTMLやCSSの情報はもちろんですが、それ以外にブラウザの動向であったり最近のwebサービスについてなど、サイト制作に必要な情報がGETできていいですよ!


DesignWalker
scrs_dswalker.pngデザインに関することはココ!ボタンやアイコンを制作するのに必要なテクスチャやアイコンなどを探すときには必ず見ます。
制作の時だけでなく、目が肥えるようにオシャレなサイトを探すときにも利用しています。

前に書いた「heightLine.js」がなぜかIEとOperaで上手くいきませんでした…。

ということで違う方法を探したらミラクルなCSSでの実現方法が載っていました♪

外枠のdivの中に高さをそろえたいdivを入れてあげます。
中に入れた二つのdivのpadding-bottomを最大限に伸ばしてあげます。
そしてネガティブマージンで相殺してあげます。

外枠のdivにはみ出た部分の表示を見せないように指定してあげます。

CSSはこんな感じにしました。

#line_suppo {
overflow: hidden;
}
#content , #aside {
padding-bottom: 32768px;
margin-bottom: -32768px;
}

なんと高さが揃うではありませんかっヾ(@⌒▽⌒@)ノワーイ!
スタイルシートはネガティブマージンを使うと
デザインの幅がかなり広がります。

これはミラクル!という使い方をご存知の人はぜひ教えて下さいね(*・人・*)

※ネガティブマージンとは:marginにマイナス値を設定すること。

参考サイト:CSS-EBLOG

ようやく会社のホームページのリニューアルが終盤を迎えました。

試行錯誤、何から何まで手探りです。

今日はCSSで段組をしているdiv(ブロック要素)の高さを揃えるというお題が出てきました。
CSSだけでは上手に行かず、「heightLine.js」を使いました。

対象のdivに「class="heightLine"」を指定してあげるといいとか。
が、全ページに埋め込む作業はメンドクサイ…。

と思いつつも悩んでいる時間がないので、マンパワーで頑張ります!

参考:
ブロックレベル要素の高さを揃えるheightLine.js

はまったぁ~(。>0<。)ビェェン

JavaScriptでCSSを読み込んであげる技を使おうとしていますが、優先順位で苦労しています。
CSSは基本的に後に書いたもの(読み込んだもの)が優先されるようになっていますが、そうはいかないことがありませんか?

CSSの優先順位はセレクタの獲得ポイントで決まります。
*(全称セレクタ)      = 0
要素(p,h1 などのタグ) = 1
class(擬似も)       = 10
id               = 100

ハイレベルスタイルシート講座サイバーガーデンの益子さんに教わりました(*^-^)
わかっていながらも、、、、、、はまっています…。

このお話、明日へ続く…カモしれない…。

今日はHTMLを組んでいます。

スタイルシートがアタシの作業を右へ左へ動かします…。

遊ばれっぱなし(ノ◇≦。)

ということで次からはスタイルシートに振り回されないように…
_〆ヾ( ̄(エ) ̄ メモメモ・・・

このアーカイブについて

このページには、過去に書かれたブログ記事のうちcssカテゴリに属しているものが含まれています。

前のカテゴリはCMSです。

次のカテゴリはCSS Niteです。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

CSS Nite in SENDAI

dachas