目次:
ビデオ: 【HTML/CSS入門】#2 flexboxでワイヤーデザインからコーディングする 2025
iPhoneまたはiPadサイト向けにCSS 3を作成すると、カスタムフォントとドロップシャドウを作成するだけでなく、さまざまな次元のスクリーン上でテキストのサイズを変更するという課題もあります。さらに気にする必要はありません：テキストのサイズを最適に管理し、CSS 3を使ってスタイリングテキストの喜びを発見する方法を見つけてください。
テキストサイズを調整する
iPhoneでテキストを読みやすくするために、テキストサイズ調整ルールの設定は自動です：テキストは自動的に画面に拡大/縮小されます。
<！ - 1 - >iPadでは、大画面でテキストのサイズを自動的に変更する必要がないため、デフォルトはnoneです。多くのウェブサイトでは、この調整によりページが読みやすくなりますが、ページを慎重に設計してiPhoneやiPad専用のスタイルを設定した場合は、自動サイズ変更を防ぐことができます。
このオプションの使い方の例を次に示します：
-webkit-text-size-adjust：auto; -webkit-text-size-adjust：なし; -webkit-text-size-adjust：80％;
webkit-text-size-adjustルールをnoneに設定したコード例を次に示します。これらすべてのタグのスタイルでこのコードを一度に含めれば、タグ内のテキストは自動的にサイズ変更されません。
<！このスタイルは、古いブラウザがHTML5を理解し、共通タグを0 * / article、aside、footer、header、menu、nav、section、details、body、h1、h2、h3、 p、ul、li、{border：0;マージン：0;パディング：0;表示ブロック; / * Web-Kitリサイズテキストを停止する* / -webkit-text-size-adjust：none;}テキストシャドウを追加する
CSS 3を使用すると、テキストやブロックレベルの要素にドロップシャドウを追加できます。タグ。
<！ - 3 - >
テキストと背景のコントラストを上げるには、テキストの影を追加すると便利です。テキストの影は、ページのデザインをより面白くするだけでなく、複雑な背景や前景色と背景色のコントラストがあまりない場合には、テキストをより読みやすくします。WebKitブラウザのテキストシャドウの構文は次のとおりです。
text-shadow：水平方向の垂直方向のぼかし半径の色。
これらのプレースホルダの塗りつぶしがテキストシャドウにどのように影響するかを次に示します。
horizontalとvertical - 水平オフセットと垂直オフセットを指定する最初の2つの値が必要です。ドロップシャドウがテキストの右下に及ぶ距離を指定します。
-
blur radius - 影のぼかし量を指定する3番目の設定はオプションです。ぼかし半径を指定しない場合、デフォルトは0で、指定した色が単色として表示されます。
-
color - 16進数のカラーコード（従来の6文字のカラーコード）またはRGBaカラーコードを使用して、赤、緑、青、および不透明度を指定できるカラーを指定します。 （RGBaについてはもう少しです。）
-
次のコード行は、
タグにテキストの影を追加します。数値は、テキストシャドーが3ピクセルのぼかしでテキストの右側と2ピクセル下に伸びるように指定します。この例では、16進数のカラーコード#999で指定された灰色を使用しています。
h1 {text-shadow：2px 2px 3px#999;}
色をRGBaの色として指定すると、部分的に透明な色を定義できます。 RGBaの色は赤、青、緑のどれくらいの値を指定するかという一連の数字で定義されます。数値の範囲は0〜255です。
4番目の数字は、不透明度または透明度の量を定義します。 （範囲は、完全な不透明度の場合は1、完全な透明化の場合は0になります）。次の例の6は不透明度60％を示します。基礎となる色の40％が輝きます。
前の
タグに対して定義されたスタイルは、見出し1タグでフォーマットされたテキストに適用されます。以下のスタイルはクラススタイルです（名前の前にドットで示されます）。クラススタイルはより汎用性が高く、ページ上の任意のテキストに適用できます。
。 shadow {text-shadow：。 2em。 2em。 3em rgba（153,153,153,6）;} CSSでは、前の例で使用したピクセル、パーセント、emオプションなど、さまざまな測定値でサイズを指定できます。
