株式会社オンズのブログ記事一覧
タグ "CSS" を含む投稿を表示中：97件
-
【CSS3】JavaScriptを使わずにコピーを禁じる方法 JavaScriptを使って右クリックを無効にして、コンテンツのコピーを防止するテクニックがあります。 今日はCSSだけでコピーを禁止する方法を紹介します。 具体的にはCSS3から実装された「user-select」を利用することになります... 【CSS3】JavaScriptを使わずにコピーを禁じる方法続きを読む →
-
【CSS】html に記述した［br］タグを無効にして改行させない方法。 通常、html内に<br>タグを記述すると、ブラウザでは半ば自動的に改行されて表示されます。 CSSSでの指定で、この<br>タグの働きを無効にして、任意の箇所で改行させないようにする方法を紹介します。 br { d... 【CSS】html に記述した［br］タグを無効にして改行させない方法。続きを読む →
-
【CSS】ボックスを［height:100%;］で画面全体に表示させる方法。 CSSを使ってボックスを画面全体に表示させたいとき、通常は［height:100%;］と指定するだけなのですが、なぜか思いどおりの高さにならず、1時間近くもハマってしまいました。 ウェブ制作者ならば誰もが一度は陥るであろうこの問題の解決策を... 【CSS】ボックスを［height:100%;］で画面全体に表示させる方法。続きを読む →
-
【CSS3】マウスオーバーで半透明の波紋が広がるエフェクト。 CSS3で、半透明のリングが波紋のように広がるエフェクトを作ります。 百聞は一見に如かず。 まず最初にデモをご覧ください。 【CSS3】マウスオーバーで半透明の波紋が広がるエフェクト CSSで円を作るにはbordar-radiusを使います... 【CSS3】マウスオーバーで半透明の波紋が広がるエフェクト。続きを読む →
-
【CSS】リンク先のURLやファイルの拡張子に合わせてアイコンを表示する方法。 普通のリンクだと思ってクリックしてみたら、実はそれがPDFファイルへのリンクだったり、意図せずメール・アプリケーションが起動したり、またはワードやエクセルのファイルだったりするとさらに最悪…。ネットサーフィンをしていると、そんなフラストレー... 【CSS】リンク先のURLやファイルの拡張子に合わせてアイコンを表示する方法。続きを読む →
-
【CSS】マウスカーソルの形状を変える。 CSS の［cursor］プロパティで、マウスカーソルの形状を変更する方法を紹介します。 マウスカーソルの形状 通常「cursor」プロパティには以下の値を指定できます。 auto default pointer crosshair mov... 【CSS】マウスカーソルの形状を変える。続きを読む →
-
【CSS3】電光掲示板を再現するテクニック。 昨日の記事で紹介した［CSS3 Marquee］を改造して、電光掲示板を再現する方法を紹介します。 百聞は一見に如かず。 まずはデモページをご覧ください。 →CSS3 電光掲示板 基本的な作り方は［CSS3 Marquee］と同じです。 :... 【CSS3】電光掲示板を再現するテクニック。続きを読む →
-
【CSS3】全ブラウザ対応！ CSS3 で作る marquee の実装。 HTML5からは非推奨（廃止？）となり、今となっては懐かしい<marquee> タグ。 内包する要素をスライドさせて表示することができるこのタグは、一時は廃れたかのように見えましたが、最近再び見直されるようになり、同じ動作をする... 【CSS3】全ブラウザ対応！ CSS3 で作る marquee の実装。続きを読む →
-
CSSの［text-rendering: optimizeLegibility;］は指定しないほうが無難かも。 WordPress のデフォルトのテーマファイル「Twenty Fourteen」のスタイルシートを眺めていたところ、［text-rendering: optimizeLegibility;］という見慣れないプロパティがあったので調査してみ... CSSの［text-rendering: optimizeLegibility;］は指定しないほうが無難かも。続きを読む →
-
【CSS】先頭の文字を大きく表示する。 洋書でよく見かけるこの表現。 これは p:first-child:first-letter プロパティを使うことで、一番始めのパラグラフの一番始めの文字だけに指定することができます。 p:first-child:first-letter {... 【CSS】先頭の文字を大きく表示する。続きを読む →
-
【CSS】番号リストの表示を変更する方法。 通常は ol ＋ li 要素を使って番号付きのリストを表示させることができますが、「第１章、第２章…」や「１問目、２問目…」など、数字と一緒に他の単語も表示させたい場合は counter-increment プロパティを使い、:before... 【CSS】番号リストの表示を変更する方法。続きを読む →
-
【CSS3】テキストに蛍光ペンでマーカー線を引いたような効果を加えるには？ テキストに、単に背景色を加えるだけなら background でしていできますし、下線を引くなら border-bottom や CSS3 の text-decoration-line で実装できます。 今回はもっとグラフィカルに、蛍光ペン... 【CSS3】テキストに蛍光ペンでマーカー線を引いたような効果を加えるには？続きを読む →
-
【CSS3】マウスオーバーした際に画像を拡大させるCSSテクニック。 当サイトでも随所で多用使っている、マウスオーバーした際に画像を拡大させるCSSテクニックを紹介します。 まずはこちら。CSSの設定です。 img.grow { -webkit-transition:0.2s ease-in-out; -mo... 【CSS3】マウスオーバーした際に画像を拡大させるCSSテクニック。続きを読む →
-
【CSS3】フォントサイズは「rem」で指定するのが最適解。 CSSでフォントサイズを指定するとき、通常は「em」、「%」、「px」あたりを使って指定することが多いと思いますが、CSS3から利用可能になった「rem」という新しい単位が非常に便利なので、その使い方を紹介します。 「rem」とは「root... 【CSS3】フォントサイズは「rem」で指定するのが最適解。続きを読む →
-
【CSS】2行目以降を1文字下げる［text-indent］の使い方。 箇条書きや注意書きの文章を書く場合に、文章の先頭に「・」や「※」などの記号を記述することがよくあると思います。 しかし、2行目以降がその記号の下に回り込んでしまうことが気になっている方も多いのではないでしょうか。 手作業で地道に改行を入れた... 【CSS】2行目以降を1文字下げる［text-indent］の使い方。続きを読む →
-
【CSS3】テキスト選択時のハイライトのカラーを変更する方法。 CSS3を用いて選択したテキストのスタイルを変更する方法を紹介します。 ::selection {background:#1aa;} 基本的にはこの一行で変えることができます。 ただし。このままだとFirefoxには対応していないようなので... 【CSS3】テキスト選択時のハイライトのカラーを変更する方法。続きを読む →
-
【CSS3】わずか2行の CSS3 でmarqueeを再現する方法。 先日、スマートフォン専用サイトの制作を依頼されまして、その際、marquee タグによるデザインを同時に打診されました。 しかしながら、HTML5ではmarqueeタグは非推奨。 今後は廃止予定のタグということで、別の方法を模索。 jQue... 【CSS3】わずか2行の CSS3 でmarqueeを再現する方法。続きを読む →
-
HTMLタグ、CSSタグの読み方。 HTMLやCSSのタグ。普段何気なく使っていますが、制作者同士で話題にするときになってはじめて、その正確な読み方がわからないことに気づくことがあります。 間違った読み方を口に出してしまうと恥ずかしいですし、ちょっと困るときがあるんですよね。... HTMLタグ、CSSタグの読み方。続きを読む →
-
-
【CSS】スタイルシートを使ってブラウザのスクロールバーを消す方法。 CSSを使ってスクロールバーを非表示にする方法を紹介します。 通常、width や height で指定されたコンテンツが表示域よりも大きくなった場合に、自動でブラウザの横や下部にスクロールバーが表示されるわけですが、CSSを使って簡単に、... 【CSS】スタイルシートを使ってブラウザのスクロールバーを消す方法。続きを読む →
-
各種プログラム言語でのコメントタグ（コメントアウト）表記のまとめ。 HTML、CSS、PHP、JavaScript（jQuery）、.htaccess、各種プログラム言語でのコメントタグの一覧です。 コメントタグで囲われたテキストはサイトを観覧したときには表示されません。 ただし、ソースを見ればそのまま表示... 各種プログラム言語でのコメントタグ（コメントアウト）表記のまとめ。続きを読む →
-
【CSS】意外と知られていない［text-overflow:ellipsis;］の使い方。 CSSの「text-overflow」は、テキストが領域からはみ出ている場合の処理を指定するプロパティです。 表示する文字が多かった場合、省略したことを表すために「...」と表示することが多々ありますが、これがCSSだけで可能になるんです。... 【CSS】意外と知られていない［text-overflow:ellipsis;］の使い方。続きを読む →
-
【CSS】-webkit-font-smoothing で safari の文字の太さを調節する。 Mac OS 及び iOS の Safari では、他のブラウザと比べて文字が太く表示されます。 本来であればこれを CSS の「font-weight」プロパティで調節したいところですが、残念ながら根本的な解決に至らないケースがほとんど。... 【CSS】-webkit-font-smoothing で safari の文字の太さを調節する。続きを読む →
-
【社内用】サンプルコード：Flexbox HTMLテンプレート HTML <div class="flex-container flex-container-X"> <div class="flex-item">1</div> <div class="flex-... 【社内用】サンプルコード：Flexbox HTMLテンプレート続きを読む →
