line-height: ;
ホームページ制作(ウェブサイト制作)の際に使用するCSSプロパティ「line-height」についてのご説明です。
ホームページ制作・作成において、line-height(ラインハイト)は、ホームページ内の要素の「行の高さ」を指定します。
line-height 行の高さを指定

line-heightは、ホームページ制作で埋め込むテキストの行の高さを指定します。ページ中のテキスト部分の上下の高さの領域を指定します。ラインハイト。
line-height : normal
ブラウザ依存(初期値)
line-height : 数値
単位はpx・em・exなど
負の値は指定不可
数値のみ
数値×フォントのサイズ=行の高さ
例) line-height:1.7 ;
line-height : %
%値で指定
タイポグラフィの美しさとアクセシビリティを高めるline-heightの設計
ホームページ(ウェブサイト)内のテキストの読みやすさは、訪問者の滞在時間や情報の理解度に多大な影響を与えます。行と行の間隔(行高)を調整する「line-height」プロパティは、長文のテキストを快適に読み進めてもらうためのタイポグラフィ設計において、最も重要な要素の一つです。より専門的には、単なる見た目の微調整にとどまらず、閲覧環境に左右されない堅牢なコーディングルールやアクセシビリティへの配慮が求められます。
単位を省略した数値指定(レスポンシブな行高制御)
line-heightの値は、px(ピクセル)やem、%(パーセンテージ)といった単位のほか、単位をつけない「数値のみ」で指定することができます。現代のホームページ制作においては、この単位を省略した数値での指定が強く推奨されます。
例えば「line-height: 24px;」のようにpxで固定指定してしまうと、スマートフォン表示時などでフォントサイズ(font-size)を変更した際に行間が詰まってしまい、文字が重なるなどのレイアウト崩れを起こす原因になります。また、「line-height: 1.5em;」や「line-height: 150%;」といった相対単位を指定した場合、親要素で計算された絶対値(px)がそのまま子要素に継承されるため、子要素のフォントサイズが大きくなった際に行間が極端に狭くなってしまいます。
一方で「line-height: 1.6;」のように数値のみでプログラミングしておけば、各要素のフォントサイズに応じた最適な行高(フォントサイズ×1.6)が子要素ごとに再計算されるため、どのような閲覧環境でも美しいバランスを自動で維持できます。これは、事業用ホームページの運用において修正コストを抑えるためにも重要です。
Web集客成果を支える文章の読みやすさと視認性の確保
適切なline-heightの数値は、コンテンツの性質によって異なります。
一般的な本文(p要素など)の長文テキストでは、「1.6」から「1.8」程度の少しゆとりのある行高を設定することで、視線の移動がスムーズになり、ユーザーがストレスなく情報をインプットできるようになります。逆に、h2やh3などの見出し要素(タイトル)では、文字数が少なめでフォントサイズが大きいため、本文と同じ広い行高のままだと上下に間延びした印象を与えてしまうかもしれません。見出し部分には「1.3」から「1.4」程度のやや引き締まった数値を指定するのが、Webデザインの視覚的メリハリ(近接の原則)を高めるポイントです。
また、WCAG(Web Content Accessibility Guidelines)などの国際的なアクセシビリティ基準では、テキストの読みやすさを確保するために、行間をフォントサイズの少なくとも1.5倍以上にすることが推奨されています。こうした細やかな文字組みへの配慮が、ホームページ(ウェブサイト)全体のクオリティを高め、企業の信頼性やWeb集客の成功へと繋がっていきます。
line-height: ;
読み方 ラインハイト
ホームページ(ウェブサイト)制作・作成に役立つCSS3のプロパティ一覧は
⇒css3 property reference index ホームページ制作の装飾プロパティ
ホームページ制作・Webデザインの1ポイント

ラインハイトは、文字の高さを指定します。厳密には文字そのものの高さではなく、文字の上下に関する占有部分の指定です。フォント自体の大きさを変更するときはフォントサイズで指定します。
なお、ラインハイトが文字そのものの高さと変わらずキチキチになると、見出しで背景設定をしている場合などに背景画像が隠れてしまうことがありますので注意が必要です。スマートフォン表示の際にラインハイトの関係で文字の一部が隠れてしまうこともありますので、テキストの表示がおかしくなっている場合はラインハイトの設定を再確認してみましょう。
ホームページのCSS・スタイルシート編集方法
ホームページ制作やホームページ修正を行う際のCSS・スタイルシート編集方法について。ホームページは基本的にHTMLで構成されています。一方、その外観・デザインを設定するのはCSS(Cascading Style Sheets)・スタイルシートです。ページの基本構成はHTMLで、レイアウトやカラーの設定といった外観面はCSSで設定されています。
ホームページ制作(ウェブサイト制作)なら
Web制作会社ファンフェアファンファーレへ
「Web集客できるホームページ制作・作成(ウェブサイト制作)
『お客さまのお客さま目線』でのWeb制作、Webマーケティング」
ホームページ制作 京都のWeb制作会社(ホームページ制作会社)ファンフェアファンファーレは、Webマーケティングツールとして、Webマーケティング・SEMを意識したWeb集客・プロモーション力のあるSEO特性・ウェブPR力の高いSEO対策付きのホームページ制作(ウェブサイト制作)・作成、WordPress(ワードプレス)などのCMS(コンテンツマネジメントシステム)の導入やカスタマイズ、ウェブサイトの高速表示化、レスポンシブデザイン、モバイルフレンドリーを得意としています。
ホームページ制作サービスにあたり、WordPress(ワードプレス)を利用したホームページ制作(ウェブサイト制作)をはじめ、HTML5,CSS3,jQueryによるホームページ制作を行っております。Web集客のためのWebマーケティング効果の高いホームページ制作をはじめ、ホームページのリニューアル・更新・修正・管理、ホームページのSEO(SEO対策)、ホームページ運営やWebマーケティングにかかるWebコンサルティングなど、様々なサービスを提供しています。
Web集客・Webマーケティングに効果的なコンテンツマーケティング・コンテンツSEO・ウェブPRを加速させるWordPressなどCMSを活用したオウンドメディア構築、既にお持ちのホームページ(ウェブサイト)のWordPress化やWordPressのカスタマイズもお任せください!
ホームページ制作価格表(Web制作サービス)
WordPressホームページ制作(ウェブサイト制作)
WordPressをベースとしたホームページ制作やWordPressサイトのカスタマイズもおまかせください!既存ホームページを更新・編集可能なWordPressサイトへと変更する「WordPress化」のカスタマイズやコンテンツマーケティングを加速させるオウンドメディア構築も可能です!
WordPressテーマのCSSの編集によるレイアウト調整やWebデザインの修正をはじめ、メディアクエリの利用によるモバイルフレンドリー化(スマホ対応)にも対応しています。WordPressでのホームページ制作(WordPressサイト制作)はもちろん、WordPressテーマのCSS調整、プラグインの設置・設定、WordPressのエラー修正・復旧や設定変更、WordPressサイトのSEOなどWordPressに関する各種ご依頼に対応しています。
- WordPress(ワードプレス)を利用したホームページ制作(ウェブサイト制作)
- WordPress(ワードプレス)のカスタマイズ
- ホームページ(ウェブサイト)のWordPress化
- WordPressなどCMSを活用したオウンドメディア構築
HTML5+CSS3でのホームページ制作(ウェブサイト制作)
HTML5+CSS3での静的HTMLホームページ制作(ウェブサイト制作)やHTML5+CSS3でのWordPress(ワードプレス)テーマの制作なら、京都のWeb制作会社(ホームページ制作会社)ファンフェアファンファーレにお任せください! HTML5+CSS3で作成する企業ホームページ制作や店舗ホームページ制作をはじめ、既に運営されているホームページのCSS修正や編集・調整、メディアクエリの利用によるホームページカスタマイズ・ホームページのモバイルフレンドリー化にも対応しております。レイアウト調整やカラーの調整など、各種ホームページのWebデザインの調整もお任せください!CSSの利用による既存ホームページのスマホ対応、モバイルフレンドリー、スマートフォン用メニュー作成に対応しています。
ホームページ制作実績
新規ホームページ制作・カスタマイズ実績のある業種・エリアや、ホームページ制作事例・サイトカスタマイズ事例などホームページ制作実績のご紹介。企業の公式ホームページをはじめ、各種ホームページ制作(ホームページ作成)に対応しています。
ホームページ制作実績
ホームページの更新・修正
ホームページのページ更新やページ追加、ホームページ内部の様々な修正など、各種ホームページの更新・ホームページの修正の代行に対応しております。エラー修正やページ内容の変更など、ホームページの更新や修正にかかる単発のご依頼で対応させていただいておりますので、CSSの調整をはじめ、軽微な修正でもお気軽にご相談ください。
ホームページの更新・修正料金 価格表
ホームページ制作 京都
「ホームページ制作 京都」 京都府京都市内(上京区、中京区、下京区、東山区、右京区、左京区、北区、南区、西京区、山科区、伏見区)では、ホームページ制作・SEO・Web制作サービスにつき、ご訪問での打ち合わせ・ヒアリング・ご提案をさせていただいております。京都・関西・近畿圏はもちろん、ホームページ制作、ホームページのリニューアルやカスタマイズ・SEO・WebマーケティングにかかるWebコンサルティングなどのWeb制作サービスにつき全国対応しております。HTML5+CSS3でのホームページ制作やWordPressサイト制作はもちろん、CSS調整やコンテンツ修正をはじめとしたホームページの修正や更新作業にも対応可能です。







