2ページ目 | CSS

ココ Windows IE でレイアウトが崩れてますね

昨日は、CSS Naked Day という事で、ちょっとだけコードを見直ししたのですが、久しぶりに Windows IE で確認してみると恥ずかしい状態だった事に気がつきました。ちょっと反省しております。


まぁ、仕事では Windows IE の確認は外せないのですが、私の個人サイトという事でサボっておりました。 今晩くらいに少し修正しようかと思います。


SwapSkills勉強会:CSSで作るiPod touchのWEB

Webクリエイターのための勉強会SwapSkillsのセミナーイベントがアップルストアで開催されるそうです。

銀座のイベントは告知期間が10日間程の短い期間だったの ですが、100名以上の方が集まったそうです。凄く忙しいのですが、allWebクリエイター塾の人には会ってみたいと前々から思っていたので、夕食休み?として仕事を抜けていって参加してみようと思っています。


【日時】:2008/03/14 19:00-20:00
【場所】:アップルストア 名古屋 栄
【費用】:無料
【定員】:20名(先着順)
【内容】:iPodtouchが与えたもの、iPodtouchから学ぶモバイルCSS


銀座のアップルストアのようなセミナールームが栄にもあったらいいのにねぇ...


clip プロパティを使ってみよう!


CSS clip で検索してみても、どう使ったらいいのか書かれているところが見当たらないので、書き残しておきます。320x240サイズの写真の一部を120x120に見せるためのHTMLとCSSの書き方になります。 a-blog の photolog ? の機能では、縮小表示させて切り取る部分を最小にして表示させるという方法をとってます。



「clip プロパティを使ってみよう!」の続きを読む

画像を正方形で表示させる


データ上は、正方形じゃないものでも、なんとか正方形に見せて表示させる事ができるようなCSSの記述をおぼえました。上の写真が下のようになります。結構、無理矢理書いてますので、ブラウザによってはダメかもしれませんけど...




フォトギャラリーでサイズが違ってデコボコしてた部分をこれでキレイに見せる事ができそうです。ちなみに以下のように書いてあります。


<div class="img" style="width:60px; height:60px;">
<img src="/dev/archives/2005/07/images/1120271492.jpg"
width="80" height="60" style="position: absolute; 
clip: rect(0px 70px 60px 10px); margin-left: -10px;"></div>

この clip を利用したimgタグは縦横のサイズが無いような扱いになるようで、それだとレイアウトするのに困るという事からdivで囲ってサイズを指定してあります。

また、センターでトリミングしてあるのでずらした分は、margin-left や margin-top をマイナス指定して位置をあわせてやらないとレイアウトが崩れます。ちょっと、スマートじゃないですが、プログラムの方で自動で出来るようなものを書いてあるので、今後は楽にできそうです。


山本一道

山本 一道

有限会社アップルップル

名古屋のホームページ制作会社「有限会社アップルップル」の代表をしています。弊社で開発しているCMS「a-blog cms」や、名古屋の「WCAN」という名古屋のWeb制作者のためのセミナーの主催や、コワーキングスペース「ベースキャンプ名古屋」も始めました。

test

エントリーリスト

カテゴリーリスト

タグクラウド

  • ベースキャンプ名古屋に新しく27インチ 2560x1440 のディスプレイが追加されました。 でも、最大解像度で表示できるケーブルが入荷していないので 1920x1080 の表示になっています。

    kazumich

    Type: image / Filter: Normal / Link / Feb 18th, 2017

    Comments: 0 / Likes: 4

  • マカベン始まりました! #758markup

    kazumich

    Type: image / Filter: Normal / Link / Feb 18th, 2017

    Comments: 0 / Likes: 3

  • 今日のベースキャンプ名古屋では「YouTube勉強会」が開催されています。Super Chat というサービスが開始されたみたいです。

    kazumich

    Type: image / Filter: Normal / Link / Feb 11th, 2017

    Comments: 0 / Likes: 7

  • 席を確保しランチ!

    kazumich

    Type: image / Filter: Normal / Link / Feb 09th, 2017

    Comments: 0 / Likes: 8

  • 順調に進化している森田さんが JS の勉強会で jQuery のプラグインを作った事について発表している。

    kazumich

    Type: image / Filter: Normal / Link / Jan 21th, 2017

    Comments: 0 / Likes: 6

  • 今日はアップルップルの非公開な社内勉強会で「ブランディング勉強会」を、社外から先生(ワクグミ田川さん)を招いて全員で受講しています。

    kazumich

    Type: image / Filter: Gingham / Link / Jan 18th, 2017

    Comments: 0 / Likes: 9

  • 今日は千代さんと2017年版のサイトについて打ち合わせでした。 http://chiyo-katsumasa.com

    kazumich

    Type: image / Filter: Normal / Link / Jan 18th, 2017

    Comments: 0 / Likes: 5

  • 週に1回はココに。

    kazumich

    Type: image / Filter: Normal / Link / Jan 11th, 2017

    Comments: 0 / Likes: 12

  • 恒例の年末のイベントが終わって、1年が終わりです。皆、1年ありがとう!

    kazumich

    Type: image / Filter: Normal / Link / Dec 29th, 2016

    Comments: 0 / Likes: 12

  • 今年も忘年会終わった!

    kazumich

    Type: image / Filter: Normal / Link / Dec 29th, 2016

    Comments: 0 / Likes: 4

実践! コンテンツファーストのWebサイト運用  a-blog cmsではじめるCMSプロトタイピング

2016年6月30日に株式会社ボーンデジタル様より「実践! コンテンツファーストのWebサイト運用 a-blog cmsではじめるCMSプロトタイピング」が発売されました。