CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め
CSS、スタイルシート。初心者のころには CSS のスタイルがうまくいかなくて、半日や丸一日悩んだこともいっぱいありました。最近では、やっとひと通り覚えて、思うようにできるようになったかなーという感じです。今回は初心者だったころ、ちょっと悩んだことなどをいくつかまとめてみました。 Webサイトの見た目をデザインしていくのに欠かせない CSS。度々これってどうやるんだろうとか、どうしてこうなっちゃうの？というものに遭遇します。また、今までは IE6 をターゲットに含めてましたけど、そろそろ IE7 からをターゲットにすればいいのかなーと思うこともあって、過去のスタイルシートの書き方の習慣を変えようかなとも思っています。 スタイルシートを書いていて、今まで遭遇した不具合やその回避方法、また今まではこうしてたけど、これからは変わるかもしれないなーといものをまとめてみました。もうそんなことしてない
CSSオンリーでJSを使った風のよく使われるテクニック集１０:phpspot開発日誌
Creating 10 Most-Used Javascript Techniques Using Pure CSS Styling | DevSnippets CSSオンリーでJSを使った風のよく使われるテクニック集１０。 よく使われているかどうかは実際はよくわかりませんが、ピュアCSSということでなかなか凄いテクニック集がまとまっています。 我こそはCSSマスターという方は覚えておいてもよさそうです。 写真ギャラリー カーソルを合わせると拡大するアイコン アニメーションするコンテンツスライダー アニメーションするプログレスバー ピュアCSSなLightBox かなり色々なテクニックがなされているようですが、実用的なものが多いですね。 関連エントリ JavaScript使ってないのに使ってる風のピュアCSSなテクニック集 ピュアCSSで実装された吹き出しのデザイン例色々 クリーンなデザイ
| test
mameshibankさん 豆柴日和 amecustomさん アメブロを魅せるブログデザインに変身。ブログ作成方法、カスタマイズ、裏技スキンカスタムCSS編集方法公開！ jade-taさん 脚本家によろしく。 nisishowさん リフォームで地域社会に貢献 ringo417-maさん ★ 月に負け犬 ★ cairさん 広報＆IR担当のオフィシャルブログ shikamaさん 千葉の東京寄りでホームページ制作＆企画・運用中！ saijoさん 経営に終わりはない nina-yuanbeauteさん 芳村仁奈オフィシャルブログ「Nina's Diary」Powered by Ameba frontier-ceo-bossさん フロンティア社長 オフィシャルブログ Powered by Ameba ohtias-ceoさん ソーエネ×オーチアス社長 alfortさん 念ずれば花ひらく「会社経営」
CSSだけでJavaScriptのような動きを実装するサンプル30 – creamu
96332132, iStockphoto/ Thinkstock CSSでかっこいいUIを実装したい。 そんなときにおすすめなのが、『30 Pure CSS Alternatives to Javascript』。CSSだけでJavaScriptのような動きを実装するサンプル集です。 なかなかいい感じのものが揃っています。 Valid Non-Javascript Lightbox JavaScriptを使わずに、libhtbox系の動きを実装。反応が速くていい感じです Create a Content Slider Using Pure CSS さくさくと切り替わるコンテンツスライダー Pure CSS speech bubbles CSSで作る吹き出し型のデザイン Accordion Using Only CSS CSSを使ったアコーディングメニュー CSS-Only Tabbed
【CSS】CSSレイアウト時のIE6対策まとめ | バシャログ。
Adobe の CS5 はなんか凄そうですね。「でもお高いんでしょ？」「ハイ、とても！」 いま会社で使っているアプリは「Macromedia」の Dreamweaver8 と Fireworks8 です。結構バリバリ制作作業していますが、別に不便に感じてないしなー、と思っている sakai です。自宅では Dreamweaver4 と Fireworks4 です。エヘン。 世間では HTML5 や CSS3 の話題も増えてきた今日この頃ですが、実務では相変わらず IE6 との格闘が続いています。 ただ、長年さんざん IE6 対策に取り組んできたこともあり、今ではそれほど IE6 を意識してコーディングすることもなくなりました。 今回は IE6 をターゲットに含めた CSS レイアウトで気をつけたい点をまとめました。 基本ですが、おさらいまで。 大前提 大前提として、IE6 は標準準拠モード
AJAXとCSSで作るクリエイティブなフォーム集「Astounding Ajax/CSS Forms: 30+ Modern Trends」
TOP > WebDesign > AJAXとCSSで作るクリエイティブなフォーム集「Astounding Ajax/CSS Forms: 30+ Modern Trends」 ユーザーとコンタクトが取れる窓口的な役割を持つフォーム。ユーザーが実際に使う部分だけに、そのデザインやわかりやすさ使い勝手によって、目的が達成できるかどうか大きく変わります。今回紹介するのはAJAXとCSSで作るクリエイティブなフォーム集「Astounding Ajax/CSS Forms: 30+ Modern Trends」です。 jQuery inline form validation ちょっとした仕掛けがあるものから、見た目が美しいもの、入力補助が効くものなどなど、様々なフォームがまとめられています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。 詳しくは以下 ■H
CSSハック一覧
2013年3月23日 CSS 異なるブラウザーで見たらレイアウトが崩れる。。CSSハックはそんな時のお役立ち裏技（？）です。私がブックマークしているCSSハックに関するWebサイトがたくさんあったので（Safariがのってない・IE8しかのってない。。等の理由で）、自分用メモ。「こんなやり方もある！」というのがあればコメントして教えてください！ ↑私が10年以上利用している会計ソフト！ Internet Explorer IE6以下 #help_me { _color: blue; } * html #help_me { color: red; } IE7 *:first-child+html #help_me { color: red; } *+html #help_me { color: red; } IE6, IE7 #help_me { /color: blue; } IE8 #h
cssの情報・まとめ
cssの情報まとめです。ローカル 環境にストックしていた情報を 開放してみますのでシェアして 頂ければ幸いです。内容は 結構偏っていると思いますので 参考程度になさってください。 全てのcss情報が有るわけではありません。主観でストックしていたリンク集です。ツールとかメニュー関連とかハックとかいろいろ188の情報です。 ツールオンラインのcssツール。 CSS Validation Service / W3C検証サービス日本語版RoundedCornr / 角丸のHTML・CSSコードを生成してくれるCSS Type Set / ファミリー、色、単語間、行間等をプレビューで確認CSS Text Wrapper / 様々な形のテキストの回りこみを簡単に実現できるCSS Builder / オンラインでスタイルを生成可能Spiffy Box / cssによる角丸を簡単に生成The Box Of
IE6対応・cssのみでマウスオーバー時に噴出しも実装するナビゲーションKntL-Pager
JSや画像を使わず、cssとHTMLオンリー でマウスオーバー時に噴出し状のツール チップの実装が可能なナビゲーション KntL Pagerをご紹介します。これは結構 便利そう。ありがたい事にIE6にも対応、 cssも無料でダウンロードも可能です。 jsや画像を使用せず以下のようなページネーションを実装可能です。 KntL Pager うーん、凄い。これでcssオンリーとは驚きでした。一応ページネーション（ページ送り）のcssとして紹介されていますが、普通にユーザビリティを意識したナビゲーションとして使えそうですね。 対応ブラウザはIE6以上、Firefox1以上、chrome、opera、safariに対応との事。日本語に直してHTMLをアップしてみましたので[sexy-lightbox href=’http://kachibito.net/wp-content/uploads/2010
ポートフォリオを作るときの助けとなるデザインリソース「60+ Helpful Resources for Portfolio Design」
TOP > WebDesign > ポートフォリオを作るときの助けとなるデザインリソース「60+ Helpful Resources for Portfolio Design」 WEBデザインやグラフィックデザイナーなど技術を売り物にする人達に取って自分のショーケース的な存在になるポートフォリオ。現在のWEBでポートフォリオを展開すると言うのはジャンルを問わず、クリエイターでは一般的な事になりつつあります。 One-Page Portfolio Template（Free） 今回紹介するのはポートフォリオサイトを作るときに役立つ、デザインリソース&テンプレートを集めたエントリー「60+ Helpful Resources for Portfolio Design」です。今回は利用できるテンプレートに絞っていくつか紹介したいと思います。 詳しくは以下 ■Minimal HTML Po
[CSS]コンテンツとサイドバーの高さを同じにするスタイルシート
サイドバーがコンテンツの高さと異なる際に、コンテンツと同じ高さのように見せるスタイルシートをwoork upから紹介します。 Really simple CSS trick for equal height columns 仕組みの概要は、コンテンツの右のボーダーを200pxにし、その上にサイドバーを表示して、サイドバーの高さをコンテンツと同じように見せるものです。 HTMLは、コンテンツとサイドバーのdiv要素を内包するdiv要素（wrapper）を配置します。 HTML <textarea name="code" class="html" cols="60" rows="5"> <div id="wrapper"> <div id="maincontent">...</div> <div id="sidebar">...</div> </div> </textarea>
[CSS]角丸を使用しないで、四隅をすっきりみせるスタイルシート | コリス
divで実装したパネルの四隅を1px欠けにして、角をすっきりみせるスタイルシートをonderhond.comから紹介します。
次期Firefox 3.6が対応する新しいWebフォント形式“WOFF”とは？ - フォントブログ
フォントブログ閉鎖と一部記事の移管について 平素はフォントブログをご覧いただき誠にありがとうございます。 数年前よりブログの更新を中止したまま、諸般の事情で過去の記事は公開をしていましたが、 時代に合わない内容や、すでに古い情報をこのまま残しておくのは良くないと考え、 フォントブログを閉鎖することにいたしました。 これまでお世話になった方々、私に様々な機会を与えてくださった方々、 そして約25年間に当ブログをご覧いただいた方々に心より感謝いたします。 私自身2014年に関東から地元へUターンをし、 書体デザイナーやフォントメーカーの方、文字関係者の方と直接お会いする機会が減ってしまったこと、 また私自身の環境の変化により、以前のように情報収集をする時間の確保が難しくなってしまいました。 フォント好きとして初心に帰り、過去の一部の記事は順次個人サイト (PETITBOYS) のブログのほうへ
日本向けのサイトでフォントにLucida Grandeを最初に指定してはいけない - ayu118の日々雑感。
※2013-10-27 追記 ブクマしてくださるのはうれしいのですが、この記事は見てのとおりとっても古いです！！ どちらかというと「当時のIE8/Chromeのバグ」という面が強いと思うので、最新の状況は各自でご確認ください！ 最近やっとIE6を捨ててIE8にしてみたわけなんだけども、どうも特定の文字だけ化ける。 例えば、Yahoo!知恵袋の質問ページでは、「質問日時」や「残り時間」の後のコロンが矢印みたいな記号になってしまう。 他にも化けた文字があるのでコピペしてみるとどうも全角数字っぽい。 で、ググってみたところ Firefoxで全角数字が文字化け - （・∞・） という記事を発見。 Firefoxとありますが、ChromeもIE8も同様な現象が発生する様子。IE7は検証してない。 文字化けの理由はLucida Grandeというフォントにあるようだ。 http://pb.practi
[CSS]ハック無しでIE6でmax-widthを実現するスタイルシート
CSS HackもJavaScriptもIEの条件付きコメントも無しで、IE6でmax-widthを実現するスタイルシートをCSSplayから紹介します。 'max-width' for Internet Explorer IE6 demo: center 実装のポイントとなるのは左右に配置されたdiv要素で、それぞれマイナスマージンを指定します。 コンテンツを配置するdiv要素には「overflow:hidden;」を指定します。 デモでは上記のmax-widthのコンテンツをセンターに配置したものと左右に配置したものがあります。 'max-width' centered 'max-width' left 'max-width' right
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]可変するレイアウト幅の最大値を制限する簡単な方法
[CSS]スタイルシートをほんの少し軽量化する10のTips
CSS2.1とCSS3のプロパティが見やすくまとまったチートシート
http://www.designwalker.com/2010/06/jquery-forms.html
フォントサイズpx,em,%,pt
