株式会社オンズのブログ記事一覧
タグ "CSS" を含む投稿を表示中：97件
-
【CSS】スタイルシートの基本：セレクタを一覧にしてまとめました。 CSS2 セレクタ 一覧 セレクタ名 パターン 簡単な説明 ユニバーサルセレクタ * 全ての要素に適用 タイプセレクタ E E要素に適用 子孫セレクタ E F E要素の子孫にあたるF要素に適用 クラスセレクタ E.warning warni... 【CSS】スタイルシートの基本：セレクタを一覧にしてまとめました。続きを読む →
-
-
-
【CSS】レスポンシヴ対応のグリッド・システムを作ってみた。 今さら……という感じがしなくもないですが、レスポンシヴ対応のグリッド・システムを作ったのでシェアします。 巷に出回っているものは横幅をピクセル単位で指定しているものが多いのですが、今回はパーセント単位で、ウィンドウサイズに合わせてフレキシブ... 【CSS】レスポンシヴ対応のグリッド・システムを作ってみた。続きを読む →
-
-
-
-
-
【CSS3】話題のパララックス効果をスクリプト無しで実装する方法。 昨年、2013年度あたりから普及し始め、今年も大流行したウェブデザインのテクニックの１つである［パララックス・スクロール］をCSS3だけで実装する方法を紹介します。 パララックス（Parallax）とは日本語に訳すと「視差効果」を意味し、主... 【CSS3】話題のパララックス効果をスクリプト無しで実装する方法。続きを読む →
-
【CSS3】約60種類のエフェクトが使えるCSSライブラリ［Animate.css］が神懸かっている理由。 今日紹介する［Animate.css］は、アニメーションさせたい要素に任意のクラス名を追加するだけで、合計66種類のエフェクト効果を導入することができるCSSライブラリです。 http://daneden.github.io/animate... 【CSS3】約60種類のエフェクトが使えるCSSライブラリ［Animate.css］が神懸かっている理由。続きを読む →
-
モバイルデバイス（iPad、iPhone等）でサイトを観覧時に、右側に空白ができてしまう時の解決策。 レスポンシヴデザインを採用したサイトに多く見られるのですが、iPadやiPhone、または各社のスマートフォン等のモバイルデバイスでの観覧時に、ウィンドウの右側、あるいはコンテンツの右側に、意図していない余分な空白ができてしまうことがありま... モバイルデバイス（iPad、iPhone等）でサイトを観覧時に、右側に空白ができてしまう時の解決策。続きを読む →
-
【CSS3】［display:table-cell;］に［margin］を指定したい場合の処理。 CSS3 から使えるようになった新しいプロパティ display:table; とdisplay:table-cell; は、これまで［float］を使って組んでいたレイアウトを、より直感的に、より簡単に実現できるので大変便利です。 しかし... 【CSS3】［display:table-cell;］に［margin］を指定したい場合の処理。続きを読む →
-
【CSS】長めのURL等の記述が枠からハミ出してしまう際の自動折り返しの設定方法。 HTML で長めの URL を記述した際に、親要素のボックスからハミ出してしまうことがあります。 そんなとき、CSS の設定で自動で折り返しをさせる方法が存在します。 使用するのは以下のスタイル。 word-wrap:break-word;... 【CSS】長めのURL等の記述が枠からハミ出してしまう際の自動折り返しの設定方法。続きを読む →
-
【CSS】文字の間隔を調整する［letter-spacing］を指定したときの、中央揃え・右揃えの処理。 文字の間隔を調整する［letter-spacing］を指定したとき、同時に［text-align:center;］や［text-align:right;］を設定していると、最後の文字の後ろに空欄が挿入されているために思うように描画できないこ... 【CSS】文字の間隔を調整する［letter-spacing］を指定したときの、中央揃え・右揃えの処理。続きを読む →
-
【CSS】印刷時にのみ有効となるスタイルシートを設定する方法。 今日紹介するのは、極めて初歩的なテクニック。しかし、ご存じない方も多いかもしれません。 通常の CSS とは別に、印刷時にのみ有効となるスタイルシートを設定する方法です。 通常、何も意識せずに普通に記述した CSS は画面表示時と印刷時で同... 【CSS】印刷時にのみ有効となるスタイルシートを設定する方法。続きを読む →
-
【CSS】デバイスが縦長か横長かの状態によって Media Queries で振り分けが可能です。 各種デバイスの横幅によって振り分けることが多い［Media Queries］ですが、デバイスが縦長か横長かの状態によってでも振り分けが可能です。 使用するのは「orientation」要素。 縦長の場合は「portrait」を。 横長の場合... 【CSS】デバイスが縦長か横長かの状態によって Media Queries で振り分けが可能です。続きを読む →
-
-
【CSS3】ブラウザによって異なるフォーム要素のデザインをリセットする方法。 ウェブ観覧時に使用するブラウザによって、フォーム関連のデザインが若干異なって描画されます。 これを良しとしない場合、そのデザインをリセットするために、CSS3では新たに［appearance］プロパティが追加されています。 基本的な使い方は... 【CSS3】ブラウザによって異なるフォーム要素のデザインをリセットする方法。続きを読む →
-
【CSS】Google Chrome や Android 系のブラウザで［background-attachment］のエラー。 PC版の Google Chorome も含め、スマートフォンの Android 系のブラウザで、背景画像の描画が思いどおりにいかないときがあります。 例えば、背景画像がコンテンツの上に重なってしまっていたり、パララックス系のデザインで背景... 【CSS】Google Chrome や Android 系のブラウザで［background-attachment］のエラー。続きを読む →
-
【CSS3】計算式が使える［css calc］の使い方。 CSS で縦横の長さを設定する際、四則計算が使えることは知っていましたか？ これは［calc()］というプロパティで実装でき、しかも［SASS］や［LESS］などのメタ言語を使わない単独のCSSです。 例えば、「横幅に「パーセンテージ値」を... 【CSS3】計算式が使える［css calc］の使い方。続きを読む →
-
【CSS】セレクタ一覧 個人的な備忘録を兼ねて。 CSSS3 の疑似セレクタを含めた一覧表を掲載しておきます。 有事の際にご利用ください。 セレクタパターン 意味 セレクタの種類 CSSレベル * すべての要素を対象にするセレクタ ユニバーサルセレクタ 2 E E... 【CSS】セレクタ一覧続きを読む →
-
【CSS3】最新の単位［vw］［vh］［vmin］［vmax］の解説。 通常 CSS で要素の幅や高さを指定する際は px や % といった単位が一般的に使われますが、最近のブラウザでは、この他に vw、vh、vmin、vmax という単位がサポートされています。 Viewport パーセンテージ 「vw」の「... 【CSS3】最新の単位［vw］［vh］［vmin］［vmax］の解説。続きを読む →
-
【CSS 3】border 要素にグラデーションを施す方法。 通常これまでは、1px のボーダーのグラデーションを実現する際、背景画像を用意して［background-image］プロパティを利用するのが一般的な方法でした。 しかしレスポンシヴ・デザインやスマートフォン対応のWebサイトの構築などによ... 【CSS 3】border 要素にグラデーションを施す方法。続きを読む →
-
