カテゴリーアーカイブ CSS

村上 著者:村上

【CSS】複数行の長い文章の文末を省略する方法

以前紹介した、長い文章の文末を省略して末尾に「…」を表示させる方法の複数行対応バージョンです。
前回のやり方では、一行のみの表示しかできないので、複数行で文末を表示させたいときはこちらの方法をお試しください。
ただし、ChromeSafari 限定ですので、その点はご注意ください。

今回参考にさせていただいた記事はこちら。

【複数行にも対応】長過ぎる文字列を省略して末尾を三点リーダー(…)にする方法いろいろ – PSYENCE:MEDIA
https://tech.recruit-mp.co.jp/front-end/tips-ellipsis/

ちなみに、以前投稿したCSSで文末を省略する方法はこちら。

【CSS】長い文章の文末を省略して末尾に「…」を表示させる方法
https://cpoint-lab.co.jp/article/201805/【css】長い文章の文末を省略して末尾に「」を

 

コードはこちら。

<p>春はあけぼの。やうやう白くなりゆく山際、少し明かりて、紫だちたる雲の細くたなびきたる。</p>
#text{
    width: 300px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

overflow: hidden; を使うところは、前回と同じです。
-webkit-line-clamp を使うことで、指定した行に三点リーダー(クランプ)を追加することができます。
こちらのプロパティの値は、三点リーダを追加したい行数を指定します。
display: -webkit-box; は、-webkit-line-clamp と併用することにより、-webkit-line-clamp で指定した行数までを表示するようにしてくれます。

 

以上、複数行の行末尾を省略する方法でした。
上で紹介したサイトでは、ChromeSafari 以外のブラウザでも同じことを行う方法もありますので、IEでもこの表示にしたいときは参考にしてみてはいかがでしょうか。
ちなみに、少しトリッキーな方法とのことです。

  • この記事いいね! (1)
著者:杉浦

HTMLの勧告とCSSの仕様

 HTML、CSSを始めとする様々なWWW(World Wide Web)上で用いられる技術の標準化を進める団体としてW3C(World Wide Web Consortium)という団体があります。W3Cの活動にはWHATWF(Web Hypertext Application Technology Working Group)が開発しているHTMLの仕様の勧告とW3C自身が開発しているCSSの仕様書の公開も含まれています。
以下はW3Cの公開している資料へのショートカットです。

HTML & CSS – W3C:HTMLとCSSについての基点になるページ
All Standards and Drafts – W3C:文字通り、全ての標準と草稿。仕様や技術文書が色々

 和訳がない文書が多数、文章量が多量、といったため読むのは結構な苦労ですが、情報はとても多く、ブラウザ依存の問題以外は網羅されているはずです。詳しく調べたい時にあたる資料として使えます。

  • この記事いいね! (0)
村上 著者:村上

【CSS】長い文章の文末を省略して末尾に「…」を表示させる方法

よく使うので、コピー&ペーストしやすいようにまとめ。
タイトル通り、改行されるような長い文章を自動で省略して、末尾に三点リーダーを追加する方法です。

参考にさせていただいたサイトはこちらから。

CSSのみで文末をカットし、…を代入する方法|スターフィールド株式会社
https://sterfield.co.jp/designer/cssのみで文末をカットし、-を代入する方法/

 

早速紹介しますが、コードはこちら。

#text_area {
    width: 400px;
}
.text {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
<div id="text_area">
    <p class="text">春はあけぼの。やうやう白くなりゆく山際、少し明かりて、紫だちたる雲の細くたなびきたる。</p>
</div>

text_area ID で、テキストの表示幅を指定しています。ここで指定した横幅を超えた分の文章が省略され、末尾に「…(三点リーダー)」が表示されます。

そして、text Class で指定されている text-overflow で、文字が指定した範囲から超えた場合の表示方法を指定しています。
今回は、ellipsis が指定されているので、範囲からはみ出た文章は切り取られ、切り取られた部分に省略記号「…」が表示されます。

white-space は、半角スペース・タブ・改行の表示の仕方を指定する際に使用するプロパティです。
今回指定した nowrap では、連続する半角スペース・タブ・改行を、1つの半角スペースとして表示する、という指定になっています。
これだけ見ると、もしかしてこのプロパティを省略されても表示されるのでは?と思ったのですが、この white-space プロパティがないと、文章の省略は無効化されました。
どれも必須の項目のようなので、自己判断で省略したりしないように注意してください。

ちなみに、今回の方法では、省略後の文章は1行で表示されます。
確か複数行の方法もあったように思いますが…気になる方は、調べてみてください。
機会があったら、このブログでも紹介するかもしれません。

 

以上、長い文章を省略して、末尾に三点リーダーを追加する方法でした。
スマートフォンなど、表示できる範囲が少ないときなどにおすすめのCSSですね。
もしくは PCでも、表示項目が多い表などでも活用できそうです。
お好みや要望に応じて使ってみてください。

  • この記事いいね! (0)
村上 著者:村上

【CSS】枠線の色を透明にする方法

使いどころがあるかは正直謎ですが…自分の書いたであろうCSSを見返していたら、気になる記述があったのでまとめ。
CSSで指定したボーダー(枠線)の色を透明にする方法です。
…実質 border: none; の記述と変わらないのでは…?

 

コードはこちら。

<div class="border">枠線を透明に</div>
.border {
    border: 1px solid transparent;
}

透明を指定しているのは、transparent というボーダー色の値です。
通常であれば、ここには #000 などの色コードなどを指定しますが、transparent を指定すると線が透明(非表示)になります。
が、コードを見ると、線自体はあります。

感覚としては、visibility: hidden と似たような感じで使う、と覚えるとわかりやすいかも。
この時は枠線を表示して、この時は非表示に!でも他のスタイルに影響が出るのを防ぐために、表示はしないけど残したい!というときに使うのがよさそうです。
CSS初心者の時は、ボーダーの幅で若干横幅のサイズが合わなくて苦労したことがあるので…それの予防に使えそうです。

 

以上、枠線を透明にする方法でした。
ちなみに、transparent は、「向こう側が見えるほど透き通った、透明な」という意味があるとのこと。
そのまんまの意味ですが、とっさに出てこなさそう…!

  • この記事いいね! (0)
村上 著者:村上

【CSS】:activeなどの疑似クラスがスマートフォンで効かない時の対処法

クリックした時や、要素の上にマウスを乗せたときのスタイルを指定できる疑似クラスはとても便利でよく使いますが、今回スマートフォンではスタイルが反映されないという現象に遭遇しました。
しばらくCSSの書き方が間違っているのかと悩みましたが、どうやら関係なかったみたいです。
で、対処法がこちら。

 

a:active, a:hover {
    background-color: red;
}
<a href="[リンク先]" ontouchstart="">リンクはこちら</a>

疑似クラスを指定した要素、今回は、aタグに対して、ontouchstart属性 を追加するだけです。
これを追加することにより、:active:hover が有効になります。
ちなみに、:active は要素がタップされたとき、ここで指定したスタイルが反映されますが、:hover は、マウスオーバー時ではなく、要素をタップ後、別の要素がタップされるまでの間、指定した要素が反映されます。

参考にさせていただいたサイトはこちらから。

:hoverに設定したCSSがスマホで反応しない時の対処|ビギナーズハイ
http://beginners-high.com/css-hover/

なお、追加する属性は、ontouchstart 以外にも、ontouchendontouchmove でも良いとのこと。

 

対処法としては以上です!
予想以上に簡単でしたので、同じことでお悩みの方は、是非お試しください。

  • この記事いいね! (0)
村上 著者:村上

【CSS】要素の幅や高さを指定する単位vw、vhとは

昨日の私の記事の中で紹介したCSSプロパティに

height : 100vh;

上記のようなものがありました。
今回はこのプロパティについてです。

 

この vw や vh とは要素の幅や高さを指定する時に使用する単位です。
viewport widthviewport height の略です。

ビューポートとは何かについては下記のサイトが参考になります。

実践!スマホサイトのviewport設定 – 第1回 viewportとはなにか?|CodeGrid
https://app.codegrid.net/entry/whats-viewport

ごく簡単に説明すると、ビューポートとは表示領域のことで、PCなどのデスクトップ環境では、ブラウザのウィンドウサイズにあたります。

そのため、例えば要素に

width: 100vw;

上記のように指定すると、このCSSを指定した要素の横幅は、ウィンドウの横幅100%となります。
ウィンドウ横幅 100%=100vw なので、width: 10vw; と変更すると、要素の横幅はウィンドウ横幅 1/10、つまり10%になります。
高さを指定したいときは、viewport height を使い、例えば height: 100vh; と記述すると、要素の高さはウィンドウの100%になります。

今まで通り、width: 100%; を使ってもいいのですが、これは親要素に対してのパーセンテージになるため、仮に親要素の幅が ウィンドウの50%の幅だった場合は、width: 100%;を指定しても、ウィンドウの横幅 50% にしか広がりません。
その点、vw、vh を使えば、親要素の影響なく、ウィンドウの画面サイズを基準に、幅や高さを指定することができます。

私は主に、スマートフォンの画面デザインの時に、calc() と一緒に下記のように使うことが多かったです。

height: calc(100vh - 100px);

上記のように指定すると、このプロパティを指定した要素の高さは、ブラウザの画面の高さから 100px だけ引いた高さになります。
そのため、わざわざJavaScriptで画面の高さを取得して、そこから 100px 引いて、そしてCSSの高さを再指定して…ということをしなくて済むので、かなりコードがすっきりしました…!

 

以上、要素の高さや幅を指定するビューポートの単位 vw、vh についてでした。
なお、他にも vmax や vmin というものもあるそうですが…こちらは使ったことがないので、今回は割愛します。
興味のある方は、ご自分で調べてみてください。

  • この記事いいね! (0)
村上 著者:村上

【CSS】知らないプロパティがあるかも「「出会えたことに感謝したいCSSベスト3」まとめ」

今回の記事は、「#出会えたことに感謝したいCSSベスト3」というTwitterのタグをまとめたサイトについて。
見ているだけでも、私の知らないCSSプロパティばかりで、かなり参考になりそうだったので紹介します。

サイトへのリンクはこちらから。

「出会えたことに感謝したいCSSベスト3」まとめ(随時更新中)
https://togetter.com/li/1216261

 

流し読みしているだけでも、知らないプロパティがわんさか出てくるので、かなり勉強になります。
中でも良く挙げられているのが「display: flex;」というプロパティでした。
こちらはこのプロパティを指定した直下の要素が並列になるというものです。
使ったことはないのですが、調べた感じではとても便利そうでしたので、機会があったら是非使ってみたいですね。

あとは、以前紹介した calc プロパティも挙げられていました。
私もこれは凄く便利だと思うので、TOP3の中に入れると思います。

ちなみに、私が挙げるとしたらこんな感じ。

  1. calc
  2. height: 100vh;
  3. transform: translate(-50%, -50%);

calc が 1位なのは譲れませんね。
2位は、高さを画面の 100% にしてくれる vh という単位で、これにはかなり助けられました。
3位の transform: translate(-50%, -50%); は、要素を左右上下中央揃えにしたいときに重宝しています。

 

当たり前ですが、CSSのプロパティって知らないと使えないので、こんな風に色んな人が「これ良いよ!」と紹介してくれると、知らなかったプロパティに出会えて凄く参考になります。
調べるにも限度があるので…こういうまとめサイトも積極的に目を通してみようかと思います。
興味があれば是非見てみてください!
Webデザイナーさん以外の方でも参考になると思います。

  • この記事いいね! (0)
村上 著者:村上

【CSS】アルファベットの大文字・小文字での表示を指定する方法

私の場合は、小文字が強制的に全て大文字になってしまったのがきっかけで調べたプロパティです。

使用するプロパティは「text-transform」です。
こちらは、アルファベットを大文字もしくは小文字で表示するかを指定できます。
指定できる値は下記のとおりです。

表示される文字の形式
none 初期値。大文字・小文字は記述した通りに表示されます
capitalize 単語の先頭文字を大文字で表示します
lowercase 全ての文字を小文字で表示します
uppercase 全ての文字を大文字で表示します

私は none を使いましたが、capitalize も便利そうですね。
が、たまに頭文字を大文字にしたくない時もあるので、そういうイレギュラーなときのことも考えると、none を使うのが無難かな。
で、今回すべての文字が大文字になった原因は、恐らく text-transform: uppercase; が body など結構上位の要素の方に指定されていたためだと思われるので、body で !important を使って強制的に上書きしました。
とりあえず、これで解決です。

 

以上、アルファベットの大文字・小文字での表示を指定する方法でした。
何故か小文字で書いたはずの英単語がすべて大文字になる!という場合は、こちらのプロパティが記述されていないか疑ってみてください。

  • この記事いいね! (0)
村上 著者:村上

【CSS】要素に指定したCSSスタイルを解除する方法

今回はCSSを解除する方法について。
複数のCSSファイルを適用しているサイトで、指定した要素に既に別のスタイルが指定されている場合があるかと思います。
で、その既に設定されているCSSスタイルを解除する方法です。

参考にさせていただいたサイトはこちらから。

CSSのスタイルを解除する – Qiita
https://qiita.com/kijitora-neko/items/155b1bc499a365ea1e3f

 

スタイル解除に使うのは、initial という値です。
これを、スタイルを解除したいプロパティの値に指定するだけ。

指定方法のサンプルは下記のような感じです。

div {
    display: initial;
}
span {
    text-align: initial;
}

解除方法はたったこれだけです。

 

ということで、CSSスタイルを解除する方法でした。
!important を使って上書きする方法はありますが、解除は知らなかったので、これはなかなか使えそうです。

が、Internet Explorer 10 では動作しないとのことなので、動作確認は念入りにしてください。
また、プロパティによっては初期値がある場合もあるので、その時は初期値を指定したほうがよさそうです。
状況に応じて、便利に使いましょう。

  • この記事いいね! (0)
村上 著者:村上

【CSS】iOSで画面を滑らかにスクロールさせる方法

iOSの端末で縦に長い画面をスクロールさせた時に、慣性スクロールが効かず、途中でつっかえるような、ぎこちない動きになってしまったときの対処法です。
と言っても対処法というほど難しいことはなく、そのスクロールする要素に対して -webkit-overflow-scrolling プロパティを適用するだけです。
具体的には下記のとおりです。

<div class="scroll">
    <p>スクロールさせたい要素です</p>

    // 以下、要素の中身を記述
</div>
.scroll {
    height: 300px;
    overflow: scroll;
    -webkit-overflow-scrolling : touch;
}

重要なのは、4行目の -webkit-overflow-scrolling : touch; です。
これを指定することで、慣性スクロールが有効になります。

この -webkit-overflow-scrolling プロパティは、値に auto もしくは touch を指定します。
なお、デフォルト値は auto で、この場合は慣性スクロールが適用されません。

 

ということで、iOS で慣性スクロールを適用する方法でした。
この指定があるのとないのでは、実際に使っているときの感覚に大分違いがあるので、スマートフォンでの閲覧が考えられる場合は、記述しておいた方が無難だと思います。
スマートフォンでのスクロールがカクつくと、ここまでなのか!と意外なくらい、ストレスを感じました。

  • この記事いいね! (0)