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

ちょっと、出かけますiPhoneの画像

iPhoneやばすぎる... おはようございます、カナキです。 今日明日の休暇で遠出、朝から雨ですね (ノД`) それでも楽しまないと。 休暇のスケジュールは、遠出いってますが目的地は秋田市です。(近っ) ・秋田市の文化...続きを読む...

いい日和スマートフォンサイトスクリーンキャプチャ

おはようございます、カナキです。 連日、晴天、テンションあがるぅ♪ 昨日もいい日和、やっとですが、母親の納骨を済ませました。 ひとつ肩の荷がおりた感、安堵しましたよ。 施設の父もこのごろは元気なようで、食品差し入れ催促の...続きを読む...

スマートフォンサイトに対応スマートフォンサイトスクリーンキャプチャ

おはようございます、カナキです。 今日もいい天気になりそうですね♪ 昨日よりiPhone(スマートフォン)生活がはじまったわけですが、自社のホームサイト(boxBoa webデザイン)、スマートフォンサイトに再構築しまし...続きを読む...

html 5+WordPressのサイト設計をまとめてみた1 【備忘録】

あまり時間もとれないんで、html 5の仕様云々はリンク張ったりと横着な感じですすめますよ。 参考にしたサイト html 5で組むにあたり、原文を読み砕く英語力がないので以下のサイトを参考にしました。 仕様など W3C ...続きを読む...

早速、言及ありました、んで誤りを訂正しました 【html 5の件】 ※追記2件あり

言及、来ましたよ。奮闘記が未だなんですがとりあえず間違いは正さないといけませんからね。 カナキのフォト・ログ はてなブックマーク-vantguarde rticle内のsectionとcopyrightをadd...続きを読む...

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値に...続きを読む...