カテゴリーアーカイブ HTML

著者:杉浦

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

【javaScript】今更WebAudioAPIを試す

去年の話ですが、お遊びで動物の鳴き声を使った目覚ましアプリを作ろうとしたときにWeb Audio APIというプラグインを知りました。

javascriptにおける音声を再生または取り込むための機能は、フラッシュやhtml5対応の</audio>タグがその役割を担っています。

両方とも音声の再生をする分には困ることはないのですがこれらのオブジェクトはいかんせん制約が多く、現在の速さが求められる

アプリ開発とは相性が悪いです。なのでこれからはWeb Audio APIを使ってねという記事を目にしました。

Web Audio APIとは、webアプリケーション向けに開発された、音声ファイルの管理に特化したjavaScriptAPIです。

コード量も少ないので、複雑な処理でなければ初心者のかたでも扱うことができます。

ざっくりとですが、コンテキストで音声の再生を管理するコードがこちらです。

var context;
window.addEventListener('load',init,false);
function init(){
  window.AudioContext = window.AudioContext || window.webkitAudioContext;
  context = new AudioContext();
}
  catch(e){
  alert('web Audio API is not supported in this browser');
  }
}
[/javascipt]

initで初期化させてスタンバイさせておけば、後はcontextで読み込んでくれるのでここだけ抑えておけば基本は大丈夫だと

思います。iphoneでは未検証なので断言はできないですが、他の従来のプラグインも素直に動いてくれているのでAPIサポート外

でもない限りこっちでも問題ないのではないでしょうか。

後はこれをreactとかのライブラリに入れるとちゃんと動くのかなとか考えることもありますが、現状javaScriptで音声を

扱いたいなと思ったらこのwebAudioAPIで間違いないと思うので、もしよろしければ参考に・・・

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

【html-css】複数のセレクトボックスを並列で表示させる

今回は、セレクトボックスを複数並べたいかつ横に揃えたい時にしたことを書いていきます。

セレクトボックス、決められた項目をプルダウンで表示させるアレのことです。よくアンケートフォームやアプリの会員登録画面で

見受けられますが、案件によってはこのオブジェクトを複数決められた位置に並べたいという時もあるのではないでしょうか。

現に今どきのフォームだと○○県○○市といった県と市を分けて表示するデザインが増えており、今はもうそんな感じのデザインが

主流なのかなと勝手に考えております。

自分も、今回の開発でセレクトボックスを複数出したかったので汚いながらも気合でやってみたのでもしこんなのでよければ参考に

してください。

まずは、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で同じようなコンポーネントを

作りたい、でもどこにも思ったことが書いていない!というかたはもしよろしければ参考にしてみてください。

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

HTMLの検証を行ってくれるwebサービスNu Html Checker

Ready to check – Nu Html Checker
 Nu Html CheckerはHTMLのバリデーターです。HTMLソースを読ませるとそれがW3C準拠なのかを始めとして様々な警告をしてくれます。読ませ方は様々です。上記リンクからはwebページのアドレス、HTMLファイル、HTMLソースコードそのものを読み込むことでHTMLバリデーションを実行するページへ飛べます。
 バリデーションの結果よく報告されるのは既に非推奨、不要な属性である、そこにそのタグを置くべきでない(label中にdivなど)の様なものから文法エラーまで多岐に渡ります。いくつかのページで試しましたが、エラーが一斉なかったのはNu Html Checkerのみでした。
 Ready to check – Nu Html Checker中のAbout this checkerにはより詳細な使い方が載っています。主にローカルで動かす手法とブックマークレットで動かす手法の二種類です。ブラウザのセキュリティ機能で動かない時がままありますが、HTMLが動的に生成される場合でも簡単に対応できるブックマークレットは特に便利です。

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

【Cordova】アプリの見た目をiPhoneXの画面に対応させる方法

現在開発中のアプリを、ノッチのある 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">

contentviewport-fit=cover を追加しています。
こちらを追加することで、アプリの起動時に画面の上下にあった白いエリアが無くなります。
これだけでも大分アプリらしくなりますが、やはりノッチが気になる…。

ので、次に 下記のコマンドで、スプラッシュページのプラグインを追加します。

cordova plugin add cordova-plugin-splashscreen

そうしたら、下のサイズ・名前の画像を用意します。

  • Default@2x~iphone~anyany.png – 1334×1334
  • Default@2x~iphone~comany.png – 750×1334
  • Default@2x~iphone~comcom.png – 1334×750
  • Default@3x~iphone~anyany.png – 2208×2208
  • Default@3x~iphone~anycom.png – 2208×1242
  • Default@3x~iphone~comany.png – 1242×2208
  • Default@2x~ipad~anyany.png – 2732×2732
  • Default@2x~ipad~comany.png – 1278×2732

保存場所は、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-toppadding-bottom は html ではなく、ヘッダーとフッターにそれぞれ指定しました。
なお、上記の設定は、端末が iPhoneX の時のみ有効になりますので、Android や 他の iPhone 端末には影響しません。

 

以上、Cordova アプリの見た目を iPhoneX に対応させる方法でした。
設定は意外と簡単で、むしろスプラッシュページの画像を用意する方が面倒でした。
もし同じことでお悩みの方がいらっしゃいましたら、参考にしていただければと思います。

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

【html5】reactでを使う時に疑問に思ったこと

先週に続いて今回もhtml・css関係の話題になります。しばらくこのようなブログが続くと思いますがご容赦ください。今回は

<br>タグについて少し語らせていただきます。

 

<br>は、html5におけるオブジェクトの一つです。brタグを文に差し込むと、その差し込んだ位置を境目に改行を生成してくれます。

中でも長い文章や箇条書きと相性がよく、ごく一般的なサイトでも当たり前のように使われています。

ちょうど今開発に使っているreactでもちゃんと反応するかどうか確認をしてみたのですが、どうもreactで書くと静的にhtmlで書いている

時と同じ要領で書くとエラーが起きてしまいます。

ん~・・おかしいなぁと思いつつ<br>を前後に移動させたり<p>タグの外に書いたりしてみたのですが解決に至らず。

結局下のような構成にしてみました。

 

<p className="sample">
今日もいい天気です。<br></br>
お散歩日和ですね。</p>

少し強引でしたが、改行したいところで<br></br>を挟んでおけばreactでも効いてくれるようです。

後から考えてみたのですが、forタグのように、javascriptには<br>に類似する予約語や定数は聞いたことがないので、なぜ表示

されないかはもう少し掘り下げて調べないと完全な解決にはなりそうにないですね・・・。

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

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

ほぼメモというか備忘録ですが、とても良いサイトを見つけたのでご紹介。
HTML のラジオボタンやチェックボックスをカスタマイズする方法について紹介したサイトです。

サイトはこちら。

CSSでのラジオボタン・チェックボックスのカスタマイズを詳しく説明してみた|カルチャーアカデミア広島
https://cultureacademia.jp/webcreate/303/

チェックボックスをカスタマイズしたいけど、フレームワークを使うほどではない…というときにおすすめです。
実際、現在開発中のページでも活用させていただきました。

 

今回、私が使用させていただいたコードはこちら。
まず、CSS です。

.checkbox01-input{
  display: none;
}
.checkbox01-parts{
  padding-left: 20px;
  position:relative;
  margin-right: 20px;
}
.checkbox01-parts::before{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 15px;
  height: 15px;
  border: 1px solid #999;
  border-radius: 4px;
}
.checkbox01-input:checked + .checkbox01-parts{
  color: #009a9a;
}
.checkbox01-input:checked + .checkbox01-parts::after{
  content: "";
  display: block;
  position: absolute;
  top: -5px;
  left: 5px;
  width: 7px;
  height: 14px;
  transform: rotate(40deg);
  border-bottom: 3px solid #009a9a;
  border-right: 3px solid #009a9a;
}

HTML は、下記のとおりです。

<label>
  <input type="checkbox" name="checkbox01" class="checkbox01-input">
  <span class="checkbox01-parts">チェックボックス01</span>
</label>

こちらを実装すると、下のようなデザインになります。

デフォルトのチェックボックスよりはるかにお洒落!
チェックボックスのサイズも大きいので、スマートフォンでも押しやすいサイズ感です。
また、ラベルのテキストをクリックしても、ボックスにチェックが入れられるようになっているので、使い勝手も良いです(こちらについては、デザイン関係なく実装しますが)。

ほかにも、チェックした時にふわんと波のように広がるラジオボタンや、アニメーション付きのチェックボックスも紹介されていました。
ボックスの色も簡単に変えられたので、かなり使いやすいですね。

 

以上、チェックボックスやラジオボタンのカスタマイズについてのおすすめサイトのご紹介でした。

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

【css】ボックスを使ってコンテンツを見やすくする

今回は、cssを使ってボックスのようなコンテンツを作り、他のコンテンツと組み合わせて表示してみようと思います。

ボックスというプロパティがあるわけではなく、ボックスのような形に仕上げることでユーザーが見やすい・とっつきやすい

コンテンツを作ることを目的としております。

例として、ラジオボタンやチェックボタンをそのまま配置すると、機能としては問題ないものの押しにくかったり

見落としてしまったりとユーザー目線で見てみると意外と綻びがちらほら見受けられます。

造作もないことですが、やってみたいけど方法が分からないという方の参考になればいいなと思っています。

それでは本コードを紹介していきます。※reactベースで書いています。

</pre>
<pre><div className="box" >
  <label>
    <p id="agreeText">
      利用規約に同意する
    </p>
      <input type="checkbox" value="1" onChange={this.onPermission}></input>
      <span className="checkbox01-parts"></span>
  </label>
</div>

一番上の行のdivですが、ここでクラス名boxを定義します。このdivが、先述したボックスの役割をするコンテンツになります。

一番下にこのコンテンツを敷きたいので、このdivで全体を囲んでください。次に、囲みたいテキストとコンテンツ

(ここではチェックボックス)を書いていきます。labelは長さなどの設定をしているでだけなのでここでは無視して

ください。続いてcssの記述になります。

p#agreeText {
  position: absolute;
  margin-top: -20px;
  margin-left: 80px;
  padding: 20px;
  color: #000000;
}
div.box {
  width:300px; height:15px;
  position: relative;
  margin: auto;
  padding:10px; border:1px solid #fff;
  background-color:#fff;
}

あまり説明する必要がないと思いますが、中央揃いで表示したいためrelativeにしております。

大分端折ってしまいましたが完成物はこんな感じになります。↓

ものすごーくシンプルですが、装飾さえしてしまえば今風のデザインに近いものが作れるんじゃないかと感じています。

他のcssフレームワークならもっと簡単にできてしまうかもですが、何も施していないノーマルのcssでもこんな感じで

仕上げられるので、もしこんなものでよければ参考にしてみてください。

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

【html5】forプロパティについて

今回は、html5でテキストとコンテンツを隣接して表示したい時に使われるfor(予約語のほうではないです)のお話になります。

例えば、selectタグで項目を選択している時は、アプリを使用しているユーザーに今何を選択しているか認知させている必要があります。

〇〇年と表示したい時ですが、中で文字列として埋め込んで表示させることができます。しかし、選択した情報を値としてデータベース

などに送りたい時は、この状態で送信すると例:’2019年’のように選択した西暦全体が文字列としてみなされてしまうので、

データベース側としては都合が悪いです。

この現象の解決策の中には、forタグを使ってセレクトボックス外で‘年’を表示させる方法があります。

forタグは、主に<label>タグの開始タグと終了タグに挟まれた文書を、隣接したコンテンツに関連付けさせるオブジェクトです。

通常ならば下の例のように書いていけば、セレクトボックスと文字列が紐付けられた状態で表示されます。

</pre>
<select value={this.state.year || 1970} onChange={ e => this.setState({year: e.target.value}) } >

{ this.yearData.map( d => <option key={d.value} value={d.value}>{d.label}</option>)}</select>

<label htmlFor="select-01">年</label>
<pre>

このように、forを使えば簡単にコンテンツと文字列を関連付けられるのですが、reactだとこのforがアンノウンになってしまい

認識されないというエラーが起きてしまいました。下記がそのエラーになります。

Unknown property ‘for’ found, use ‘htmlFor’ instead

通常のhtmlでは何の問題もなく使用することができるのですが、reactなどのフレームワークの中では効いてくれないので、

単にreactの仕様なのかな・・・?と感じています。と思ったのですが、javascriptでは予約語のforを使用するので

これでは混同してしまうのでhtmlForをつかってくださいとのことでした。→ htmlFor versus for?

書いているうちにちゃんとした理由が見つかりました。どおりでjavascriptを用いたreactでは使えない訳ですね!

てな訳で、reactでforを使いたいよという方は、代わりにhtmlForを使ってください。

その他参考にさせていただいたサイト→Using the for attribute in JSX – linter unknown property “for”

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

【chrome】Developer Toolsでcssの詳細を見てみた

去年上半期ころから、html5やcssを会社で使い始めたのですが、当時はまだ人のcssをコピーしてそこから分解して

オブジェクトを作ったりと足元がおぼつかないど素人でした。

今でこそ要領も理解して形になるものを作れるようになったのですが、たまに「このタグの位置設定したのに動かないなぁ」とか

しょうもないことでハマってしまうときがあります。

そこで、今までjavaScriptでしか見ていなかったDeveloper ToolsことDevToolsで今度はhtmlとcssを解剖して綺麗なデザインに

修正してみようと考えました。

DevToolsとは、Google Chrome に組み込まれたweb開発向けのデバッグツールです。自分も去年からこれを使って

いたのですが、ほとんどjavascriptのコードエラーのチェックのために使っており、cssはほぼ使わなかったのでDevToolsの

旨味を知らずにここまできてしまいました。

当時はまだcssの操作に慣れておらず、なんとなく複雑そうだなとか考えてしまいcssの中身を見ることに抵抗があったのですが、

視覚的にhtml・cssの作りを見ることができることを知ったのをきっかけに、臆さず使ってみようと決めました。

では簡単に見かたを説明していきます。

まず、chromeを開いてその他のツール→デベロップツールを開きます。

左端のelementタグを開くと、今表示しているhtmlが表示されます。各々のタグの上にマウスを重ねると下の画像の

ように青く表示されます。これがcssが効いている領域になります。

 

 

次に、画面左下にあるStylesタグを開きます。すると、右下に下記のような画像が表示されます。

 

赤い部分が効いているcssを示しており、ここで視覚的にmarginがどうなっているか見ることができます。

この二つを見比べることで、どこのオブジェクトが無効になっているのか、どこのオブジェクトがコンテンツ表示の邪魔を

しているかを即座に見分けて修正することもできます。

初心者ならば、あぁマージンてこういう意味かじゃあここを狭めて・・・など、オブジェクトの使い方も覚えられ、開発の幅も

広がるので、お世話になることをおすすめします。

 

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