TechAcademy（テックアカデミー） Webデザインコース Webデザイン CSS CSSのwebkit-line-clampを使って指定した行数に制限する方法を現役エンジニアが解説【初心者向け】
オーダーメイドコース
icon
icon
CSS

CSSのwebkit-line-clampを使って指定した行数に制限する方法を現役エンジニアが解説【初心者向け】

初心者向けにCSSのwebkit-line-clampを使って指定した行数に制限する方法について解説しています。webkit-line-clampを使うことでテキストを指定の行数内に制限して表示することができます。基本の書き方、使用した場合の表示について覚えましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

CSSのwebkit-line-clampを使って指定した行数に制限する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。

 

田島悠介

今回は、CSSに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

webkit-line-clampを使って指定した行数に制限する方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

目次

 

webkit-line-clampの活用場面

webkit-line-clampは文章を指定した行数で表示し、残りの文章がある場合は「…」で省略表示する表記方法です。

 

[PR] Webデザインで副業する方法とは

webkit-line-clampの使い方

webkit-line-clampは「display: -webkit-box;」と「-webkit-box-orient: vertical;」を組み合わせて指定します。

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 表示する行数;

webkit-line-clampはIEには対応していません。その他、詳しくは以下の記事も参考にしてください。

MDN – webkit-line-clamp

 

テキストを指定した行数に制限してみよう

今回のサンプルプログラムではwebkit-line-clampを使って指定した行数に制限する方法について確認します。なお、文章は青空文庫から夏目漱石の吾輩は猫であるを使用しています。

青空文庫 – 吾輩は猫である

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Sample</title>
  <style>
    div {
      width: 500px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div>
  吾輩わがはいは猫である。名前はまだ無い。<br>
  どこで生れたかとんと見当けんとうがつかぬ。<br>
  何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。<br>
  吾輩はここで始めて人間というものを見た。<br>
  しかもあとで聞くとそれは書生という人間中で一番獰悪どうあくな種族であったそうだ。
  </div>
</body>
</html>

実行結果は以下のとおりです。

 

まとめ

今回の記事ではCSSのwebkit-line-clampを使って指定した行数に制限する方法について学習しました。

 

監修してくれたメンター

太田和樹（おおたかずき）

ITベンチャー企業のPM兼エンジニア

普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。

開発実績：画像認識技術を活用した駐車場混雑状況把握、音声認識を活用したヘルプデスク支援システム、ロボットアプリの開発、大規模基幹系システムの開発・導入マネジメント。著書「知識ゼロからの機械学習入門（技術評論社）」。

地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。

 

大石ゆかり

内容分かりやすくて良かったです！

田島悠介

ゆかりちゃんも分からないことがあったら質問してね！

大石ゆかり

分かりました。ありがとうございます！

TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

記事を検索

関連するキーワード

関連する記事

jQueryを使ったプルダウンメニューが意図したところに表示されない

※TechAcademyに実際に寄せられた質問に現役エンジニアのメンターが回答しました 大石ゆかり 田島メンター！親要素をマウスオーバーすると子がプ...
CSS

CSSで複数のidを指定する方法を現役エンジニアが解説【初心者向け】

CSSで複数のidを指定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 CSSについ...
CSS

枠線などを指定したい！CSSのborderの使い方【初心者向け】

今回はCSSで書くborderの使い方に関する解説記事です。borderプロパティは非常に便利で、どのサイトをデザインする上でも必要になってくる知識なので、ぜひ...
CSS

CSSでフォントをメイリオにする方法を現役デザイナーが解説【初心者向け】

CSSでフォントをメイリオにする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 CSSに...
CSS

CSSが反映されない時にキャッシュを消去する理由と対処法を現役エンジニアが解説【初心者向け】

CSSが反映されない時にキャッシュを消去する理由と対処法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説しま...
CSS

CSSで扱えるチルダの意味と使い方を現役エンジニアが解説【初心者向け】

CSSで扱えるチルダの意味と使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 CSSにつ...
CSS

あわせてよく読まれている記事

Rubyでbetween?を使う方法を現役エンジニアが解説【初心者向け】

Rubyでbetween?を使う方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   Rubyについてそもそもよく分からないという方は、Rubyとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプ、Ruby講座の内容をもとに紹介しています。   田島悠介 今回は、Rubyに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 Rubyでbetween?を使う方法について詳しく説明していくね！ 大石ゆかり お願いします！   between?とは メソッド名の最後にクエスチョンマーク(?)のあるメソッドは、真偽判定を返すメソッドになります。 between?メソッドはオブジェクトが指定範囲内であるかどうかを判定し真偽値を返すメソッドです。 比較は UFO演算子 をもとに行われます。 似たようなメソッドのclampメソッドもあります。clampメソッドはbetween?メソッドと同樣に指定範囲内であるかどうかを判定し、範囲外であった場合は範囲内に収めた値を返します。 いい機会ですので、clampメソッドもいっしょにみてみましょう。   UFO演算子 とは 2つのオブジェクトを比較し、左辺が大きければ正の値を返します。 2つのオブジェクトを比較し、右辺が大きければ負の値を返します。 2つのオブジェクトを比較し、等価であればゼロを返します。 一回の比較で「大きい」「小さい」「同じ」を判定することができます。   [PR] Webデザインで副業する方法とはbetweenを使うメリットと使用されるシーン 数値や文字列は指定の範囲内であるかどうかを判定したいときに便利です。   betweenを使う方法 数値や文字列オブジェクトに対して以下の形式で使用します。 数値オブジェクト.between?(範囲の下端, 範囲の上端） 文字列オブジェクト.between?(範囲の下端, 範囲の上端)   実際に書いてみよう # 範囲内にあるかどうかを判定し、真偽値を返してくれます。 puts 5.between?(1, 10) #=> true puts 10.between?(1, 10) #=> true puts 11.between?(1, 10) #=> false puts -1.between?(1, 10) #=> false # 文字列の比較も可能です。 # 比較は UFO演算子によって行われます。 puts "bbb".between?("aaa", "ccc") #=> true puts "ccd".between?("aaa", "ccc") #=> false # clamp メソッドは範囲内に収めた値を返します。 puts 5.clamp(1, 10) #=> 5 puts 999.clamp(1, 10) #=> 10 puts -3.clamp(1, 10) #=> 1 puts "a".clamp("aaa", "ccc") #=> "aaa" puts
Ruby

行間を調整する時に便利！CSSのline-heightの使い方【初心者向け】現役エンジニアが解説

CSSで書くline-heightの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次webkit-line-clampの活用場面webkit-line-clampの使い方テキストを指定した行数に制限してみようまとめ監修してくれたメンター そもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。   【動画の解説はこちら】   田島悠介 今回はline-heightを使ってみよう。 大石ゆかり 田島メンター！！line-heightは何をするものなんですか〜？ 田島悠介 行の高さを設定するプロパティで、これによって文字列の行間の幅を調整することができるんだ。 大石ゆかり 文章などのレイアウトで必要になりそうですね。よろしくお願いします！   line-heightとは line-heightは、文章の行の高さを設定できるプロパティです。 文章の行間をあけたり、せばめたいときに使用します。   line-heightの書き方 line-heightプロパティは以下のように記述します。 line-height: 値; 値は絶対値で指定する方法、文字サイズを基準に設定する方法、normalで指定する方法の3つがあります。 line-heightで指定される高さは、文字の高さ＋上下の余白です。 そのため、文字の上下の余白はline-heightで設定した数値からフォントサイズを引いた数値が均等に配置されます。 例えば文字サイズが16pxの文章にline-heightで20pxを指定した場合、20px – 16px = 4pxとなり、上下に各2pxずつ余白が配置されます。   絶対値で指定する場合 pxで設定すると1行の高さが、文字サイズに関係なく指定した高さになります。 HTML <p class="font10">line-heightで行の高さを設定してみましょう。</p> <p class="font20">line-heightで行の高さを設定してみましょう。</p> CSS p{ line-height:50px; background:gold; } .font10{ font-size:10px; } .font20{ font-size:20px; } 表示結果 行の高さがわかりやすいように背景色をつけています。 文字サイズに関わらず、行（<p>）の高さは一律で50pxになっています。   文字サイズを基準に指定する場合 文字のサイズに合わせて行間を指定する場合は、単位をつけずに数値を書きます。 文字のサイズを1として計算しますので、1だと文字の高さ=行の高さになります。 2文字分の行の高さにする場合は、line-heightの値を2にします。 HTMLは絶対値で指定する場合と同様です。   CSS p{ line-height:3; background:gold; } .font10{ font-size:10px; } .font20{ font-size:20px; } 表示結果 同じline-height: 3; を適用していますが、文字サイズによって行（<p>）の高さが変わっているのがわかります。 上の行は、フォントサイズが10pxなので、 10 x 3 = 30px の高さに、下の行はフォントサイズが20pxなので、 20 x 3 = 60px の高さになっています。 ％やem、remなどでも、文字のサイズに応じた行の高さを指定することが可能です。 一方で、font-sizeを指定している要素とline-heightを指定している要素が異なる場合などでは、意図した表示にならないことがあります。 文字のサイズに応じて行の高さを変えたい場合は、単位をつけずに指定するのが良いです。   また、line-heightの値として、normalというキーワードを設定した場合は、ブラウザで設定されているデフォルトの行の高さが適用されます。     大石ゆかり line-heightの長さには、文字自体も含まれているってことですね。 田島悠介 値の書き方は、使用する場面によって書き分けると良いんだ。実際の例を見てみよう。 大石ゆかり 分かりました！   [PR] Webデザインで副業する方法とは実際に書いてみよう 文章で行の高さを設定する場合は、文字のサイズに合わせて行間が変わるようにしておくと良いです。 逆にボタンなど、デザイン的にどうしても行の高さを固定したいときには、絶対値で指定すると良いでしょう。 HTML <div class="area line-height-1"> <h1>line-height:1;</h1> <p class="font-size-15">此書は趣向もなく、構造もなく、尾頭の心元なき海鼠なまこの様な文章であるから、たとい此一巻で消えてなくなった所で一向差さし支つかえはない。又実際消えてなくなるかも知れん。</p> <p class="font-size-10">然し将来忙中に閑を偸ぬすんで硯すずりの塵ちりを吹く機会があれば再び稿を続ぐ積つもりである。猫が生きて居る間は――猫が丈夫で居る間は――猫が気が向くときは――余も亦また筆を執とらねばらぬ。</p> <a href="#">続きを読む</a> </div> <div class="area line-height-1-5">
CSS

CSSのtext-strokeで文字を縁取りする方法を現役エンジニアが解説【初心者向け】

CSSのtext-strokeで文字を縁取りする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をみてみましょう。   なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。   田島悠介 今回は、CSSに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 text-strokeで文字を縁取りする方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 文字の縁取りとは text-strokeの使い方 文字を縁取りしてみよう まとめ   文字の縁取りとは オフィスソフトのワードアートのように、文字の周りを別の色で装飾することを縁取りとよびます。 以下は文字をオレンジ色で縁取りした例です。   [PR] Webデザインで副業する方法とはtext-strokeの使い方 CSSで縁取りを実現するのがtext-strokeプロパティです。 しかし、text-strokeプロパティは現在標準のプロパティでは無いため、特定のブラウザで動作することを示すベンダープレフィックスを付与して適用する必要があります。   縁取りの幅は「-webkit-text-stroke-width」で指定しましょう。 -webkit-text-stroke-width: 2px; 縁取りの色は「-webkit-text-stroke-color」で指定しましょう。 -webkit-text-stroke-color: orange; 縁取りの内側の塗りつぶし色は「-webkit-text-fill-color」で指定します。 -webkit-text-fill-color: white;     文字を縁取りしてみよう 今回のサンプルプログラムでは文字を縁取りする方法について確認しましょう。 併せて「text-shadow」プロパティで文字に影も付けています。 「text-shadow」プロパティについて、詳しくは以下の記事も参考にしてください。 文字に影をつけたい！CSSのtext-shadowの使い方【初心者向け】   index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Sample</title> <style> span { font-size: 60px; font-weight: bold; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: orange;
CSS

色々な動きを表現できる！CSSのtransitionプロパティの書き方【初心者向け】

CSSのtransitionプロパティを使う方法について解説しています。 一定時間でプロパティを変化させ、アニメーションをつけたい時に便利です。メニューのスライドインやスライドアウトにtransitionが使われていることがあります。 シンプルな動きを簡単に実装できるので、ぜひ使い方を覚えておきましょう。 CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。   なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。   大石ゆかり 田島メンター！！hoverを使ったマウスオーバー時のアクションですが、少しずつ変化していく感じにはできませんか〜？ 田島悠介 そういうときはtransitionプロパティを使ってみよう。 大石ゆかり transitionを使うとどうなるんですか？ 田島悠介 推移に関する条件を指定するものなんだ。例えばどれぐらいの時間をかけてアクションの実行を行うかというようなことを決めることができるよ。   transitionプロパティとは transitionプロパティとは、時間経過による変化を表現するときに使います。 具体的には、「カーソルを当てると徐々に背景色を変える」といったことができるようになります。 他にもanimationプロパティなどもありますが、transitionプロパティは比較的シンプルな変化をさせるときに使われます。   transitionプロパティの使い方 transitionプロパティは次のように指定します。 -webkit-transition-property: 変化させるプロパティ(backgroundなど); -webkit-transition-duration: 変化させる秒数; -webkit-transition-timing-function: 変化のさせ方;   -webkit-transition-timing-functionは以下のように指定します。 ・default ・linear: 一定のスピード ・ease-in: 徐々に加速 ・ease-out: 徐々に減速 ・ease-in-out: 徐々に加速して徐々に減速 ・cubic-bezier: カスタム   また、次の省略記法も使うことができます。 -webkit-transition: 変化させるプロパティ 変化させる秒数 変化のさせ方;   田島悠介 transitionの基本の書き方になるよ。 大石ゆかり かなり細かい指定ができるんですね。 田島悠介 次は実際の例で見てみよう。今回は少しずつ色が変わるというのをやってみるよ。   [PR] Webデザインで副業する方法とは実際に書いてみよう 実際に書いてみましょう。 css部分 ------------------------ #demo { height: 100px; width: 200px; background: rgb(255, 100, 100); -webkit-transition-property: background; -webkit-transition-duration: 1s; -webkit-transition-timing-function: linear; } #demo:hover { background: rgb(100, 255, 100); } /* 省略して書くこともできます。 */ #demo2 { height: 100px; width: 200px; background: rgb(255, 100, 100); -webkit-transition:
CSS

Pythonでテキストファイルを分割する方法を現役エンジニアが解説【初心者向け】

Pythonでテキストファイルを分割する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して、初心者向けに解説します。   Pythonについてそもそもよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプ、Python講座の内容をもとに紹介しています。   田島悠介 今回は、Pythonに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 Pythonでテキストファイルを分割する方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 指定した行数で分割する方法 指定した文字列がある部分で分割する方法 まとめ   指定した行数で分割する方法 Pythonでテキストファイルを読み込むにはopen()関数を使用します。 filename = './Galaxy_railway.txt' # ファイルの全ての内容を一度に読み込む with open(filename, 'r', encoding='utf-8') as f: text = f.read() print(text) 今回の記事では読み込むファイルに青空文庫の「銀河鉄道の夜」の一部を使用しています。 青空文庫 – 銀河鉄道の夜 実行結果は以下のとおりです。 「ではみなさんは、そういうふうに川だと云いわれたり、乳の流れたあとだと云われたりしていたこのぼんやりと白いものがほんとうは何かご承知ですか。」 先生は、黒板に吊つるした大きな黒い星座の図の、上から下へ白くけぶった銀河帯のようなところを指さしながら、みんなに問といをかけました。 カムパネルラが手をあげました。それから四五人手をあげました。ジョバンニも手をあげようとして、急いでそのままやめました。 たしかにあれがみんな星だと、いつか雑誌で読んだのでしたが、このごろはジョバンニはまるで毎日教室でもねむく、 本を読むひまも読む本もないので、なんだかどんなこともよくわからないという気持ちがするのでした。 (略) open()関数について、詳しくは公式サイトも参考にしてください。 Python 組み込み関数 – open()   指定した行数で分割する方法 指定した行数で分割するには1行ずつ読み込むreadline()関数を使用します。 div_idx = 3 idx = 0 filename = './Galaxy_railway.txt' # ファイルの内容を1行ずつ読み込む with open(filename, 'r', encoding='utf-8') as f: while True: line = f.readline() line = line.strip() if line:
Python

RubyでCSVファイルにヘッダ（Header） を作成する方法【初心者向け】

RubyでCSVファイルにヘッダ（Header） を作成する方法について解説します。   そもそもRubyについてよく分からないという方は、Rubyとは何なのか解説した記事を読むとさらに理解が深まります。 なお本記事は、TechAcademyのオンラインブートキャンプRuby講座の内容をもとに紹介しています。   田島悠介 今回は、Rubyに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 CSVファイルにヘッダ（Header） を作成する方法について詳しく説明していくね！ 大石ゆかり お願いします！   CSVファイルのヘッダ（Header）とは アプリケーションでは、Rawデータ(生データ)や集計結果として、CSVファイルを生成するケースが多々あります。 その際、1行目に出力される、カラムの名前などが入った行を、ヘッダ行と呼びます。 名前 年齢 煌木太郎 22 名前、年齢と書かれている行がヘッダ行です。 ヘッダ行があると、CSVファイルをExcelなどのツールで開いた際も、どのカラムが、どのデータかというのがひと目で分かりますので、とても重要な行と言えます。   CSVファイルにヘッダ（Header）を作成する方法 CSVファイルを作成する際、ヘッダ行を追加するためには、データベースのカラムなどを直接使用する方法もありますが、これらは英字であるため、一見するとわかりにくい表記となってしまいます。 また、1からCSVを生成する場合など、ヘッダがない状態も考えられます。 そのため、ヘッダを直接追加する方法を確認してみましょう。 使用するライブラリは、CSVライブラリです。 ヘッダを追加するために、先にヘッダ用の配列を準備し、CSVの先頭に追加します。   [PR] Webデザインで副業する方法とは実際に書いてみよう CSVファイルを1から作成し、ヘッダを追加する例を確認してみましょう。 ソースコード require 'csv' header = ["名前","年齢"] # ヘッダ用の配列を作成 data = [ ["煌木太郎",22], ["山田一郎",22] ] # データ配列を準備 # CSVデータを生成する CSV.open('sample.csv','w') do |csv| csv << header # ヘッダ行をCSVに追加 data.each do |d| csv << d # データ行をCSVに追加 end end # 生成したCSVデータを読み込む # CSV.foreachの引数に、headers: true とつける事で、先頭行をヘッダとして認識します。 CSV.foreach("sample.csv", headers: true) do |row|
Ruby

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

Webエンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

オーダーメイドコース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン CSS CSSのwebkit-line-clampを使って指定した行数に制限する方法を現役エンジニアが解説【初心者向け】