‘css’ カテゴリーのアーカイブ

jquery.lightboxをcss3でクールにカスタマイズ

先日案件でlightbox(ライトボックス)を設置しまして、デフォルトでは芸がないということで体裁をcssでカスタマイズしました。 クローズボタン等を作り、ついでにcss3を利用して角丸、グラデーション、シャドウなども施...続きを読む...

boxBoaサイトで採用したcss3

先日リニューアルしたboxBoaサイトで、css3要素を採用しています。ほとんどのモダンブラウザ(最新版)で再現できるものからテキストシャドウ=text-shadowと角丸=border-radius、ボックスシャドウ=...続きを読む...

html5で組んだWordPressのブログサイト、公開しました

先ずはカナ・ログ(当ブログ)の「今日の一枚」シリーズの写真関連ですが、別ブログに引っ越します。といってもこちらの該当記事はそのまま残しますが。 ことの経緯はhtml5でサイトを作ってみる、 というコンセプトの元にどうぜな...続きを読む...

そろそろhtml5に対応しようと思い、エディタ(DW)をカスタマイズしてみた

おはよございます、カナキです。久しぶりに本業の事でも書こうかな。 今年初めにhtml5の仕様等が勧告(現在も策定中)され、早10ヶ月。完全リリースになるまで静観していたわけですが、ある程度把握しておこうとボチボチリサーチ...続きを読む...

photoshopで画像パーツを作り、CSSを記述 その6container要素に背景画像

左図のように、container要素の下に前回作成した背景画像の上下反転したものを定義します。今回のphotoshopでの作業は前回作成画像を上下反転だけなので簡単です(時間が取れず、安易な記事となりまして...) 今日...続きを読む...

photoshopで画像パーツを作り、CSSを記述 その5content要素に背景画像

左図のように、content要素に背景として表示させる画像をphotoshopで作成し、cssで定義します。photoshopでの作業が工数が多く、グラデーションや光彩などの効果がポイントとなります。 今日の分のサンプル...続きを読む...

photoshopで画像パーツを作り、CSSを記述 その4header内ナビゲーションリンクに背景画像

左図のように、header内のパンくずリストというかナビゲーション・リンクの部分の背景を作ります。画像作成のポイントとしては、ユーザ環境にてテキストサイズを大きくした際に背景画像が見きれないよう、タテサイズを少し大きめに...続きを読む...

photoshopで画像パーツを作り、CSSを記述 その3header要素に背景画像

header要素の背景画像として、左図のような縞模様をphotoshopで作成します。それからサンプルページにてcssでbackgroundプロパティとして定義します。背景画像はheader全体のサイズを一つの背景として...続きを読む...

photoshopで画像パーツを作り、CSSを記述 その2ページ本体部分に背景画像

※仕切り直しのその2。 先ず最初に左図のようなシャドウをページの本体に付けようと思います。サンプルページのhtmlの構造として、body直下のdiv要素pageクラスに、今回photoshopで作成するシャドウ画像を背景...続きを読む...

photoshopで画像パーツを作り、CSSを記述 その1先ずはこんな風にやりますよ【概要】

※仕切り直しという訳で、タイトルも変えました。htmlの変更箇所はbody要素直下にdiv要素pageクラスを追加して、その2「ページ本体にシャドウ」の内容はdiv要素pageクラスに定義します。 以前シリーズで「CSS...続きを読む...

CSSの記述と画像パーツをphotoshopで作る 諸事情から仕切り直し【号外】

号外、スタートサンプル仕切り直しで作りなおします(すみません)。その訳は今回のTips、記事毎に作りながらのフローなんですが理由として、photoshop部分のチャプター画像作るのが二度手間になるからとか。でも気づきまし...続きを読む...

CSSの記述と画像パーツをphotoshopで作る その2ページ本体部分に背景画像

※仕切り直しということで、再スタートしました。再スタート記事は→photoshopで画像パーツを作り、CSSを記述 その1先ずはこんな風にやりますよ【概要】←こちらに移動してください。 先ず最初に左図のようなシャドウをペ...続きを読む...

CSSの記述と画像パーツをphotoshopで作る その1先ずはこんな風にやりますよ【概要】

※仕切り直しということで、再スタートしました。再スタート記事は→photoshopで画像パーツを作り、CSSを記述 その1先ずはこんな風にやりますよ【概要】←こちらに移動してください。 というわけで、以前シリーズで「CS...続きを読む...

CSSの記述その10 footerをやって一端終わり【最終回】

今回で一端終わりです。footer内はaddress要素でマークアップしたコピーライトテキスト、デフォルトが斜体で表示になります。日本語の場合、斜体は読みづらいのでノーマルな表示に成形します(といってもカナ・ログの文字だ...続きを読む...

CSSの記述その9 sideカラムの装飾

sideカラムのリンクリストを装飾します。(以下Read more…から)

CSSの記述その8 content内dlまわりの装飾

content内のdlをcssで定義します。同じcontent内のポストメタデータのリスト内にdl要素があるので、このまま#content dlに対してスタイル定義すると、ポストメタデータのdlにも継承されるので、新たに...続きを読む...

CSSの記述その7 パラグラフ内img画像とテキスト

content内、パラグラフの中に画像がありますが、図(上)のように画像の下揃えで右にテキストが続いています。図(下)のように画像の上揃えでテキストが続くようにします。パラグラフ内画像をfloatプロパティでleft値に...続きを読む...

CSSの記述その6 ポストメタデータdl部位成形

contentブロック内、h2見出し直下のポストメタデータ部位を成形します。投稿者、投稿日、カテゴリーの各項目をliで定義し、さらにその内容を含めた項目ごとdlで定義しています。親要素のliをfloatで横系に並列させて...続きを読む...

CSSの記述その5 header内ナビゲーションリンク成形

左図のようにheader内ナビゲーションリンクの成形をします。縦系にリストされたリンク列を横系列にし、直上のパラグラフとの行間を調整します。 これまでの記事 CSSの記述その1 先ず1行目あたりから CSSの記述その1....続きを読む...

CSSの記述その4 見出し要素のテキストを成形

先ずは見出しテキストから左図の感じで成形しようと思います。 これまでの記事 CSSの記述その1 先ず1行目あたりから CSSの記述その1.5 11.17の続き CSSの記述その2 大枠ブロック要素をレイアウト CSSの記...続きを読む...