カテゴリーアーカイブ CSS

村上 著者:村上

【CSS】要素内のテキストの改行や空白を操作するプロパティ「white-space」

久しぶりに感じるCSSについての記事です。
今回紹介するのは、テキストの改行や空白を操作できる「white-space」というプロパティについて。
新しく使用したプラグインのせいか、テキストが改行されなくなったので、その対処法です。

 

まず、プロパティの値と、その説明については下記をご覧ください。
なお、参考にさせていただいたサイトはこちらから。

white-spaceとは｜コーディングのプロが作るCSS辞典
https://html-coding.co.jp/annex/dictionary/css/white-space/

プロパティの値 説明
normal（初期値） テキスト内の連続する半角スペース、タブ、改行を一つの半角スペースにまとめ、自動的に折り返しをして表示
nowrap テキスト内の連続する半角スペース、タブ、改行を一つの半角スペースにまとめて表示。なお自動的な折り返しは行わない
pre テキスト内の連続する半角スペース、タブ、改行をそのまま表示。なお自動的な折り返しは行わない
pre-wrap テキスト内の連続する半角スペース、タブ、改行をそのまま表示し、それに加えて自動的な折り返しも行う
pre-line ソース中の連続する半角スペース、タブを一つの半角スペースにまとめて表示する。しかし、改行している箇所は改行して表示し、それに加えて自動的な折り返しも行う

以前は normal のままだったのですが、プラグインの影響なのか、改行コードが無効になっていたため、pre-wrap に変更しました。
すると、問題なく改行されました。
改行やスペースをそのまま表示するのなら、pre でもいいのですが、これだと文字の折り返しが行われないため、pre-wrap がおすすめです。

 

以上、改行コードが向こうになってしまった場合の対処法でした。
皆様も、もし何らかのライブラリやプラグインの影響で、テキストが改行されなくなったり、スペースがおかしいと思った時は、こちらのプロパティを調整してみてください。

ちなみに、使用したプラグインは「react-string-replace」です。
リッチテキストを使用するために導入しました。

  • この記事いいね！ (0)
著者:杉浦

多くのcdnリンクを持つcdnjsの紹介

　cdn（contents download link）はjs,cssのライブラリを簡単に読み込む手法です。オープンソース配信サービス、Google Hosted Librariesの紹介で紹介したGoogle Hosted Librariesの様にcdnは多くの場所で配信されています。cdnjsはそのようなcdnの配信リンクをまとめて検索できるサイトです。
　下の画像の様に検索してリンクをコピーするだけでとりあえず使えます。特定のフォーマットで単一のデータを返してくれるAPIも備わっています。
　

　また、cdnjs上でリンクがコピーされた回数をランキングしています。人気が高く、汎用性の高いライブラリが上位に連なっています。jqueryは格別ですね。

  • この記事いいね！ (0)
asabakento 著者:asabakento

mapboxのポップアップについて

今回は、mapbox上でピンをタッチすると、画像がポップアップとして出てくるコードを紹介します。

 

ポップアップを付けるときに、画像を撮影した場所にピンを付与して、それをクリックすると

画像がポップアップとして出てくる機能を追加する作業をしていたので備忘録として載せておきます。

 

ざっくりですが説明します。

ポップアップを表示するメソッドを作ったあとに


var el = document.createElement('div');

でピンのオブジェクトを生成します。

 

その後に

 
popup = new mapboxgl.Popup({offset: [16, 0]})

で、ポップアップオブジェクトを生成して使用可能にします。

 

次に、画像をポップアップとして扱うコードなのですが

.setHTMLメソッドを使って表示します。

本来は、htmlの文字列を表示する役割ですが、ここでは

 

 
src = '+image+'

引数のimageを取って中の画像のurlを渡すことができます。

 

ピンが複数立っている時は、そのピンをクリックするときに引数に画像のurlを持たせて

そのurlに合わせて表示するポップアップを変えていると考えるとわかりやすいかもしれません。

 

後は

setLngLat([lmg,lat])

 

 

で、引数のlatとlngを渡せば撮影した場所にピンが立ちま

す。

以上ですが、ここでは肝だけ説明させていただきました。

 

mapboxは柔軟性が高く、細かい箇所まで地図をカスタマイズできるので

慣れてきたらシムシティ感覚で楽しくなってくると思います！

  • この記事いいね！ (0)
著者:杉浦

CSSの適用優先度

　CSSはHTMLに装飾を付ける仕組みで、主にその詳細度から適用の優先順位が決まります。要素名、クラス、ID、HTML中の直書きと適用される範囲が狭く詳細になるほど優先されます。定義はSelectors Level 3でされていますが、ご存知、ないのですか？CSSの優先順位の説明が大変分かりやすかったです。
　次の図は”ご存知、ないのですか？CSSの優先順位”からの引用です。


　図の様に指定方法の種類別総和が優先度になっています。この優先度の特徴として、IDの様なより詳細な種類の指定方法が用いられていた場合、どれだけクラスの様なより詳細でない種類の指定方法を重ね掛けても優先度で上回れないという点があります。優先度が同値の場合、後から読み込まれた方が優先されます。
　生のCSSではこの優先度を表記してくれません。人間がこの優先度を理解しながらCSSを読み解くのは難しいです。Specificity Calculatorは優先度計算ページです。下図の様に、CSSコードを書きこめば優先度を出力してくれます。計算機を増やしたいならば、Duplicateボタンで複製しましょう。

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

【CSS】「text-decoration:none;」が効かない時の対処法

今日、会社の後輩に「text-decoration:none; が効かないんです…！」と助けを求められたので、その対処法を主に自分用にまとめました。
なお、修正前のコードは下記のとおりです。



<div id="main">
    <a href="[リンク先]">
        <font class="text">リンク先の名称</font>
    </a>
</div>



.text {
    display: teble-cell;
    text-decoration: none;
}

細部に違いがあるかもしれませんが…大体このような感じでした。
で、リンクの下線を消したいけれど、textクラスに指定した「text-decoration: none;」が効いていないとのこと。

 

では、さくっと解決策ですが、まず参考にしたサイトはこちら。

Google Chromeでtext-decorationのnoneが効かない件。|Webディレクションやって ます blog
https://web-directions.com/director/diary/googlechrome_textdecaration_underline.html

上記のサイトによると、
1. 下方向のパディング(padding-bottom)を1px以上取る
2. displayプロパティをblockまたはinline-blockにする
3. 10.5px以上のサイズにする。(10pxよりも大きなサイズでレンダリングされる指定を行う)
上記の方法で解決できるとのことでした。
が、試してみたのですが、1 は効果なし、2 に関してはレイアウトが崩れてしまうのでNGでした。

どうしたものか…。
…と思っていたのですが、そもそも、aタグのリンクの下線を消したいんだから、aタグに対して「text-decoration: none;」を指定すればよいのでは？
と、いうことで試してみたところ、予感的中！
無事、下線を消すことができました！

変更後のコードはこちら。


<div id="main">
    <a href="[リンク先]">
        <font class="text">リンク先の名称</font>
    </a>
</div>


.text {
    display: teble-cell;
}
#main a {
    text-decoration: none;
}

これで解決です。

一度思い込んでしまうと、なかなか違う方法に気付けなかったりするので、後輩にとっては盲点だったんでしょうね。

  • この記事いいね！ (2)
村上 著者:村上

【CSS】CSSで計算式を扱うためのcalc()関数が使えない時の対処法

以前に紹介した、CSSで計算式を使うための関数「calc」について、指定したはずなのに何故かブラウザに反映されない！という現象に遭遇したので、それの回避方法についてです。

なお、前回のcalc()についてまとめた記事はこちらから。

【CSS】スタイルシート内で計算式が使えるcalc()が便利
https://cpoint-lab.co.jp/article/201801/【css】スタイルシート内で計算式が使えるcalcが便利

 

で、本題ですが、その時指定したCSSがこちら。

div {
    width: calc(50vw-20px);
}

ちなみに、値には特に意味はありません。
一見、何の問題もないように思えますが、このCSSを指定しても横幅は変化しませんでした。

問題は、なんと半角スペース。
なんでも、計算式で使われている + や – などの符号の前後に、半角でスペースを空けないと構文エラーになるとのことでした。

なお、今回参考にしたサイトはこちら。

css3-CSS calc() not working-Stack Overflow
https://stackoverflow.com/questions/14967421/css-calc-not-working

同じように、calc()が動かない、という質問に対しての解決策がまとめられています。
やはり、同じように間違ってしまう人がいるようですね。

と、いうことで、先程のCSSを下記のように修正すれば、万事解決です。

div {
    width: calc(50vw - 20px);
}

 

以上、calc()が使えない時の対処法でした。
まさかスペースが関係しているとは思わず…少し悩んでしまいました。
皆様も、CSS で calc() を使うときはお気を付けください。

  • この記事いいね！ (0)
著者:杉浦

マテリアルデザインのさわり

Design – Material Design
マテリアル・デザインって何？ Androidデザイン責任者にインタヴュー | ギズモード・ジャパン
　マテリアルデザインの思想が理想とするデザインは脳にスッと入ってくるデザインです。
マテリアルデザインは一貫性のある法則を持つ世界の上でデザインを行うことで、脳にスッと入ってくるデザインを実現しようとします。一貫性のある法則には実世界の一部を再現するような法則が用いられています。ここで一部、とあるのはマテリアルデザインの目的がユーザの理解の促進にあるからです。理解を妨げて、処理を重くするだけの余分な法則を再現する理由はありません。主な法則は、実世界において紙を重ねた時に起きる現象を再現する直感的な法則です。例えば、ページはhogehogeとかかれたカードの集まり（並べてもいいし、重ねてもいい）で構成される。これは実世界の紙を重ねた時の状態を再現する法則です。他には、カード内から画像や文字ははみ出さない、下の要素には上の要素の影が落ちる。これはそれぞれ、紙面からはみ出して宙に浮く画像や文字はない、下の物体には上のカードの影が落ちる、という実世界上の法則の再現です。
　マテリアルデザインの効果の一例が次です。
ヘッダに影がない

ヘッダに影がある

　影がついた場合ヘッダが下の記事欄から独立していることがわかるため、スクロールをしてもヘッダが固定されると連想しやすくなります。

  • この記事いいね！ (1)
村上 著者:村上

【CSS】要素のタッチやクリックを無効にするpointer-eventsプロパティ

/タイトル通り、今回は要素に対するタッチやクリックを無効化する方法について。
button要素であれば、下記のように disabled を指定すれば、クリックができなくなりますが、それをdiv要素などで行う場合です。

<button type="submit" disabled>無効化されたボタン</button>

 

使うプロパティは「pointer-events」です。
こちらのプロパティは、初期値は auto が指定されています。
この値に、none を指定することで、要素に対するクリック・タップを無効化することができます。

サンプルはこんな感じ。

<div>
    <p>無効化された要素</p>
</div>

div {
    pointer-events: none;
}

$("div").on("click", function(){
    alert("div click!");
});

こちらを実行すると、div要素をクリックしてもアラートが表示されません。
ちなみに、スマートフォンでも動作します。

 

ということで、div要素などのクリック・タップを無効化する方法でした。
なかなか、butto要素以外でクリック・タップをすることはないかもしれませんが…知っていれば便利です。
是非参考にしてください。

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

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

今回は、以前 vw、vhを紹介した記事では割愛した vmax、vmin について。
実際に使う機会があったのでまとめました。

ちなみに、以前の記事はこちらから。

【CSS】要素の幅や高さを指定する単位vw、vhとは
https://cpoint-lab.co.jp/article/201804/【css】要素の幅や高さを指定する単位vw、vhとは/

 

さて、具体的に説明すると下記のとおりです。

vmin (viewport minimum) ウィンドウの幅と高さのうち、値が小さい方に対する割合
vmax (viewport max) ウィンドウの幅と高さのうち、値が大きい方に対する割合

具体的には下記のように記述します。

div {
    width: 30vmax;
    height: 30vmax;
}

上記のように指定すると、PCなどの横長のブラウザで見た場合、ウィンドウの縦横の長い方の長さに合わせて、DIV要素のサイズが変化します。
なお、今回は 30vmax なので、ウィンドウサイズの長い方の長さの 30% のサイズで表示されます。

これを使えば、例えばスマートフォンで、正方形の要素を2つ並べたい！というときに使えます。
意外と高さの指定って難しいので、今後重宝しそうです。

 

ということで、要素の幅・高さを指定する単位 vmin、vmax の使い方でした。
是非ご参考にしてください。

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

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

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

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

【複数行にも対応】長過ぎる文字列を省略して末尾を三点リーダー（…）にする方法いろいろ – 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 で指定した行数までを表示するようにしてくれます。

 

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

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

最近の投稿

最近のコメント

アーカイブ

カテゴリー

メタ情報

CPoint Lab. Corporation All Rights Reserved.