カテゴリーアーカイブ CSS

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)
村上 著者:村上

【Cordova】プラットフォームごとにCSSファイルを切り替える方法

今回はタイトル通り、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を切り替える方法でした。
もし以前の私のように、同じことにお悩みの方がいらっしゃいましたら、参考にしていただければ幸いです。

  • この記事いいね! (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)
著者:杉浦

うまく機能する色の組み合わせを探すwebサービスPaletton

Paletton – The Color Scheme Designer
 Palettonは規則だった印象のよい色の組み合わせを探すことを簡単にするwebサービスです。機能は色を探す機能と探した色を用いたサンプルを提示する機能の二つです。
 色を探す機能はパレット上の点をいじることで主に動かします。複数の色を組み合わせる際は一つを動かした時、他の色も動き調和を崩さないようにします。大雑把に色を決めたら右上のRANDOMIZEが使いやすいです。styleは色の点の組み合わせの形、colorは色の点の範囲のことです。similar colors, unlike styleならば同じような色で組み合わせの雰囲気を変えます。

 EXAMPLESは設定した色の組み合わせを用いたページ例です。実際に色を用いてページを作るまでもなくここで何となくの雰囲気を確認できます。

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

【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 の場合は、恐らくデフォルトのセレクトボックスのデザインそのままのようでした。
このままだと、ページのデザインにそぐわなかったので、こちらのデザインを使って、他のテキストエリア等のデザインに合わせました。
そのおかげで、ここだけデザインが浮くこともなく、良い感じに整ったのではないかと思います。

 

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

  • この記事いいね! (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

【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)
著者:杉浦

長方形の画像をCSSだけで真円に表示

 画像を円形にして出力するためにはborder-radius:50%のようにborder-radiusが指定されがちです。画像が正方形の場合はこれだけでもきれいな円形になります(サンプル1)。しかし画像が長方形の場合、角が丸くなりますが画像サイズに合わせた楕円になります(サンプル2)。どのような画像であっても真円にしたい、という時は背景画像の仕組みを用いることで実現できます(サンプル3)。
 このサンプル3は次のCSSコードで実現できます。

.img-box {
  background-image:url(https://lorempixel.com/400/300/animals/1/est);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center,center;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  border-radius: 50%;
}

 width,height,padding-bottomの部分で親要素と同じ横幅、親要素の横幅と同じ高さの空白で埋め尽くされた(paddingのパーセントは親要素の”横幅”基準)divを作ります。このdivをborder-radius:50%をかけることで親要素の横幅と同じ長さの直径を持つ円形のdivにします。

 backgroundが接頭辞のコードで背景画像として、縦横比が崩れず端が切り取られる1枚の画像を上下左右中央に配置します。
background-size | MDN

cover
画像の縦横比を崩すことなく、画像ができるだけ大きくなるよう拡大縮小します。画像の縦横比が要素と異なる場合、空き領域が残らないように上下または左右のどちらかを切り取ります。

background-repeat | MDN

no-repeat 画像は繰り返し描画されません (したがって背景画像描画領域が完全に埋め尽くされるとは限りません)。背景画像の位置は background-position CSS プロパティで定義されます。

background-positiont | MDN

center のキーワード値の場合は、画像を中央揃えにします。


 この二つを組み合わせて真円の形の画像を表示できます。

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

【html-css-javascript】PureCSSで無骨なページをそれっぽくする

前回は、PureCSSで色々いじくり倒していましたが、今回はちゃんとしたアプリっぽい見た目で作ってみました。

今回は、imgタグとinput fileを使った画像を表示するページを作りました。備忘録ぽいですがご容赦ください。

input fileといえばボタンを押すと画像ギャラリーに飛ぶあのコンテンツです。

メジャーなので知らない人はいないと思いますが、そのままこいつを使うとどうも雰囲気が堅いというかなにも

手を付けていないようで野暮ったいです。

せっかくなので前回でも使ったこのPureCSSで今風のボタンにかえてあげましょう。

html↓

    <div class="thumb-wrapper">
      <img id='myImage'>
    </div>
    <div class="button-wrapper">
      <span class="label">
        画像アップロード
      </span>
        <input type="file" name="upload" id='upload' class="upload-box" placeholder="Upload File">
    </div>

CSS↓


/*画像が表示されるコンテンツの位置調整*/
    .thumb-wrapper {
      position: relative;
      height: 50px;
      text-align: center;
      margin: 20% auto;
    }
/*ボタンの幅と位置の調整*/
    .button-wrapper {
      position: relative;
      width: 150px;
      text-align: center;
      margin: 20% auto;
    }
/*ラベルの設定*/
    .button-wrapper span.label {
      position: relative;
      z-index: 0;
      display: inline-block;
      width: 100%;
      background: #00bfff;
      cursor: pointer;
      color: #fff;
      padding: 10px 0;
      text-transform:uppercase;
      font-size:12px;
    }
/*実際に働くボタン*/
    #upload {
        display: inline-block;
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 50px;
        top: 0;
        left: 0;
        opacity: 0;
        cursor: pointer;
    }

JavaScript。↓

    <script>
      const target = document.getElementById('upload');
      const img = document.getElementById('myImage');
      target.addEventListener('change', function (e) {
        const file = e.target.files[0]
        const reader = new FileReader();
        reader.onload = function (e) {
          img.height = 200;
          img.src = e.target.result;
          console.log(img);
        }
        reader.readAsDataURL(file);
      }, false);
    </script>

script側は従来の画像を表示させる機能だけなので割愛させていただきます。

今回使うオブジェクトは4つ。一つ目は画像が表示された時の場所を調整するCSSです。画面中央にくるように

してありますが、このコンテンツは特にPureCSSの恩恵を受けていないのでそこまで語るまでもないです。

二つ目のCSSははボタンの幅を調整しています。これもアップロードするボタンの位置を決めているだけで

こちらも特にPureCSSの影響は受けません。

三つ目のCSSですが、ここでボタンの基本的な部分を生成しています。

button-wrapper span.labelを指していますが、これはbutton-wrapperタグの中のspan.labelを操作しますよという意味合いに

なります。divの中にspanで定義されているので、それが操作の対象になります。

ここでbackgroundやwidthで調整するとこんな感じに仕上がります。

角があった従来のフォームよりクリーンな出来になりました。

 

最後の#uploadオブジェクトですが、こちらは本来あったあのフォームをposition: absoluteを使い

上のボタンで被せるような役割をもっています。

htmlのinput fileのIDにも書いてあるとおりこちらが本体となっており、前のフォームがラベルに隠れて作業をしていたと考えると

分かりやすいです。

最後にここで実装したフォームの全体画像を載せて終了になります。

 

今回も公式を参考にしたコードです。PureCSSに慣れるまでまだかかりそうなのでご容赦くださいまし。

 

 

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