カテゴリーアーカイブ CSS

著者:村上

【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;
}

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

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

著者:村上

【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 を使った文字列の改行ができなかった時の対処法でした。
正しくは、要素のサイズが正しくなかったのが原因ですが…とりあえず、レイアウトは調整できました。

著者:村上

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

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

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

background-color: transparent;

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

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

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

著者:杉浦

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);
  }
}

著者: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で見ると文字の配置は変わっているのに

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

著者:村上

【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 プロパティを指定しているかを確認しましょう。