重ね合わせコンテキストはstacking contextの訳でHTMLの描画のZ軸(奥行)に関する概念です。positionやz-indexによってスタッキングコンテキストが定義され、これに沿ってHTML要素の重なり方が決定されます。
重ね合わせコンテキスト – 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何番であるかを示します。
今回は、端末に対応していないサイトをスマホなどのモバイル端末で見るときの挙動とその解決法について書いていきます。
通常の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で見ると文字の配置は変わっているのに
文字サイズだけが変わらず小さいままというとにかく扱いにくい状態になってしまうのでこれは非推奨でした。
タイトルにも明記しましたが、こちらは未解決です。
有効な対処法を発見したら、改めてまとめます…。
今回は、要素の重なり順を指定するための 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 プロパティを指定しているかを確認しましょう。
今回は、ヘッダーの固定方法と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でいいやみたいな感じで覚えていても問題ないですが、手の込んだサイトを作りたい時は
色々試してみて使い方をマスターしておく必要があるかもしれないですね。
ですが、見栄えのいいページを作る時はヘッダーのカスタマイズが必須になるのでざっと覚えるだけでもプラスになると思います。
色の表記の定義である色空間には様々なものがありますよく聞くものに赤青緑の三原色を用いたRGB、それに加えて透明度を足したRGBAがあります。他にも印刷で使われるCMYK(Cyan, Magenta, Yellow, Key plate)やLab色空間、XYZ表色系など目的に合わせて多くのものが作られています。HSLはその中の一つでHLSとも呼ばれ色相(Hue)、輝度(Lightness)、彩度(Saturation)の3値から定義される色空間です。HLSの値の大雑把な意味は次です。
- 色相:色味を0~360度の範囲の角度で表す。0度は赤で、その反対側に位置する180度は赤の反対色にあたる青緑。すなわち、反対色を見つけるのも容易。色相についてはHSVと同じ。
- 彩度:HSVとは違い、純色から彩度が落ちるということは、すなわち灰色になっていくという考え方に基づいている。
- 輝度:明度100%を純色とし、そこからどれだけ明るさが失われるかを示すHSVとは違い、輝度0%を黒、100%を白とし、その中間(50%)を純色とする。50%以下はHSVの明度を示し、50%以上はHSVの彩度を示すと考えると分かりやすいだろう。
紹介するHSLの主な利点は二つです。まず第一にCSSのオプションとして直接指定できます。次の様にhsl(hue, ssaturation, lightness)を指定するのみで大変楽です。
style="background-color: hsl(90deg, 100%, 50%);
CSS を使った HTML の要素への色の適用 – HTML: HyperText Markup Language | MDN #HSL_functional_notation
わざわざ変換式を実装してRGBに変える必要も、RGB上でややこしい計算をする必要もありません。
第二は自然で多彩な色の変化を簡単に表せることです。次のJSFiddleはHSL方式とRGB方式それぞれで箱の中の色を変えるコードの実装です。
色相の下に彩度、輝度が引っ付いているイメージで簡単に色を決定することができると思います。RGBでは赤緑青から離れる程どうやって思いついた色を作るのかてこずるでしょう。
HSLがRGBに比べて特に便利なのがある色からある色への変化です。同時刻にある色になる様に三値をそれぞれ一次関数的に変化させるのみできれいな色の変化を実現できます。
今回は、セレクトボックスを複数並べたいかつ横に揃えたい時にしたことを書いていきます。
セレクトボックス、決められた項目をプルダウンで表示させるアレのことです。よくアンケートフォームやアプリの会員登録画面で
見受けられますが、案件によってはこのオブジェクトを複数決められた位置に並べたいという時もあるのではないでしょうか。
現に今どきのフォームだと○○県○○市といった県と市を分けて表示するデザインが増えており、今はもうそんな感じのデザインが
主流なのかなと勝手に考えております。
自分も、今回の開発でセレクトボックスを複数出したかったので汚いながらも気合でやってみたのでもしこんなのでよければ参考に
してください。
まずは、htmlからです。reactで書いた誕生日のサンプルですね。
</pre> <span className="birthday"> <p>生年月日</p> <select value={this.state.member.year || ''} onChange={(e) => this.handleYearChange(e)} > { this.yearData.map( d => <option key={d.value} value={d.value}>{d.label}</option>)} </select> <label htmlFor="select-01">年</label> <select value={this.state.member.month || ''} onChange={(e) => this.handleMonthChange(e)} > { this.monthData.map( d => <option key={d.value} value={d.value}>{d.label}</option>)} </select> <label htmlFor="select-01">月</label> <select value={this.state.member.day || ''} onChange={(e) => this.handleDayChange(e)} > { this.dayData.map( d => <option key={d.value} value={d.value}>{d.label}</option>)} </select> <label htmlFor="select-01">日</label> <span className="error">{this.state.error ? this.state.error.birthday : ''}</span> </span> <pre>
なんでdivじゃないのとツッコミを受けそうですが、divを使うと改行してしまい一行ずつセレクトボックスが表示されてしまうという
事態が起きるので、代用して改行をしないspanを使い並列に並べるという意図でございます。
続いてcssです。
</pre> span.birthday { width: 90px; padding:0; font-size:0px; } span.birthday select { width:110px; height: 50px; margin:10px; border:1px solid black; display: inline-block; text-align: center; font-size:16px; background-color:#fff; } <pre>
あまり深いことは書いていないのですが、span.birthdayでセレクトボックスを三つ並べられるようエリアを拡大していますね。
下のspan.birthday.selectでセレクトボックスそのものの大きさとセレクトボックスの外線、位置を決めています。
以上でセレクトボックスを横向きに表示するコーディングはおしまいです。実はこれもネットにも中々乗っておらず、一つ一つ
パーツを繋ぎ合わせてせこせこ書いていました。いびつですが、正しく動きますので、reactで同じようなコンポーネントを
作りたい、でもどこにも思ったことが書いていない!というかたはもしよろしければ参考にしてみてください。
今回はタイトル通り、CordovaアプリでプラットフォームごとにCSSを切り替える方法について。
デザインにもよるかもしれませんが、覚えておくと意外と便利です。
今回参考にさせていただいた記事はこちら。
第3回:Apache Cordovaでプラグインを使ってみよう (1/5):連載:Visual Studio+Apache Cordovaで始めるiOS/Androidアプリ開発 – @IT
http://www.atmarkit.co.jp/ait/articles/1605/23/news032.html
こちらの2ページ目に記載されている内容です。
こちらの設定はそれほど難しくなく、まずは大元となるCSSを作成し、アプリ内で読み込みます。
ここでは仮に style.css としておきます。
次に、プロジェクトのルートディレクトリ直下に merges ディレクトリを作成し、更にそのフォルダ内に、android、ios など、プラットフォーム名のディレクトリを作ります。
最後に、各プラットフォーム内にcssディレクトリを作成し、その中に、上で作成した style.css ファイルをコピー&ペーストします。
イメージとしてはこんな感じ。
merges
┗ android
┗ css ― style.css
┗ ios
┗ css ― style.css
あとは、各プラットフォームの style.css ファイルを変更すればOKです。
なお、大元の CSS から変更がない場合は、そのプラットフォームのディレクトリを作成する必要はありません。
例えば、iOS はデザインを追加もしくは変更したいけど、Android はそのままでOKという場合は、ios ディレクトリ以下のみを作成するだけで、変更が反映されます。
注意点というか推奨ですが、こちらを実装する場合は、切り替える必要のある記述のみを 別ファイルに抜き出すことをおすすめします。
一度こちらの方法でCSSを切り替えたとき、CSSファイルをそっくりそのままコピーして各プラットフォームごとに配置してしまったので、CSS ファイルの内容を把握するのが若干大変でした。
是非、私と同じわだちを踏まないようにしてください…。
また、JavaScript や画像でも上記の方法を用いれば、同様にプラットフォームごとに処理を変更することができます。
が、私は試したことがないので…興味やその必要性のある方は、是非実際にお試しください。
以上、プラットフォームごとにCSSを切り替える方法でした。
もし以前の私のように、同じことにお悩みの方がいらっしゃいましたら、参考にしていただければ幸いです。
現在開発中のアプリを、ノッチのある iPhoneX で動作確認したところ、個人的に非常に見た目が格好悪かったので、その対処法について。
結果としては、無事にノッチにも対応した見た目に変更することができました。
なお、今回参考にさせていただいた記事はこちら。
・検証。iPhone Xでアプリの見た目はどうなるのか?|モナカプレス
・iPhone X に対応したモバイルサイト・Cordova アプリの作り方と注意点 – Naoki Matagawa – Medium
早速適用方法ですが、まず HTML に下記の Metaタグを追加します。
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width,viewport-fit=cover">
content に viewport-fit=cover を追加しています。
こちらを追加することで、アプリの起動時に画面の上下にあった白いエリアが無くなります。
これだけでも大分アプリらしくなりますが、やはりノッチが気になる…。
ので、次に 下記のコマンドで、スプラッシュページのプラグインを追加します。
cordova plugin add cordova-plugin-splashscreen
そうしたら、下のサイズ・名前の画像を用意します。
保存場所は、res/screen/ios
ディレクトリの中です。
結構大きいサイズの画像が必要です。
で、画像が用意出来たら、config.xml に下記の設定を追加します。
<platform name="ios"> <splash src="res/screen/ios/Default@2x~iphone~anyany.png" /> <splash src="res/screen/ios/Default@2x~iphone~comany.png" /> <splash src="res/screen/ios/Default@2x~iphone~comcom.png" /> <splash src="res/screen/ios/Default@3x~iphone~anyany.png" /> <splash src="res/screen/ios/Default@3x~iphone~anycom.png" /> <splash src="res/screen/ios/Default@3x~iphone~comany.png" /> <splash src="res/screen/ios/Default@2x~ipad~anyany.png" /> <splash src="res/screen/ios/Default@2x~ipad~comany.png" /> </platform>
ここまで完了した状態で実行すれば、アプリの画面がノッチの部分まできちんと広がります。
が、広がりすぎで、レイアウトによっては角が欠けたりするので、下記の CSS を追加します。
html { padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top); padding-right: constant(safe-area-inset-right); padding-right: env(safe-area-inset-right); padding-left: constant(safe-area-inset-left); padding-left: env(safe-area-inset-left); padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); }
こちらを指定することで、ノッチ部分等に画面が被さるのを防ぐことができます。
なお、場合によっては html への指定ではうまくいかない場合がありますので、その辺りはデザインによって適宜変更してください。
私は ヘッダーとフッターがあるデザインだったため、padding-top
と padding-bottom
は html ではなく、ヘッダーとフッターにそれぞれ指定しました。
なお、上記の設定は、端末が iPhoneX の時のみ有効になりますので、Android や 他の iPhone 端末には影響しません。
以上、Cordova アプリの見た目を iPhoneX に対応させる方法でした。
設定は意外と簡単で、むしろスプラッシュページの画像を用意する方が面倒でした。
もし同じことでお悩みの方がいらっしゃいましたら、参考にしていただければと思います。
Paletton – The Color Scheme Designer
Palettonは規則だった印象のよい色の組み合わせを探すことを簡単にするwebサービスです。機能は色を探す機能と探した色を用いたサンプルを提示する機能の二つです。
色を探す機能はパレット上の点をいじることで主に動かします。複数の色を組み合わせる際は一つを動かした時、他の色も動き調和を崩さないようにします。大雑把に色を決めたら右上のRANDOMIZEが使いやすいです。styleは色の点の組み合わせの形、colorは色の点の範囲のことです。similar colors, unlike styleならば同じような色で組み合わせの雰囲気を変えます。
EXAMPLESは設定した色の組み合わせを用いたページ例です。実際に色を用いてページを作るまでもなくここで何となくの雰囲気を確認できます。
先日、ラジオボタンとチェックボックスのカスタマイズで参考にしたサイトをご紹介しましたが、今回はセレクトボックスのデザインをカスタマイズする際に参考にさせていただいた記事をご紹介します。
ちなみに、先日の投稿記事はこちらから。
さて、今回ご紹介したい記事はこちら。
コピペでできる!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 の場合は、恐らくデフォルトのセレクトボックスのデザインそのままのようでした。
このままだと、ページのデザインにそぐわなかったので、こちらのデザインを使って、他のテキストエリア等のデザインに合わせました。
そのおかげで、ここだけデザインが浮くこともなく、良い感じに整ったのではないかと思います。
以上、セレクトボックスをシンプルなデザインにカスタマイズする方法でした。
コピペで実装できるのでかなり簡単だし、助かりました。
サイトで紹介されている他のセレクトボックスのデザインも素敵ですので、是非参考にしてはいかがでしょうか。