CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ

2011/06/16 1640 users CSS 挙動 クセ CSSサンプル Webテクニック

CSSでWebデザイン、レイアウトするときに気をつけておきたいブロックレベル要素のクセをもとめてみました。ブロックレベル要素をdisplay:inlineしたときや、floatさせたときなどの挙動などを中心にCSSサンプルも作りました。スタイルシートでレイアウトするときに参考にしてもらえればうれしいです。Webテクニック CSS Share Webデザインをするときに必ず使うスタイルシート。思うよ... 続きを読む

CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め

2011/04/21 1555 users CSS 半日 ころ Webテクニック トラブル

CSS、スタイルシート初心者の頃悩んだりハマったことを少しまとめてみました。フロートまわりのトラブルや、IE特有のhasLayout問題など。Webテクニック BeginnerBrowserCSS Share CSS、スタイルシート。初心者のころにはCSSのスタイルがうまくいかなくて、半日や丸一日悩んだこともいっぱいありました。最近ではやっとひと通り覚えて思うようにできるかなーという感じです。今回... 続きを読む

たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE | コリス

2010/07/14 1404 users コリス padding Eee background 一行

上記デモのスタイルシート ※クリックで拡大 「CSS3 PIE」の使い方は簡単で、既存のCSS3に一行を追加するだけです。 適用前のCSS #myElement { background: #EEE; padding: 2em; -moz-border-radius: 1em; -webkit-border-radius: 1em; border-radius: 1em; } 「CSS3 PIE」... 続きを読む

スタイルシートによる崩れない　2カラム　3カラム・レイアウト

2005/09/18 1365 users レイアウト 3カラム 2カラム モジラ float

ネットサーフィンをしていると、floatを使って段組しいていて、レイアウトが崩れているサイトを時々見かけます。 ほとんどの場合が、左のみwidthを指定しているが、右に指定していない場合です。これはWINのIEでのみ段組されて表示されますが、モジラ等では、右部分は下に回りこんで表示されます。　ということで、ここでは上下にヘッダーとフッターを置いたサンプルを使いながら、メイン表示部分を左右2段にスタ... 続きを読む

CSS(スタイルシート)の基本、小技、テクニック総まとめ｜Webpark

2013/03/24 1313 users CSS Webpark 小技 基本 目次

CSSの基本や使える小技テクニックなどを幅広くまとめました。以前書いて今もそこそこアクセスがある「CSSの知識をもっと深める30+2の小技テクニック集｜Webpark」という記事があるのですが、2年近く前の記事ですしパワーアップさせて作り直しました。 恐らく過去最長の記事ですので目次を作りました。クリックするとするりと移動します。基本的な内容が多いですが、お役に立つ項目があればうれしいです。 とい... 続きを読む

HTMLとスタイルシート（CSS）の業務スキルレベル　判別表　（５段階） - 主に言語とシステム開発に関して

2011/07/02 1281 users CSS 言語 HTML システム開発 エンジニア

html, css, デザイン | HTMLおよびスタイルシート（CSS）を利用したWebページ制作の，簡易スキルチェックのための調査表。印刷用。 マークアップ・エンジニアとしてのレベルを測定する。これは，「Webページをコーディングして作る人」全般に当てはまる。 レベルは，０から４までの５段階。（０） 非エンジニア（１） 初学者（入門書を学習してゆく段階）（２） ノーマル（基礎的な知識があり，あ... 続きを読む

[CSS]チェックしておきたい、スタイルシートのテクニックのまとめ | コリス

2011/07/06 1091 users コリス CSS テクニック まとめ

Archive by month 2011年7月 (10) 2011年6月 (51) 2011年5月 (46) 2011年4月 (45) 2011年3月 (33) 2011年2月 (43) 2011年1月 (40) 2010年12月 (48) 2010年11月 (52) 2010年10月 (54) 2010年9月 (47) 2010年8月 (59) 2010年7月 (49) 2010年6月 (43... 続きを読む

CSS（スタイルシート）でbodyに設定しておくと便利な5つのポイント - デザインウォーカー | DesignWalker - ロサンゼルスで働くウェブデザイナーの日記

2007/02/02 1038 users DesignWalker ウェブデザイナー padding

本日は、実用的なCSS（スタイルシート）のお話。CSSコーディングを始める一番最初にbodyタグに設定しておくと、結構便利かな？と思われるポイントをまとめてみました。。 margin:0; padding:0; margin:0; padding:0;って設定しておくと、とりあえずブラウザの標準で設定されている余白を無くす事ができますね。ブラウザごとにこの余白の設定はまちまちなもので、わたくしは最... 続きを読む

スタイルシートを書く時のガイドライン - 2xup.org

2006/07/11 939 users ガイドライン 2xup.org

2006-07-11T19:56:28+09:00 会社ではやっているのだけれど、自分のウェブサイトでもやってみよう。と簡略記述を利用する場合の値の順序やらもまとめとく必要があるのかもしれないけれど、セットフォーマットルールやプロパティの順番だけをサクッとまとめて資料にしてみました。課題は残したもののこれだけでも相当すっきり。詳細やセットフォーマットルールに関しては、ダウンロードできるようにしてい... 続きを読む

スタイルシートによる崩れない　2カラム　3カラム・レイアウト

2005/09/21 872 users レイアウト 3カラム 2カラム モジラ float

ネットサーフィンをしていると、floatを使って段組しいていて、レイアウトが崩れているサイトを時々見かけます。 ほとんどの場合が、左のみwidthを指定しているが、右に指定していない場合です。これはWINのIEでのみ段組されて表示されますが、モジラ等では、右部分は下に回りこんで表示されます。　ということで、ここでは上下にヘッダーとフッターを置いたサンプルを使いながら、メイン表示部分を左右2段にスタ... 続きを読む

CSS3について知っておきたいことのまとめ｜Webpark

2011/08/03 826 users まとめ｜Webpark CSS3 セレクタ プロパティ CSS

CSS3には興味深い様々なプロパティがありますが、これらを勉強するにあたって知っておきたいCSS3の基礎をまとめてみます。 過去の記事に手を加えたものや新たに書いたものなど幅広くまとめてみましたので、ぜひ抑えておいてください。 今回は結構ボリュームもあるので目次を作っています。 1. スタイルシートの構造 CSS3に限ったことではないですが、CSSの構造は下の図のように、セレクタ、プロパティ、値と... 続きを読む

[CSS]いろいろな問題を解決する1行のスタイルシート集 | コリス

2008/03/11 785 users センタリング コリス line-height フロート 横幅

CSS Globeのエントリーから、スタイルシートのレイアウトで生じる問題を解決する８つの1行のスタイルシートの紹介です。 8 Premium One Line Css Tips 縦方向のセンタリング 高さが固定されている場合、「line-height」を使用して、縦方向のセンタリングが実装できます。 デモページ line-height:24px; はみだす箇所を隠す 横幅の広い画像などをフロート... 続きを読む

CSSレイアウト時のよくやる失敗と対処法｜WEB制作（html,css(スタイルシート) )｜プログラムメモ

2008/01/25 779 users HTML,CSS Web制作 失敗 対処法

■floatでレイアウトしたときのボックスの間に隙間が出来る →隙間が出来るボックス要素全てに float 要素を追加 ■ <div>内に配置した<img>が<div>よりサイズが小さいと隙間が出来る → 下記を追加 img { display: block; } ■ Win IEだけずれる時があり、ずれる大きさがフォントサイズによって変わる →ずれる<div>等に vertical-align ... 続きを読む

WordPress初心者がハマリやすいエラーや問題とその解決方法 | コリス

2011/11/06 751 users WordPress テンプレート パンくず 全部 URL

WordPressでブログやサイトを作成・運営する際に役立つ、ハマリやすいエラーや問題とその解決方法を紹介します。 下記は各ポイントを意訳したものです。 テーマとテンプレートの違いは？ 画像が表示されない URLを全部書くのが面倒 パンくずを設置したい ページごとに異なるスタイルシートを適用したい 新しい記事を表示したい テーマとテンプレートの違いは？ 問題 WordPressのテーマファイルとテ... 続きを読む

CSS 設計の長い夢 - ペパボのフロントエンドスタンダード

2015/06/10 750 users ペパボ CSS shikakun フロントエンド リポジトリ

「ペパボのフロントエンドスタンダード」のトップは こちら スタイルシートの夢 この項目の担当 @shikakun 今朝、夢を見ました。夢のなかで、僕はスタイルシートを書いていました。 そのスタイルシートは、書きやすくて、読みやすくて、壊れない。そんな「運用しやすい」CSS でした。満足げに仕事を終えたところで目が覚めると、僕の隣り（ローカル環境のリポジトリ）には、ウェブサービスの長い歴史のなかでさ... 続きを読む

[CSS]box-shadowを使って、紙がふわりと浮かんだようなエフェクトをつけるスタイルシートのまとめ | コリス

2012/02/27 735 users コリス box-shadow Effec エフェクト CSS

デモ 実装 デモ デモはbox-shadowに対応した下記のブラウザでご覧ください。 対応ブラウザ Internet Explorer 9.0+ Firefox 3.5+ Chrome 1+ Safari 3+ Opera 10.5+ 実装 基本となるHTML 8つの各デモのHTMLの基本は同じで、class名が異なるだけです。 <div class="box effect"> <h3>Effec... 続きを読む

ウェブ制作に役立つ、便利な最近のオンラインサービスのまとめ -2011年1月 | コリス

2011/01/16 732 users コリス ウェブアプリケーション ワイヤーフレーム ウェブ制作

最近リリースされたものを中心に、デザイン、スタイルシート、ワイヤーフレーム、データベースなどに役立つオンラインサービス・ウェブアプリケーションを紹介します。 続きを読む

[CSS]ブラウザ間の差異を無くすリストのスタイルシート | コリス

2008/03/04 720 users レンダリング コリス リズ エントリー CSS

Konstruktors Notesのエントリー「How to Create Beautiful and Elegant HTML Lists Using CSS」から、CSSを使用して美しくエレガントなリストを制作する方法を紹介します。 How to Create Beautiful and Elegant HTML Lists Using CSS 各ブラウザによるリストのレンダリングの差 リス... 続きを読む

CSS3の制作をぐっと楽にする厳選20のオンラインツール | コリス

2012/07/10 718 users コリス セレクタ グリッド シャドウ ボーダー

CSS3アニメーションをはじめ、グラデーションやシャドウやボーダー、テキストやボックスをかっこよくしたり、レスポンシブデザイン用のグリッド、セレクタの使い方など、スタイルシートの制作時に役立つオンラインツールを紹介します。 Animate.css classを付与するだけで、さまざまなCSS3アニメーションが実装できます。 初っ端からオンラインツールじゃないですが、簡単にCSS3アニメーションが利... 続きを読む

[CSS]overflowを使ってfloatの問題を解決するスタイルシートのテクニック | コリス

2011/03/10 712 users overflow Demo コリス float フロート

下記は各ポイントを意訳してものです。はじめにDemo 1: overflow:auto;Demo 2: overflow:hidden;overflowを使って生じる問題点と解決方法はじめにフロートベースのレイアウトをする際、ラッパーとなるコンテナがフロートしている子要素に対して高さを拡張しないことは、普通によくある問題です。デモ：１ フロートをクリアする要素を配置して解消した例しかし、この問題を... 続きを読む

[CSS]今、そして近い将来に使用するであろうスタイルシートのテクニック集 | コリス

2011/02/17 684 users コリス CSS テクニック集 近い将来

CSS3のテクニックはさまざまなものがありますが、その中からまさに今、そして次のプロジェクトに使用したくなるテクニックを紹介します。下記は各ポイントをピックアップして意訳したものです。はじめにStyling HTML5Classing like HTML5Media QueriesStyling Occasional ChildrenStyling Occasional ColumnsRGB Al... 続きを読む

たった一行でさまざまな要素をレスポンシブ対応にするスタイルシート -Fluidity | コリス

2014/03/25 676 users コリス SVG 一行 レスポンシブ対応 iframe

画像やテーブル、地図などを配置するiframe, video, canvas, svgなど、主にボックス系のHTML要素をシンプルなコードでレスポンシブ対応にするスタイルシートを紹介します。 外部ファイルとして使用するのでそれでも一行ですが、中身も一行（115文字）の超軽量スタイルシートです。 Fluidity Fluidity -GitHub Fluidityのデモ Fluidityの使い方 F... 続きを読む

bodyに設定しておくと便利な3つのポイントとおまけ｜CSS HappyLife

2007/02/11 676 users Body DesignWalker オマケ ウェブデザイナー

CSS（スタイルシート）でbodyに設定しておくと便利な5つのポイント - デザインウォーカー | DesignWalker - ロサンゼルスで働くウェブデザイナーの日記を読んで、ボクなりな最初に指定して置くと良いポイントを上げたくなったので書いちゃいます。 むしろこのサイトの方向性的に有った方が便利だよなーと。 書くきっかけを頂き、感謝いたします。 ちなみに、最初に指定しておくポイントってそれぞ... 続きを読む

[CSS]じっくりコードを勉強したくなる、ブラウザのスタイルをリセットするスタイルシート -Normalize CSS | コリス

2011/06/02 671 users デフォルト 一味 コリス リセット用スタイルシート 特徴

Normalize CSSの主な特徴 Normalize CSSの対応ブラウ Normalize CSSのデモ Normalize CSSの使い方 Normalize CSSの主な特徴 Normalize CSSは、他のリセット用スタイルシートとは一味違った特徴を備えています。 有用なデフォルトはそのまま 多くのリセット用スタイルシートは異なり、有用なデフォルトのスタイルは維持します。 スタイルの... 続きを読む

[CSS]じっくりコードを勉強したくなる、ブラウザのスタイルをリセットするスタイルシート -Normalize CSS | コリス

2011/06/01 671 users デフォルト 一味 コリス リセット用スタイルシート 特徴

Normalize CSSの主な特徴 Normalize CSSの対応ブラウ Normalize CSSのデモ Normalize CSSの使い方 Normalize CSSの主な特徴 Normalize CSSは、他のリセット用スタイルシートとは一味違った特徴を備えています。 有用なデフォルトはそのまま 多くのリセット用スタイルシートは異なり、有用なデフォルトのスタイルは維持します。 スタイルの... 続きを読む