カテゴリーアーカイブ CSS

村上 著者:村上

【CSS】パーセントで指定した横幅に応じた正方形のエリアを描画する

今日、後輩の作業のお手伝いをしているときに見つけた方法です。
個人的にはかなり驚きというか、こんなことできるの!?という指定方法だったので、備忘録としてまとめ。
というか、今後絶対使うときが来る気がする。

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

横幅にあわせて正方形のエリアを作って画像を当てはめたいときの簡単なCSS – NaLabo Blog
https://www.nalabo.net/blog/2017/05/04/1009

 

実装方法ですが、まず HTML を下記のように記述します。

<div class="frame">
    <div class="content">
        <!-- 表示したい要素 -->
    </div>
</div>

で、CSS は下記のように指定します。

.content {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
}

上記のように記述すると、content クラスの要素が、横幅 100% の正方形で描画されます。
ポイントは、height: 0;padding-bottom: 100%; です。
パーセント指定なので、親要素のサイズが変わっても対応できます。

正直、こんな方法があるのか…とかなり驚きでした。
なお、width: 80%; にするときは、padding-bottom: 80%; としておくと、これでも正方形になります。

 

以上、パーセントで指定された要素の横幅に応じた正方形を描画する方法でした。
かなり便利だったので、同じことでお困りの方は是非ご参考にしていただければと思います。

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

【CSS】Android、iOSでリンクをタップしたときのハイライトを無効にする方法

上司に教えてもらった方法なので、忘れないように、参考リンクもあわせてまとめ。
Android や iOS でページのリンクをタップした際に表示される、グレーのハイライトを無効にする方法です。
私の場合、react-tabs をアプリに導入したところ、iOS でページ遷移時に画面のほぼ全面が一瞬グレーがかったようになり、非常に見辛い状況でした。
それの対処法として、タブパネルにかかっていたリンクのハイライトを無効にしました。

教えてもらったリンクがこちら。

iOS や Android でリンクをタップした時に灰色の背景色が付くのをなくす CSS – Corredor
http://neos21.hatenablog.com/entry/2017/10/18/080000

 

実装方法ですが、まったく複雑なことはなく、ハイライト無効にしたい項目に下記のプロパティを追加するだけです。

a {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

上記を追加すると、原則全てのテキストリンクのハイライトが無効になります。

なお、iOS のみの機能ですが、ハイライトの色や透明度を指定することができるようです。
Android は無効化することしかできません。

a {
  /* 透明度50%の緑 */
  -webkit-tap-highlight-color: rgba(0, 255, 0, 0.5);
  /* 紫色 */
  -webkit-tap-highlight-color: #ff00ff;
}

指定するときは、上記のように指定します。

 

以上、リンクをタップしたときのハイライトを無効にする方法でした。
ただ、ハイライトがないと、リンクを押せたかどうかがわからないため、個人的にはあったほうがいいのでは…とも思います。
実際に使用してみて、導入するかを決めることをお勧めします。
私のように、変な場所にハイライトがかかっており、使っている時にストレスを感じる!使用感が悪い!という時には非常に有効だと思います。

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

【CSS】「word-break」を使った文字列の改行ができない時の対処法

ちょこっとだけハマったので備忘録としてまとめ。
word-break プロパティを使った文字列の改行ができなかった時の確認事項です。

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

CSS tips – 文字列を確実に改行させる方法|phiary
http://phiary.me/css-tips-certainly-line-break/

 

まず、基本的には下記を指定します。

p {
    word-break: break-all;
}

break-all という値の場合、英単語の途中だろうが問答無用で改行されます。
それが嫌な場合は、normal もしくは keep-all を指定してください。

また、white-space プロパティに nowrap が指定されている場合、改行されなくなるとのことですので、下記のように指定します。
p {
word-break: break-all;
white-space: normal;
}
[/css]
ちなみに、white-space: nowrap; とは、文字列内のホワイトスペースを無視し、改行を1つの半角スペースとして表示します。
また、ボックスサイズが指定されている場合にも自動改行しないため、こちらを無効にする必要があります。

あとは、width が効かない inline 要素では、word-break による改行が行われないので、デザインに影響がなければ、display:block; を指定しましょう。

ちなみに、私の環境で文字列の改行が行われなかったのも、こちらが問題でした。
width が定義されておらず、横幅が想定以上に伸びてしまい、表示されない変な位置で改行をしていたようです。
そのため、width: 100%; を指定したところ、理想通りの表示になりました。

 

以上、word-break を使った文字列の改行ができなかった時の対処法でした。
正しくは、要素のサイズが正しくなかったのが原因ですが…とりあえず、レイアウトは調整できました。

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

【CSS】iOSでiframe要素が縦に伸びてしまうときの対処法

本日遭遇した現象で、iPhone で見たときに、iframe 要素が縦にびよーんと伸びてしまい、スクロールできませんでした。
ちなみに、Android では問題ありませんでした。
…この端末に依存するタイプの CSS のずれが本当に苦手…。

 

さて、こちらの対処法については、下記の Qiita の記事を参考にさせていただきました。

スマホサイトなどでiframe要素をスクロールさせる方法 – Qiita
https://qiita.com/ta__ho/items/904290fa0c8c60b25af1

まず、HTML要素は下記のようになっているものとします。


<div id='content'>
    <iframe src='[表示したいURL]' />
</div>

で、この時、CSS は下記の指定をしていました。

#content {
    width: 100%;
    height: 100%;
}
#content iframe {
    width: 100%;
    height: 100%;
}

Android であれば、上記のコードで問題ないのですが、iOS だと iframe 内の縦長のページが下に伸びてはみ出してしまい、スクロールすらできない状態でした。
そのため、#content に下記を追加します。

#content {
    width: 100%;
    height: 100%;
    /* 下記を追加 */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

iframe には追加するプロパティはありません。
ここ重要なのは、overflow プロパティです。
overflow の初期値は visible で、要素に収まらない分ははみ出して表示するので、当然といえば当然ですね。
逆に、変更前のコードで動いてしまう Android が凄い…。
なお、横に伸びてしまう場合は、overflow-x プロパティを使用してください。

-webkit-overflow-scrolling プロパティでは慣性スクロールを有効にしています。
これを追加することで、滑らかなスクロールが実現できます。
これがないと、スクロール途中で突っかかって、スムーズにスクロールできず、かなりストレスになる場合があるので、iOS で利用される場合には、追加することをおすすめします。

 

以上、iOS で iframa 要素が縦に伸びてしまい、スクロールできない時の対処法でした。
どなたかの参考になれば幸いです。

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

【JavaScript】scrollTopが効かない時の対処法

先日遭遇したJavaScriptでの現象について。
タイトルにある通り、scrollTop プロパティに値を指定しても、その位置にスクロールしない現象が発生しました。
何故か scrollTop から返ってくる値が常に 0 になっており、それが原因のようです。

 

で、こちらの問題の解決にあたって、下記の記事が参考になりました。

document.body.scrollTopが常に0を返す謎を調べてみた – Qiita
https://qiita.com/tkengo/items/ee758c75ba874757b7fd

この記事によると、原因は scrollTop プロパティでスクロール位置を取得したい要素に下記の CSS を指定するとのことでした。

#sample {
    overflow-y: auto;
    width : 300px;
    height: 200px;
}

widthheight の値は任意です。
現状にあった値に適宜変更してください。

上記を指定することで、id='sample' の要素がスクロール可能な範囲となり、無事 scrollTop の値を取得することができるようになりました。

なお、HTML と JavaScript のサンプルコードは下記のとおりです。
JavaScript はボタン押下時など、任意のタイミングで実行してください。

<body>
    <div id='sample'>
        <!-- 要素の中身を記入 -->
    </div>
</body>
var element = document.getElementById('sample');
var scroll-top = element.scrollTop;

 

以上、JavaScript の scrollTop が効かない時の対処法でした。
JavaScript というよりも、CSS の修正でしたが、ご参考になれば幸いです。

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

【CSS】背景色の指定を解除する方法

何回か調べたので、今後も必要かもしれないと思い、備忘録としてまとめ。
CSS で 背景色を無効化する方法についてです。

 

と言っても、特に難しいことはなく、下記のように background-color プロパティに transparent を指定するだけです。

background-color: transparent;

なお、この値は background-color の初期値です。

こちらの指定方法は、teble の th に背景色を #FFF で指定したところ、別で指定していた罫線が消えてしまい、その対策のためです。
ちなみに、ブラウザは IE でした。
Google Chrome だと、罫線が消えることはなかったので、IE のみの挙動のようです。

 

以上、CSS で背景色の指定を解除する方法でした。
背景色の指定方法はよく使いますが、無効にすることは滅多にしないので、transparent という値については知りませんでした。
無効だから、と、うっかり none とか指定しそうです。
十分に気を付けます。

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

scssの変数、制御構文とhsl表記色

Sass: Syntactically Awesome Style Sheets
 scssはCSSのメタ言語Sassの記法一つです。どのあたりが上位言語かというと、CSSをより便利に記述できるような記法と組み込み関数を増やして、scssファイルをコンパイルすることでcssファイルを作成するあたりが、上位言語です。
 CSSは元から大して変数、制御構文などがなくとも十分使えるものでscssならではのコードはなかなか思いつきません(色を変数化してパレット風にするのは便利なくらい)。この記事ではhsl表記の色と組み合わせることによってscssならではのコードを紹介します。

 上のJSFiddleのCSSを構成しているscssコードが次です。16行目からが特にscssです。変数としての色$baseの色相を組み込み関数adjust-hue()でイテレータに合わせて動かし、イテレータの番号を名前に含むクラス名のdivの高さを変更しています。10行少々のコードで生のCSSでは長大になりそうな離散的グラデーションを実現できました。また、変数$base, $diffの変更だけで色相の起点、刻み幅を変更可能で多少のデザイン変更ならすぐに対応できます。

.flex-row {
  display: flex;
  height: 8em;
  width: 30em;
}

.col-box {
  display: flex;
  flex-direction: column;
}

.box {
  width: 2.25em;
  border: solid darken(#fff, 20%);
}

$base: hsl(0, 100%, 50%);
$diff: 30;
@for $i from 1 through 7 {
  .box-l-#{$i} {
    @extend .box;
    background: adjust-hue($base, ($i - 1) * $diff);
    height: #{$i}em;
  }
  .box-r-#{$i} {
    @extend .box;
    background: adjust-hue($base, -($i - 1) * $diff);
    height: calc(100% - #{$i}em);
  }
}
  • この記事いいね! (0)
著者:杉浦

HTMLとCSSの重ね合わせコンテキスト

 重ね合わせコンテキストはstacking contextの訳でHTMLの描画のZ軸(奥行)に関する概念です。positionやz-indexによってスタッキングコンテキストが定義され、これに沿ってHTML要素の重なり方が決定されます。
 重ね合わせコンテキスト – CSS: カスケーディングスタイルシート | MDN
 スタッキングコンテキストは木の様な階層構造になっており、親のノードの要素の上に子のノードの要素が描画されます。スタッキングコンテキストは次のルールに従います。

  • 重ね合わせコンテキストは他の重ね合わせコンテキストに含めることができ、その結果重ね合わせコンテキストの階層構造ができます。
  • 重ね合わせコンテキストはすべて、その兄弟要素と完全に独立しています。重ね合わせ処理では、子孫要素だけが考慮されます。
  • 重ね合わせコンテキストははめ込み式です。要素の中身が重ねられた後、その要素がまるごと、今度は親の重ね合わせコンテキストの重ね合わせ順の中にあるとみなされます。

重ね合わせコンテキスト – CSS: カスケーディングスタイルシート | MDNより引用

 この親の上に子を描画するルールはけっこう強力で、直感的でないz-indexの動作を引き起こします。

 z-index:4の要素の上にz-index:3やz-index:1の要素が描画され、z-index:5の要素がz-index:6を差し置いて最前面に描画されています。これが親の上に子のルールによるものです。z-indexもまた階層構造になっており、描画順はz-index-levelの記述の様に親子を考慮した辞書順で考えるのがわかりやすいです。地図をwebページ上で描画するLeafletなどはこれを特に利用しています。下図の様にとんでもない勢いで位置の上下に合わせてz-indexを変更していますが、地図ノードコンテキストの上でのみのz-index操作なのでバグの原因になることは滅多にないです。

 重ね合わせコンテキストを生の開発者ツールで読み取るのは正直しんどいです。(見方を知らないだけかもしれないけど)Chromeの拡張にはこれを開発者ツールに追記するものがあります。
z-context – Chrome ウェブストア
 z-contextは下図の様に開発者ツールに、この要素はどのコンテキストに属しているか、コンテキストを作るか、親コンテキストは何か、z-index何番であるかを示します。

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

【css】モバイル端末でみた時の文字サイズが違う

今回は、端末に対応していないサイトをスマホなどのモバイル端末で見るときの挙動とその解決法について書いていきます。

通常のwebサイト制作においては、text-sizeでinputなどの文字の大きさを決めていると思われます。

ですが、通常の状態のtext-sizeだと、下記で紹介する-webkit-text-size-adjustの効果によって縦にした時と横にした時とで文字サイズが異な

る時があり、このズレを放置することでページ全体のレイアウトが崩壊してユーザーを混乱させてしまう恐れがあります。

-webkit-text-size-adjustとは、ページに合わせたテキストの大きさを制御しているプロパティです。

通常、モバイル端末に対応していないwebサイトをスマホなどの端末で見ると、ブラウザはレイアウトを大きめの画面に合わせた状態

で表示させます。-webkit-text-size-adjustは、デフォルトの状態でauto(動いている)状態になっており、このままでは一部分の画面しか

表示してくれなかったりとユーザーにとってもものすごく見づらい画面になってしまいます。

ですが、この-webkit-text-size-adjustの値を100%にすることで使うことで上記の効果を無効化し、元の文字の大きさで表示させることが

できます。

めちゃくちゃシンプルですがこんな感じです。

</pre>
<style>

body{

-webkit-text-size-adjust

}

</style>
<pre>

端末で見られることを想定しているサイトの場合、主にbodyの中に入れてビューの変形を免れることができます。
noneでも設定できるかと思っていましたが、chromeやsafariで見ると文字の配置は変わっているのに

文字サイズだけが変わらず小さいままというとにかく扱いにくい状態になってしまうのでこれは非推奨でした。

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

【CSS】z-indexプロパティが効かない時の対処法【未解決】

タイトルにも明記しましたが、こちらは未解決です。
有効な対処法を発見したら、改めてまとめます…。

 

今回は、要素の重なり順を指定するための z-index プロパティについてです。
Webページのある要素を、最前面に配置しようとしたところ…何故か z-index が有効にならず、他の要素のしたに潜り込んでしまいます。
で、その対処法について検索したところ、一番上に表示されたのがこちらのページです。

z-indexの使い方:CSSで重なり順を指定する
https://saruwakakun.com/html-css/basic/z-index

こちらによると、z-index は position プロパティに static 以外が定義されている必要があるとのこと。
position プロパティのデフォルト値は static なので、relative や absolute など、なにかしらの値を定義する必要があります。
現在の要素の位置を変更したくない場合は、relative を指定しましょう。

が、z-index を指定した要素には、もともと position: absolute; が定義されており…こちらは関係なかったようです。
他の要素の CSS が関係しているようなので、もう少し調べてみたいと思います。

 

以上、CSS の z-index が効かなかった時の対処法でした。
私の環境では解決しませんでしたが…とりあえず、position プロパティを指定しているかを確認しましょう。

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