CSS

 Computer >> コンピューター >  >> プログラミング >> CSS
  1. CSSで子要素を持つ親要素にスタイルを適用する方法【jQuery・:has()活用】

    CSS3には親要素セレクタが存在しないCSS3の時点では、子要素の有無に応じて親要素へスタイルを適用する「親要素セレクタ」は存在しませんでした。CSS4の草案では、親要素を参照するための「$」記法が提案されており、次のように記述することで li 要素（親）を選択できる予定でした。ul $li ul.sub { ... }jQueryを使った代替方法CSSだけでは実現できないため、従来はjQueryを活用するのが一般的な代替手段でした。1行で記述できるシンプルなコードがこちらです。:has() セレクタは、指定したセレクタに一致する要素を1つ以上の子に持つすべての要素を選択します。<li&

  2. CSSで画像の高さを設定する方法（heightプロパティの使い方）

    CSSのheightプロパティを使用すると、画像の高さを設定できます。このプロパティには、長さ（px、emなど）またはパーセント（%）の値を指定できます。%で値を指定した場合は、画像が配置されている親要素（ボックス）の高さに対する割合として適用されます。 サンプルコード 以下のコードを実行して、画像の高さを設定する方法を確認してみましょう。 <html>    <head>    </head>    <body>       <img style =

  3. CSSのborder-collapse:collapseとborder-collapse:separateの違いを徹底解説

    border-collapseプロパティとは border-collapseは、HTMLテーブルのセル同士の境界線（ボーダー）をどのように表示するかを指定するCSSプロパティです。主な値には「collapse」と「separate」の2種類があり、それぞれテーブルの見た目が大きく変わります。 collapse： 隣接するセル同士の境界線を結合し、1本の線として表示します。すっきりとしたデザインのテーブルを作成したい場合に適しています。 separate： 各セルの境界線を個別に分離して表示します。セル間に隙間ができ、ボーダーが重ならないため、格子状のレトロなテーブルスタイルになります。 c

  4. CSSのpadding-leftプロパティで要素の左パディングを指定する方法

    CSSのpadding-leftプロパティは、要素の左側に設けるパディング（内側の余白）を指定するためのプロパティです。境界線や背景色の内側にスペースを作り、テキストなどのコンテンツが左端に密着しないように調整できます。 padding-leftで指定できる値 padding-leftには、以下の2種類の値を指定できます。 長さ（length）：px、em、remなどの単位で固定値を指定します。例：padding-left: 20px; パーセンテージ（%）：親要素（包含ブロック）の幅に対する割合で指定します。例：padding-left: 20%; コード例 次の例では、1つ目の段落に「

  5. CSSのlist-styleプロパティの使い方を解説

    CSSのlist-styleプロパティとはlist-styleプロパティは、リスト関連の個別プロパティ(list-style-type、list-style-position、list-style-image)をまとめて指定できるショートハンド(一括指定)プロパティです。このプロパティを活用すれば、複数のリストスタイル設定を1つの宣言にまとめることができ、コードがすっきりと読みやすくなります。指定できる値と記述順序list-styleプロパティの値は、通常以下の順序で指定します。それぞれ省略することも可能です。list-style-type:マーカーの種類(例:square、circle、di

  6. CSSのmarker-offsetプロパティの使い方と注意点

    CSSのmarker-offsetプロパティは、リストマーカー(箇条書きの記号や番号)と、そのマーカーに関連付けられたテキストとの間の距離を指定するために使用されます。このプロパティを利用することで、マーカーと本文との間隔を細かく調整し、リストの見た目をコントロールすることができます。 使用例 以下の例では、ul要素に対してlist-styleプロパティで「内側に配置された四角形」のマーカーを設定し、marker-offsetプロパティでマーカーとテキストの間隔を「2em」に指定しています。 <html>    <head>  &

  7. CSSでHTML5入力フィールドのプレースホルダーの色を変更する方法

    HTML5では、placeholder（プレースホルダー）という新しい属性が導入されました。この属性は<input>要素や<textarea>要素に指定することで、ユーザーがフィールドに入力すべき内容のヒントを表示できます。プレースホルダーとはプレースホルダーとは、入力欄に何を入力すればよいかを示す仮のテキストのことです。以下の例では、メールアドレス入力欄に表示されている「email@example.com」というヒントがプレースホルダーです。ユーザーが入力を始めると、このテキストは自動的に消えます。<!DOCTYPE HTML> <html>

  8. CSSを使ってdiv要素を中央に配置する方法をわかりやすく解説

    Webページのレイアウトを作成していると、div要素を画面の中央に配置したい場面によく出会います。この記事では、CSSを使わずに中央配置する方法と、CSSを使って中央配置する方法の2つのアプローチを、実際のコード例とともにわかりやすく解説します。 例1：CSSを使わずに中央配置する（align属性） HTMLのdivタグにalign属性「center」を指定すると、CSSなしでも要素を中央に配置できます。ただし、align属性はHTML5では非推奨とされているため、実務では次に紹介するCSSを使う方法がおすすめです。 <html> <head>  &nbs

  9. DOCTYPEタグを使わずにSAP BSPアプリケーションでCSS3を活用する方法

    BSPアプリケーションにおけるDOCTYPE宣言の課題SAPのBSP（Business Server Pages）アプリケーションでは、レガシーな構成が原因でDOCTYPE宣言が省略されるケースが少なくありません。DOCTYPE宣言がないと、ブラウザは「互換モード（Quirksモード）」でページをレンダリングするため、CSS3の新しい機能が意図したとおりに動作しないことがあります。コードを変更せずにDOCTYPEタグを追加する方法BSPアプリケーションのソースコードに手を加えずにDOCTYPEタグを追加したい場合は、Webサーバー側の設定を活用するか、jQueryをはじめとする各種UIライブラ

  10. SAP UI5のテーブル行にカスタムクラスを動的に設定する方法

    行に対するCSSプロパティの設定方法テーブルの行にCSSプロパティを設定したい場合は、SAP UI5が標準で提供しているテーブル用のCSSクラスと、独自のカスタムクラスを組み合わせて使用するのが効果的です。CSSクラスの定義例.sapMListTbl .<your class name> {    margin: 10px;    color: #ffffff;}このように、標準クラスである sapMListTbl のセレクターに続けて独自のクラス名を指定することで、特定の行やセルにのみスタイルを適用で

  11. Webページを印刷するときに特定の要素を非表示にする方法【CSS】

    印刷時に要素を非表示にする基本の考え方 Webページを印刷する際、「画面では必要だけど紙面には不要」という要素（ナビゲーションやボタンなど）を隠したいケースはよくあります。そんなときは、CSSのdisplay:noneやvisibility:hiddenを@media printと組み合わせて使うことで、印刷時だけ特定の要素を非表示にできます。 @media print を使った実装例 まず、スタイルシート内で@media printを定義し、非表示にしたいクラスに対してスタイルを指定します。 <style> @media print { .noprint {

  12. CSSデバッグ術：ボーダー（境界線）を使ってレイアウトの問題を高速に発見する方法

    CSSでシンプルな記事ページ以上の複雑なWebサイトレイアウトをスタイリングすると、あっという間にコードが散らかってしまうことがあります。その結果、さまざまなレイアウトの問題が発生しがちです。CSSでよく発生する代表的なレイアウトの問題には、次のようなものがあります。要素同士の重なり（多くの場合はオーバーフローが原因）要素の崩れ・潰れ（多くの場合はマージンが原因）余分な空白（原因はさまざま）ユニバーサルセレクタ「*」で全要素にボーダーを付けるレイアウトの問題を即座に視覚的に把握したいときは、CSSのユニバーサルセレクタ「*」を使って、すべてのHTML要素にボーダー（境界線）を追加するのが効果的

  13. 基本を超えた先のCSS ── 中級者がつまずく壁と、その乗り越え方

    CSSの基礎を一通り学び終えた頃、多くの開発者が直面するのが「壁」です。色指定やマージン、フレックスボックスによるレイアウトなど、基本的な概念は理解している。それなのに、いざ動きのあるリッチなUIを作ろうとすると、どこから手をつければいいのか分からなくなる――そんな経験はありませんか?上のデモのように、シンプルな要素でもCSSを工夫すれば印象的な動きを表現できます。この記事では、「基本を超えた後」のステップとして押さえておきたいポイントを整理します。「基本を超える」とは何を意味するのかここでいう「基本を超える」とは、難しいプロパティをひたすら暗記することではありません。大切なのは、すでに知って

  14. CSSのbackgroundとbackground-colorの違いとは？正しい使い分けが重要な理由

    CSSに関する質問で最もよく寄せられるのが、「backgroundとbackground-colorの違いは何ですか？」というものです。混乱が生じる原因は、要素に背景色を適用する際、開発者がこの2つを同じ意味で使っているのを頻繁に見かけるからでしょう。 しかし、実はこの2つは同じではありません。backgroundプロパティ（-colorなし）は、1つの宣言だけで要素のすべての背景関連プロパティを設定できる強力なプロパティです。例えば、背景色・繰り返しなし（no-repeat）の背景画像・画像の表示位置を、たった1行でまとめて指定できます。 background: #444 url(image

  15. CSSアニメーションで画像を無限に回転させる方法【初心者向け】

    CSSのanimationプロパティを使えば、画像を連続的に回転させることができます。このチュートリアルでは、初心者の方にもわかるよう、手順を一つずつ丁寧に解説していきます。 HTMLマークアップの準備 まず、画像と属性を含むHTMLマークアップを用意します。 <img src=[InstallDir_ChannelDir]{$UploadDir}/202203/2022033109325250.png class=rotate linear infinite width=150 height=150 /> ブラウザで表示すると、画像は次のように見えます。 3

  16. CSSで要素を中央に配置する方法まとめ｜水平・垂直センタリングを徹底解説

    CSSで要素を中央に配置するのは、意外と難しく感じられることが多いものです。特に、水平方向と垂直方向の両方で中央揃えが必要な場合はなおさらです。この記事では、モダンなCSSの手法から、少し古いけれど今でも役立つテクニックまで、中央揃えの方法をわかりやすく解説します。 テキスト要素を水平方向に中央揃えする テキストを水平方向に中央揃えするのはシンプルです。text-align プロパティに center を指定するだけです。 h1 { text-align: center; } この指定は、あらゆるテキスト要素に対して機能します。 ブロック要素（非テキスト）を水平方向に中央揃えする テキスト

  17. CSSコメントの書き方：基本構文からコメントアウトの実践テクニックまで

    CSSスタイルシートにコメントを書くことで、コードの意図や内容を簡潔に記録（説明）できます。これは自分自身のためだけでなく、チームメンバーがコードを理解する際にも大いに役立ちます。 CSSコメントの基本構文 CSSでコメントを書くには、次の構文（フォーマット）を使用します。 /* これはCSSのコメントです */ 「/* */」という形式は、CSSでコメントを記述できる唯一の方法です。そのため、1行コメントにも複数行コメントにも、この同じ形式が使われます。 /* これは複数行にわたる CSSコメントです。 ブロックコメントとも呼ばれます。 */ コメントアウトの実例 次に、

  18. Flexboxで画像が横に引き伸ばされるのを防ぐ方法

    CSSのFlexboxを使うと、画像が親要素の幅いっぱいに横方向へ引き伸ばされてしまうことがあります。この記事では、その問題を防ぐシンプルな方法を解説します。 Flexboxには少し変わったデフォルトの挙動があり、画像が親コンテナの全幅に引き伸ばされるケースがあります。例えば、flex-direction: column を指定した親要素（フレックスコンテナ）の中に、子要素（フレックスアイテム）として画像を配置した場合、画像の自然な高さは維持される一方で、幅だけが親コンテナの幅いっぱいに広がってしまいます。 この挙動は、ブラウザごとのデフォルトスタイルシート（ユーザーエージェントスタイルシート

  19. CSSでドロップキャップを作成する方法｜タイポグラフィの基本と実装テクニック

    ドロップキャップ（Drop Cap）とは、文章ブロックの先頭にある一文字を大きく装飾するタイポグラフィ技法のことです。主に文書のリード段落（冒頭の段落）で使われ、この記事の最初の段落のように、本文の他の部分とは異なるスタイルが適用されます。ドロップキャップは、読者の視線を狙った場所へ誘導するための強力な視覚的マーカーであり、タイポグラファーやビジュアルデザイナーに古くから愛用されてきました。 ドロップキャップの基本的なデザイン手法 ドロップキャップのデザインに唯一の正解はありません。もっとも一般的なのは、本文と同じフォント（書体）を使い、先頭の一文字だけフォントサイズを大きくする方法です。場合

  20. タイポグラフィの基本：太字と斜体はいつ使うべき？正しい使い分けガイド

    タイポグラフィにはさまざまな強調手法がありますが、その中でも最も一般的なのが「斜体（イタリック）」と「太字（ボールド）」です。どちらも元となる書体デザインのバリエーションであり、それぞれ異なる役割を持っています。この記事では、タイポグラフィにおいて斜体や太字をいつ使うべきか、そして同じ文書内で両方を使うべきかどうかを解説します。 この記事の本文の多くは、通常のウェイトの書体「Alegreya」を使用しています。CSSでは、font-weightプロパティのデフォルト値は 400（regular）です。 太字（bold）は、通常のフォントと同じスタイルで、文字がより太くなったものです。 斜体（

Total 1579 -コンピューター  FirstPage PreviousPage NextPage LastPage CurrentPage:73/79  20-コンピューター/Page Goto:1 67 68 69 70 71 72 73 74 75 76 77 78 79