ONZE/BLOGオンズ開発ブログ

【CSS3】jQuery無しで動く［Pure CSS Modal Popup］の実装方法 通常「モーダル・ポップアップ」はjQueryを利用して実装するケースが多いかと思いますが、今回紹介する［Pure CSS Modal Popup］は、その名のとおりスタイルシートの設定だけで実装できる便利なテクニックです。 まずは下記URL... 【CSS3】jQuery無しで動く［Pure CSS Modal Popup］の実装方法続きを読む →

【CSS3】ブラウザの限界を突破した極小サイズの文字を表示させてみた。 ウェブでフォントサイズはどこまで小さくできるのか？ 今日は、そんな素朴な疑問に挑戦してみます。 スタイルシートで指定できるフォントサイズの限界 通常、CSSではフォントサイズを指定する際に font-size:12px; などと記述します。... 【CSS3】ブラウザの限界を突破した極小サイズの文字を表示させてみた。続きを読む →

【CSS3】要素を横並びに配置する［display:table;］と［display:table-cell］の使い方。 複数の要素を横並びで表示させたい場合、これまでは display:inline; か float を使うか、あるいは <table> 要素で組むか、そのいずれかの方法を利用するのが一般的でした。 それが CSS3 からは dis... 【CSS3】要素を横並びに配置する［display:table;］と［display:table-cell］の使い方。続きを読む →

【Font】Google Web Fonts で日本語フォントの［Noto Sans Japanese］を使う。 これ、いつから使えるようになっていたのでしょうか？ 今さらなのかもしれませんが Google Web Fonts で日本語フォントの［Noto Sans Japanese］が利用できるようになっていたので、その導入方法を紹介します。 「No... 【Font】Google Web Fonts で日本語フォントの［Noto Sans Japanese］を使う。続きを読む →

【ONZE Reset CSS】新しい「スタイルシート・リセット」のカタチ。 今日は「リセット用スタイルシート」について、その概要と私たちの見解、またウェブサイト制作の現場で実際に利用しているオンズ独自のスタイルシート［ONZE Reset CSS］を紹介していきます。 「スタイルシート・リセット」とは？ 各ブラウザ... 【ONZE Reset CSS】新しい「スタイルシート・リセット」のカタチ。続きを読む →

【CSS3】壮大な宇宙にトリップできる［DarkForce.css］を紹介します。 今日はオンズのオリジナルのスタイルシート［DarkForce.css］を紹介します。 まるでスターウォーズに登場する宇宙船に乗っているような感じで、壮大な宇宙の彼方にトリップしていけるCSSのテクニック。 まずはサンプルをご覧ください。 O... 【CSS3】壮大な宇宙にトリップできる［DarkForce.css］を紹介します。続きを読む →

【CSS】スタイルシートの基本：セレクタを一覧にしてまとめました。 CSS2 セレクタ 一覧 セレクタ名 パターン 簡単な説明 ユニバーサルセレクタ * 全ての要素に適用 タイプセレクタ E E要素に適用 子孫セレクタ E F E要素の子孫にあたるF要素に適用 クラスセレクタ E.warning warni... 【CSS】スタイルシートの基本：セレクタを一覧にしてまとめました。続きを読む →

【CSS3】ローディング中のテキストをアニメーションで表示する［Animated Type Loader］の実装方法。 テキストベースで、ローディング中のアニメーションを表示する［Animated Type Loader］の実装方法を紹介します。 まずはサンプルをご覧ください。 CSS3 Animated Type Loader：サンプル・デモ JavaSc... 【CSS3】ローディング中のテキストをアニメーションで表示する［Animated Type Loader］の実装方法。続きを読む →

【WordPress】公式アイコンフォント［Dashicons］の使い方。 WordPress 3.8以降から、アイコンフォント［Dashicons］が導入され、主に管理画面で使用されています。 通常は管理画面でのみ使われていますが、種類も豊富でデザインも秀逸なので、テーマファイルに組み込んでデザインの一部として活... 【WordPress】公式アイコンフォント［Dashicons］の使い方。続きを読む →

【CSS】レスポンシヴ対応のグリッド・システムを作ってみた。 今さら……という感じがしなくもないですが、レスポンシヴ対応のグリッド・システムを作ったのでシェアします。 巷に出回っているものは横幅をピクセル単位で指定しているものが多いのですが、今回はパーセント単位で、ウィンドウサイズに合わせてフレキシブ... 【CSS】レスポンシヴ対応のグリッド・システムを作ってみた。続きを読む →

【CSS3】親要素の大きさに依存して画像の表示方法を変える［object-fit］プロパティの使い方。 CSS3から新たに使えるようになった「object-fit」プロパティについて解説します。 聞き馴れない名前のプロパティかと思いますが、主に画像のアスペクト比に作用して、表示領域に対しての画像の大きさを変更する場合に使います。 ……文章の説... 【CSS3】親要素の大きさに依存して画像の表示方法を変える［object-fit］プロパティの使い方。続きを読む →

HTML5の独自データ属性にCSSを効かせる方法。 HTML5から「独自データ属性」または「カスタムデータ属性」と呼ばれる新しい仕様が追加されました。 この機能により、任意のhtmlの要素に接頭語「data-」で始まる属性値を付与することで、プライベートな値を設定できるようになりました。 一... HTML5の独自データ属性にCSSを効かせる方法。続きを読む →

【CSS3】最新のスタイルシートのテクニック「flexbox」を使ったアコーディオン風のウェブデザイン。 ウェブブラウザの最新版のヴァージョンや獲得シェアのパーセンテージがわかる「Outdated Browser」というサイトがあります。 「Google Chrome」、「Firefox」、「Internet Explorer」、「Safari... 【CSS3】最新のスタイルシートのテクニック「flexbox」を使ったアコーディオン風のウェブデザイン。続きを読む →

【CSS3】マウスホバー時の様々なエフェクトを実装できる［Hover.css］が便利です。 マウスホバー時のエフェクトが数多くまとめられた［Hover.css］を紹介します。 導入方法は非常に簡単で、配布されているCSSのファイルを読み込み、エフェクト処理を施したい箇所に任意のclassを指定するだけです。 公式版のデモサイトも公... 【CSS3】マウスホバー時の様々なエフェクトを実装できる［Hover.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］が神懸かっている理由。続きを読む →