ONZE/BLOGオンズ開発ブログ

モバイルデバイス（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 で振り分けが可能です。続きを読む →

【CSS】リストマークに使える三角形をCSSだけで表示する方法。 リストマークや矢印として最適な三角形を、CSS だけで表示させる方法を紹介します。 キモとなるのは CSS の［border］プロパティ。この［border］の描画システムを覚えれば、三角形だけでなく様々な形を表現することができます。 まず… 【CSS】リストマークに使える三角形をCSSだけで表示する方法。続きを読む →

【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 要素にグラデーションを施す方法。続きを読む →

［CSS］だけでオンズのロゴを作ってみた。 ちょっとした遊びゴコロを発揮して CSS だけでオンズのロゴマークを作る方法を模索してみました。 もともと比較的簡単な構成のロゴマークなので、それほど難しくはないと思っていましたので、ちょっとハードルを上げるために１つのルールを定めました。… ［CSS］だけでオンズのロゴを作ってみた。続きを読む →

【CSS3】JavaScriptを使わずにコピーを禁じる方法 JavaScriptを使って右クリックを無効にして、コンテンツのコピーを防止するテクニックがあります。 今日はCSSだけでコピーを禁止する方法を紹介します。 具体的にはCSS3から実装された「user-select」を利用することになります… 【CSS3】JavaScriptを使わずにコピーを禁じる方法続きを読む →

【CSS】html に記述した［br］タグを無効にして改行させない方法。 通常、html内に<br>タグを記述すると、ブラウザでは半ば自動的に改行されて表示されます。 CSSSでの指定で、この<br>タグの働きを無効にして、任意の箇所で改行させないようにする方法を紹介します。 br { d… 【CSS】html に記述した［br］タグを無効にして改行させない方法。続きを読む →