カテゴリーアーカイブ CSS

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

著者:asaba

【html-css】ヘッダーを固定する方法とオブジェクトの優先順位

今回は、ヘッダーの固定方法とz-indexの親子関係について説明していきたいと思います。

webプログラマーとしてコンテンツが長いページを作ることは当たり前のようにありますが、長いページを最後まで見終わった後にあれ？

戻るボタンどこだっけ？一番上か！！(涙)みたいな思いをユーザーの方々にさせたくないと思い載せてみました。

まず、ヘッダーの固定する方法からみていきましょう。とりあえず何の変哲もないサンプルから載せていきます。

</pre>
header {
width: 100%;
height: 60px;
text-align: center;
}
<pre>

これは、見た目は何もいじっていないプレーンの状態のヘッダーです。このままだと当然下にスクロールするとヘッダーも

一緒に下がってしまい、後で戻るボタンを探す羽目になりかなり煩わしい思いをします。

そこで、ヘッダーを固定するために次の属性を指定します。↓

</pre>
position: fixed;

z-index: 9999;
<pre>

このように、上のposition: fixedを指定するだけでヘッダーを固定することができます。特殊なギミックを与えない場合は

これだけでも問題ないと思います。しかし、長いページの場合はスクロールすると、このままでは子のオブジェクトが親である

ヘッダーを覆ってしまい見た目もかなり悪目立ちしてしまいますね。

そこで下のz-indexの出番になります。このz-indexですが、今は9999と設定されてありますが、実はこの数値が大きければ大きいほど

親の優先順位が上がります。つまり、9999と設定しておくことによりこれから作る子オブジェクトよりは絶対に優先順位が

下がることはありません。

初学者のうちはデフォルトで9999でいいやみたいな感じで覚えていても問題ないですが、手の込んだサイトを作りたい時は

色々試してみて使い方をマスターしておく必要があるかもしれないですね。

ですが、見栄えのいいページを作る時はヘッダーのカスタマイズが必須になるのでざっと覚えるだけでもプラスになると思います。

著者:村上

【CSS】セレクトボックスのカスタマイズについてのおすすめサイト

先日、ラジオボタンとチェックボックスのカスタマイズで参考にしたサイトをご紹介しましたが、今回はセレクトボックスのデザインをカスタマイズする際に参考にさせていただいた記事をご紹介します。
ちなみに、先日の投稿記事はこちらから。

【CSS】チェックボックス・ラジオボタンのカスタマイズについてのおすすめサイト

さて、今回ご紹介したい記事はこちら。

コピペでできる！cssとhtmlのみでフォームのセレクトボックスをいい感じにするデザイン8選 | copypet.jp｜パーツで探す、web制作に使えるコピペサイト。
https://copypet.jp/797/

かなりシンプルなデザインのセレクトボックスを実装できます。
なお、私は一番上のサンプルを採用させていただきました。

コードはこちら。
なお、私は若干修正させていただいています。

<div class="select_area">
    <select name="alphabet>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
</div>

.select_area {
  overflow: hidden;
  width: 100%;
  text-align: center;
  position: relative;
  border: 1px solid #bbbbbb;
  border-radius: 2px;
  background: #ffffff;
}
.select_area::before {
    position: absolute;
    top: 22px;
    right: 0.9em;
    width: 0;
    height: 0;
    padding: 0;
    content: '';
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #666666;
    pointer-events: none;
}
.select_area select {
    width: 100%;
    height: 50px;
    padding-right: 1em;
    cursor: pointer;
    text-indent: 0.01px;
    text-overflow: ellipsis;
    border: none;
    outline: none;
    background: transparent;
    background-image: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    color: #666666;
}
.select_area select::-ms-expand {
    display: none;
}

コードは以上です。
私はデザインの都合上、セレクトボックスの高さを 50px で固定しており、そのため .select_area::before で指定している下向き三角形「▼」の位置もそれに応じて変更しています。
また、横幅も 100% になっています。
このあたりは、上記で挙げたサイトのコードを参考にするか、適宜自分のデザインに合わせて修正してください。

ちなみに、何故セレクトボックスにデザインを適用したかというと、現在開発中の Cordova アプリを iPhone で確認したところ、セレクトボックスがとてもダサくなってしまったためです。
Android だと、シンプルな白いセレクトボックスだったのですが、iOS の場合は、恐らくデフォルトのセレクトボックスのデザインそのままのようでした。
このままだと、ページのデザインにそぐわなかったので、こちらのデザインを使って、他のテキストエリア等のデザインに合わせました。
そのおかげで、ここだけデザインが浮くこともなく、良い感じに整ったのではないかと思います。

以上、セレクトボックスをシンプルなデザインにカスタマイズする方法でした。
コピペで実装できるのでかなり簡単だし、助かりました。
サイトで紹介されている他のセレクトボックスのデザインも素敵ですので、是非参考にしてはいかがでしょうか。