10分で学ぶことができる10の簡単なCSSコード例

10分で学ぶことができる10の簡単なCSSコード例

HTMLに手を出し始めたら、おそらくWebページに視覚的なパンチを追加することに興味があるでしょう。 CSSはそれを行うための最良の方法です。 CSSを使用すると、インラインスタイルに依存することなく、ページ全体に変更を適用できます。





Webページで基本的なスタイル変更を行う方法を示す簡単なCSSの例をいくつか示します。



1.簡単な段落フォーマットのための基本的なCSSコード

CSSを使用したスタイリングは、要素を作成するたびにスタイルを指定する必要がないことを意味します。 「すべての段落にこの特定のスタイルを設定する必要があります」と言うだけで、準備は完了です。





すべての段落が必要だとしましょう（

、誰もが知っておくべきHTMLタグの1つ）を通常より少し大きくします。そして、黒の代わりに濃い灰色のテキストで。

関連している： HTMLチートシート



このためのCSSコードは次のとおりです。

p { font-size: 120%; color: dimgray; }

単純！これで、ブラウザが段落をレンダリングするたびに、テキストはサイズ（通常の120パーセント）と色（「dimgray」）を継承します。



使用できるプレーンテキストの色について知りたい場合は、こちらをご覧ください。 CSSカラーリスト Mozillaから。

2.大文字と小文字を変更するCSSの例

スモールキャップスである必要がある段落の指定を作成したいですか？そのためのCSSサンプルは次のようになります。



p.smallcaps { font-variant: small-caps; }

完全にスモールキャップスの段落を作成するには、わずかに異なるHTMLタグを使用します。外観は次のとおりです。

Your paragraph here.

要素にドットとクラス名を追加すると、クラスによって定義されたその要素のサブタイプが指定されます。これは、テキスト、画像、リンクなど、ほぼすべての方法で実行できます。

テキストのセットを特定のケースに変更する場合は、次のCSSコード例を使用してください。

text-transform: uppercase; text-transform: lowercase; text-transform: capitalize;

最後の1つは、すべての文の最初の文字を大文字にします。

スタイルの変更は段落に限定されません。リンクに割り当てることができる4つの異なる色があります。標準色、訪問した色、ホバー色、およびアクティブな色（クリックすると表示されます）です。このサンプルCSSコードを使用します。

a:link { color: gray; } a:visited { color: green; } a:hover { color: purple; } a:active { color: teal; }

リンクを使用すると、各「a」の後にドットではなくコロンが続きます。

これらの宣言はそれぞれ、特定のコンテキストでリンクの色を変更します。リンクの色を変更するために、リンクのクラスを変更する必要はありません。

下線付きのテキストはリンクを明確に示していますが、その下線を削除した方が見栄えがよい場合があります。これは、「text-decoration」属性を使用して実行されます。このCSSの例は、リンクの下線を削除する方法を示しています。

a { text-decoration: none; }

リンク（「a」）タグが付いているものはすべて下線なしのままになります。ユーザーがその上にカーソルを合わせたときに下線を引きたいですか？単に追加します：

a:hover { text-decoration: underline; }

このテキスト装飾をアクティブなリンクに追加して、リンクがクリックされたときに下線が消えないようにすることもできます。

あなたのリンクにもっと注目を集めたいですか？リンクボタンは、それを実行するための優れた方法です。これにはさらに数行必要です。

a:link, a:visited, a:hover, a:active { background-color: green; color: white; padding: 10px 25px; text-align: center; text-decoration: none; display: inline-block; }

このCSSサンプルコードについて説明しましょう。

4つのリンク状態すべてを含めることで、ユーザーがボタンにカーソルを合わせたりクリックしたりしたときにボタンが消えないようにします。ボタンやテキストの色を変更するなど、ホバーリンクとアクティブリンクに異なるパラメータを設定することもできます。

背景色はbackground-colorで設定され、テキストの色はcolorで設定されます。パディングはボックスのサイズを定義します---テキストは垂直方向に10px、水平方向に25pxパディングされます。

Text-alignは、テキストが片側ではなく、ボタンの中央に表示されるようにします。最後の例のように、テキスト装飾は下線を削除します。

uefiファームウェア設定ウィンドウなし10

CSSコード 'display：inline-block'はもう少し複雑です。つまり、オブジェクトの高さと幅を設定できます。また、挿入時に新しい行を開始することも保証します。

6.テキストボックスを作成するためのCSSサンプルコード

わかりやすい段落はあまりエキサイティングではありません。ページ上の要素を強調表示する場合は、境界線を追加することをお勧めします。単純なCSSコードの文字列を使用してこれを行う方法は次のとおりです。

p.important { border-style: solid; border-width: 5px; border-color: purple; }

これは簡単です。重要なクラスの段落の周囲に、幅5ピクセルの紫色の境界線を作成します。段落にこれらのプロパティを継承させるには、次のように宣言します。

Your important paragraph here.

これは、段落がどんなに大きくても機能します。

適用できるさまざまな境界線スタイルがあります。 「実線」の代わりに、「点線」または「二重」を試してください。一方、幅は「薄い」、「中程度」、または「厚い」にすることができます。 CSSコードでは、次のように各境界線の太さを個別に定義することもできます。

border-width: 5px 8px 3px 9px;

その結果、上部の境界線は5ピクセル、右側の境界線は8ピクセル、下部の境界線は3ピクセル、左側の境界線のサイズは9ピクセルになります。

7.要素を基本的なCSSコードに中央揃えします

一般的なタスクの場合、CSSコードを使用して要素を中央揃えにすることは驚くほど直感的ではありません。ただし、数回実行すると、はるかに簡単になります。物事を中心に置くには、いくつかの異なる方法があります。

ブロック要素（通常は画像）の場合は、margin属性を使用します。

.center { display: block; margin: auto; }

これにより、要素がブロックとして表示され、両側のマージンが自動的に設定されます。特定のページのすべての画像を中央に配置する場合は、imgタグに「margin：auto」を追加することもできます。

img { margin: auto; }

このように機能する理由については、 W3CでのCSSボックスモデルの説明 。

しかし、CSSを使用してテキストを中央揃えにする場合はどうでしょうか。このサンプルCSSを使用します。

.centertext { text-align: center; }

'centertext'クラスを使用して、段落のテキストを中央に配置しますか？そのクラスをに追加するだけです

鬼ごっこ：

This text will be centered.

8.パディングを調整するためのCSSの例

要素のパディングは、各側に必要なスペースの量を指定します。たとえば、画像の下部に25ピクセルのパディングを追加すると、次のテキストが25ピクセル下にプッシュされます。画像だけでなく、多くの要素にパディングを付けることができます。

すべての画像の左側と右側に20ピクセル、上下に40ピクセルのパディングがあるとします。このための最も基本的なCSSコードの実行は次のとおりです。

img { padding-top: 40px; padding-right: 25px; padding-bottom: 40px; padding-left: 25px; }

ただし、短いCSS命令があり、このすべての情報が1行で表示されます。

img { padding: 40px 25px 40px 25px; }

これにより、上、右、下、および左のパディングが正しい番号に設定されます。使用されている値が2つ（40と25）しかないため、さらに短くすることができます。

img { padding: 40px 25px }

2つの値のみを使用する場合、最初の値は上部と下部に設定され、2番目の値は左右に設定されます。

9.CSSコーディングでテーブル行を強調表示する

CSSコードにより、テーブルはデフォルトのグリッドよりもはるかに見栄えが良くなります。色の追加、境界線の調整、テーブルのモバイル画面への応答性の向上はすべて簡単です。この簡単なCSSの例は、テーブルの行にマウスを合わせたときにそれらの行を強調表示する方法を示しています。

tr:hover { background-color: #ddd; }

これで、テーブルセルにマウスを合わせると、その行の色が変わります。あなたができる他のクールなことのいくつかを見るには、 派手なCSSテーブルのW3Cページ 。

10.画像を透明と不透明の間でシフトするためのCSSの例

CSSコードは、画像を使ってクールなことをするのにも役立ちます。これは、完全な不透明度未満で画像を表示するためのCSSの例であるため、画像はわずかに「白く塗りつぶされて」表示されます。画像の上にマウスを置くと、画像は完全に不透明になります。

img { opacity: 0.5; filter: alpha(opacity=50); }

「filter」属性は「opacity」と同じことを行いますが、Internet Explorer8以前は不透明度の測定値を認識しません。古いブラウザの場合は、それを含めることをお勧めします。

画像がわずかに透明になったので、マウスオーバーで完全に不透明にすることができます。

img:hover { opacity: 1.0; filter: alpha(opacity=100); }

ソースコードを含む10のCSSの例

これらのCSSコード例を使用すると、CSSがどのように機能するかをよりよく理解できるはずです。 CSSテンプレート 助けることができますが、生の要素を理解することが重要です。

これらの10の簡単なCSSコード例を要約します。

  1. 簡単な段落の書式設定
  2. 大文字と小文字を変更する
  3. リンクの色を変更する
  4. リンクの下線を削除する
  5. リンクボタンを作成する
  6. テキストボックスを作成する
  7. 要素を中央揃え
  8. パディングを調整する
  9. テーブルの行を強調表示する
  10. 画像を不透明にする

それらをもう一度確認すると、将来のコードに適用できるいくつかのパターンに気付くでしょう。そして、それはあなたが本当にCSSマスターになり始めたことを知っているときです。しかし、それを覚えておくのは難しいかもしれません。後で参照できるように、このページをブックマークすることをお勧めします。

共有 共有 つぶやき Eメール エッセンシャルCSS3プロパティチートシート

CSS3プロパティのチートシートを使用して、重要なCSS構文をマスターします。

次を読む 関連トピック
  • プログラミング
  • ウェブデザイン
  • CSS
  • スクリプティング
著者について クリスチャンコーリー（1510件の記事が公開されました）

セキュリティ、Linux、DIY、プログラミング、技術の説明を担当する副編集長であり、デスクトップとソフトウェアのサポートに豊富な経験を持つ本当に便利なポッドキャストプロデューサーです。 Linux Formatマガジンの寄稿者であるクリスチャンは、ラズベリーパイのいじくり回し、レゴ愛好家、レトロゲームファンです。

クリスチャンコーリーのその他の作品

ニュースレターを購読する

ニュースレターに参加して、技術的なヒント、レビュー、無料の電子書籍、限定セールを入手してください。

購読するにはここをクリックしてください