カテゴリーアーカイブ CSS

村上 著者:村上

【CSS】CSSのみで角丸の吹き出しを作成する方法

吹き出しのデザインを実装する場合、背景画像に吹き出しの画像を適用するという方法もありますが、CSSで実装したほうがレイアウトの融通も利くので楽!
ということで、今回は吹き出しのデザインをCSSで実装する方法についてです。

参考にしたサイトはこちらです。

CSSで作る!吹き出しデザインのサンプル19選
https://saruwakakun.com/html-css/reference/speech-bubble

参考に…というより、ほぼコピペですが…。
他にもいろいろなデザインの吹き出しのサンプルコードがあるので、是非訪問してみてください!

 

で、実装方法ですが、下のコードで、下記のような右から吹き出したスタイルの吹き出しが作れます。

<div class="balloon">
    <p>右向きの吹き出しです</p>
</div>
.balloon {
    position: relative;
    display: inline-block;
    margin: 1.5em 15px 1.5em 0;
    padding: 10px 15px;
    min-width: 120px;
    max-width: 100%;
    color: #555;
    font-size: 16px;
    background: #FFF;
    border: solid 2px #555;
    box-sizing: border-box;
    border-radius: 10px;
}
.balloon:before{
    content: "";
    position: absolute;
    top: 50%;
    right: -24px;
    margin-top: -12px;
    border: 12px solid transparent;
    border-left: 12px solid #FFF;
    z-index: 2;
}
.balloon:after{
    content: "";
    position: absolute;
    top: 50%;
    right: -30px;
    margin-top: -14px;
    border: 14px solid transparent;
    border-left: 14px solid #555;
    z-index: 1;
}

とても簡単ですね!
また、吹き出しの三角の部分の位置を変えたい場合は、.balloon:before
.balloon:aftertop のパーセントの値を変更します。
行数でいうと、18行目と28行目の箇所です。
パーセントを大きくすると三角がに、小さくすると三角がに移動しますので、お好みの位置で調節してください。

 

以上、吹き出しデザインの実装方法でした。
他にも、枠線を消して背景色を変えたりしても、また違った雰囲気になって良いですね。
さらに、参考にさせていただいたサイトでは、円形の吹き出しや、考え事風の吹き出しの実装方法についても解説しているので、こちらも是非参考にしてみてはいかがでしょうか。

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

【CSS】画像の読み込み中にローディング画像を表示させる方法

<img>タグで画像を表示させるときに、少し大きめの画像を読み込むときに時間がかかることがあるかと思います。
その際にローディング画像を表示させる方法についてです。

今回参考にさせていただいたサイトはこちら。

画像の読込完了まで、ローディング画像を表示する方法
https://allabout.co.jp/gm/gc/431053/

 

ちなみに、ローディング画像は、以前ご紹介した「Loader Generator」を使いました。

【Webサイト】ローディングのGIFアイコンが手軽に作れる「Loader Generator」
https://cpoint-lab.co.jp/【webサイト】ローディングのgifアイコンが手軽に作/

 

で、ローディング画像の表示方法ですが、すべてCSSで済みます。
しかも、3行!

コードはこちらです。

img{
    background-image: url("ローディング画像のパス");
    background-repeat: no-repeat;
    background-position: center center;
}

サンプルコードでは、全ての<img>タグに適用させていますが、もちろん ID や Class で指定してもOKです。

コードの説明をすると、まず「background-image」で<img>タグの背景画像にローディング画像を設定します。
そして「background-repeat: “no-repeat”;」で画像の繰り返し表示を無効にし、「background-position: “center center”;」で画像を上下左右中央表示にします。
設定は以上!とても簡単です!

 

表示されるのは本当に一瞬で、ちらっと見えるだけかもしれませんが、画像が表示されるまで、ただ空間がぽっかりと空いているよりも、読み込み中を示すアイコンが見えたほうが、まだ画像の読み込みを待てるような気がしますね。
画像の読み込み中のアニメーションをお探しの方は、ローディング画像生成サイト「Loader Generator」共々、是非参考にしていただければと思います。

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

【CSS】疑似クラスを使って要素がクリック中であることを表現する方法

アプリなどでは、クリック時にボタンの色やカードビューの色が変わって、クリック中、もしくはクリックしたことが分かるようになりますが、今回はそれをCSSで実現する方法についてです。
Cordovaでウェブビューのアプリを作っているのですが、「クリックした感」がわからないので手動で追加してみました。
…これで二重クリックが減るかな?

 

今回使うのは「疑似クラス」というものです。
これを記述することで、マウスオーバー時、クリック中などのスタイルを指定することができます。
サンプルは下記のとおり。

<a href="">クリック中は色が変わります</a>
a:active {
    // クリック中に適用されるスタイル
    a:active {color:#FFF;background:#F00;}
}

上のサンプルを実行すると、リンクをクリックしている間、文字の色は白色に、背景色は赤になります。

なお良く使われるのは、このくらいかな。

  • :link 未訪問のリンクにスタイルを適用
  • :visited 訪問済みのリンクにスタイルを適用
  • :hover マウスオーバーの要素にスタイルを適用
  • :active クリック中の要素にスタイルを適用
  • :before 指定した要素の直前に内容を挿入する
  • :after 指定した要素の直後に内容を挿入する

なお、下二つのサンプルはこんな感じ

<h1>先頭に丸が付きます</h1>
<a href="">カギカッコで囲まれたリンク</a>
h1:before {
    content:"○";
}
a:before {
    content:"「";
}
a:after {
    content:"」";
}

contentプロパティは、文字だけでなく画像も指定できるので、リスト表示の先頭の丸をアイコン画像に変えたり、ブログとかでよく見る、リンクの後ろに新着記事を表す「New!」のアイコンを表示したりできそうですね。
それ以外は正直思いつきませんが…汎用性は高そうです。

 

ということで、今回は疑似クラスについてでした。
にしても、少し色を付けたりするだけで、「クリックした感」がぐっと上がるので、色などデザインの影響力の大きさを改めて実感しましたね。
もっと効果的に使えるようになりたいです。

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

【CSS】CSSで変数が使えるという「カスタムプロパティ」が便利そう

今日、偶然に見つけて便利そうだったので、簡単にではありますがまとめてみました。
CSS変数」「カスタムプロパティ」「CSS Variables」と呼ばれているもので、CSSで変数が使える、というものでした。

なお、偶然見つけたサイトはこちら。

CSSで変数(カスタムプロパティ)を使ってみよう
https://www.webcreatorbox.com/tech/css-variables

 

で、気になる使い方ですが、まず変数の定義は下記のように行います。

:root {
    --item-padding : 10px;
}

:root」の中で定義すると、グローバル変数のように使用できるとのこと。
変数の宣言は「」から始め、任意の名前を付けます。
それを「:」で区切り、変数の値を定義します。
上記では「–item-padding」という名前のグローバル変数に「10px」の値が定義されている、という意味になります。
なお、値は数値だけでなく、「center」などの文字列や、「#F00」という色コードもOKとのこと。
また、変数名は、大文字と小文字が区別されるため、「BackColor」と「backColor」は、別の変数として判断されます。

使用するときは、下記のように指定します。
.item {
padding : var(–item-padding);
/* padding : 10px と同義 */
}
var()」の中に、定義した変数名を指定すると、その変数の値を使用できます。
ちなみに、以前紹介した calc() との併用も可能で、下記のように書くこともできます。

:root {
    --item-padding : 10px;
}

.content{
    padding : calc(var(--item-margin) * 2);

 

また、変数の中で変数を呼ぶこともできるそうで、下記のようにして、背景をグラデーションにすることもできるとのこと。

:root {
  --main-color: #7117ea;
  --sub-color: #ea6060;
  --bg-gradation: linear-gradient(135deg, var(--main-color) 0%, var(--sub-color) 100%) fixed;
}

body {
  background: var(--bg-gradation);
}

body で書かれている、背景色を設定している部分の記述がとてもシンプルですね!
ただ慣れていないと、上の :root の中で、何を書いているのかが分からなくなりそう…。

さらに、CSSで記述した変数を、JavaScriptで利用する、という方法もあるそうですが…まだ使いこなせそうにないので、いったんこちらは置いておきます。
気になる方は、ブログ冒頭で紹介した記事をご覧ください。

そして、肝心の対応ブラウザですが、Chrome, Firefox, Safari, Edgeなどに対応しているとのこと。
IEは…乞うご期待!というところでしょうか。
メジャーなブラウザにはほぼ対応しているみたいなので、試しに使ってみるのもよさそうですね。

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

【CSS】要素を非表示にする「display:none」と「visibility:hidden」の違い

CSSで要素を非表示にするときに使われる、「display:none」と「visibility:hidden」の違いについて。
最初のころはよく間違えたので、戒めも込めてまとめ。
というか、いまだに visibility が空で書けない。

 

まずは、それぞれの違いについて

■ display:none

display:noneは、このプロパティを指定した要素そのものが消えます。
単に非表示というよりも、削除された感じに近いですね。
なお、要素そのものが消えるので、後ろに配置された要素はその分詰めて表示されます。
再度表示させる場合は、「display:inline」か「display:block」を指定すればOKです。
 

■ visibility:hidden

visibility:hiddenは、display:none とは違い、要素を見えなくするだけです。
要素自体が消えるわけではないので、要素があった範囲は詰められることなく、そのまま残ります。
そこだけぽっかりと空間ができてしまうので、レイアウトが崩れることはないのですが、場合によっては少し不格好になって今う可能性もありそうです。
再表示する場合は、「visibility:visible」を指定します。

 

ということで、「display:none」と「visibility:hidden」の違いについてでした。
要素の非表示という機能はほぼ同じなので、混同しないようにしたいですね。
覚え方としては「none = なし」か「hidden = 隠す」という風に覚えると、理解しやすいかなと思います。
最初のころは、「display:hidden」とか書き間違えていたので、皆様はご注意ください!

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

【CSS】floatで指定した要素の回り込みを解除する方法

要素を右側、もしくは左側に寄せるとき良く使われる「float」ですが、今回はこれの解除の方法について。
CSSを勉強したての頃は、回り込みをしたい要素の下の要素に影響して表示が崩れ、悩まされたことがありました…。
今回参考にしたサイトはこちら。

基礎39. 回り込みの解除(floatの解除)
http://web-manabu.com/html-css39/

方法だけでなく、デメリットも記載されており、とても参考になります。

 

まずは、回り込みの記述についてはこちら。

/* 左側への回り込み */
div {
    float: left;
}

この記述があると、指定された要素(今回はdiv)が左寄せになります。
なお、あとに続く要素はその反対側に回り込みます。

で、これを解除する方法は、まず単純に「clear:both」を指定する方法。

■ clear:both;

<div class="left">
    左寄せ
</div>
<div class="clear">
    左寄せ 解除
</div>

.left{
    float: left;
}
.clear{
    clear: both;
}

こんな感じで、左寄せ、もしくは右寄せした要素の後ろで指定します。
これは一番わかりやすいかな?
ただし、要素を追加する必要があるため、少し使いにくい場面がありそうです。

そのため、私が今回使ったのがこちら。

■ overflow:hidden;

子要素に float が指定してある場合、親要素にこの「overflow:hidden;」を指定する方法です。
これを指定することで、親要素が高さを持つので、回り込みを回避できるとのことですが…原理はいまいちわかっていません。
ただ、clear: both; と違って、要素を追加せずに済むため、これが一番使いやすいのではないかと思いますね。

あと、使ってみたいのがこちら。

■ clearfix(クリアフィックス)

親要素にこのclearfixを指定すると、最後に子要素をCSSで擬似的に作り出し、それにclear: both;を指定してfloatを解除しているのだとか。

<div class="parent">
    <div class="child">要素1</div>
    <div class="child">要素2</div>
    <div class="child">要素3</div>
</div>
.parent:after {
    clear:both
}
.child {
    float: left;
}

 

以上、回り込みの解除方法でした。
個人的なおすすめは overflow:hidden; ですね。

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

【CSS】CSSのみで画像を簡単にトリミングできる「object-fit」プロパティが便利

画像を扱う際に、任意の大きさでトリミングしたい場合があるかと思います。
その時に便利なプロパティが「object-fit」です。
これを使えば、画像のトリミングがたった一行でできて、凄く便利!

なお、今回参考にしたサイトはこちら。

1行追加でOK!CSSだけで画像をトリミングできる「object-fit」プロパティー
https://www.webcreatorbox.com/tech/object-fit

 

具体的な記述の仕方はこちら。

img {
    width: 100px;
    height: 100px;
    // トリミング
    object-fit: cover;
}

imgタグに対して、縦横100px、そして「object-fit: cover;」を指定しています。
こうすることにより、画像の縦横比を維持したまま、画像を100px × 100pxのサイズいっぱいに表示することができます。

また、object-position というプロパティを指定することで、表示する画像の位置を指定することもできます。
例えば下記のように指定した場合、

img {
    width: 100px;
    height: 100px;
    // トリミング
    object-fit: cover;
    object-position: 100% 100%;
}

表示している画像が横長の場合は、右端の位置でトリミングしてくれます。
通常のトリミングでしたら、object-position を指定せず中央位置でトリミングで問題なさそうですが、どうしても画像の左側や上を見せたい!というときに使えますね。
ちなみに、object-position: [横の位置] [縦の位置]; という順番で指定します。

 

position とかいろいろ使わなくて済むので、コードもすっきりしておすすめです。
画像トリミングしたいときは、是非こちらを使いましょう。

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

【CSS】スタイルシート内で計算式が使えるcalc()が便利

Webページを作成している中で、この要素の横幅は画面サイズから20pxを引いたサイズにしたい!など、計算が必要となる場面があると思います。
その場合は、Javascript もしくは jQueryで処理をすることが多いかと思いますが、CSSの calc() という関数でも同じ処理を行えるというので試してみました。

 

まず、jQueryで要素のリサイズをする処理は下記のように記述していました。
なお、今回サイズを指定したい要素は、IDに「content」という名前が指定された要素にしています。

// 要素の横幅指定
var width = $(window).width() - 20;
$("#content").width(width);

で、同じ処理をCSSでは下記のように指定します。

#content {
    width: calc(100vw - 20px);
    width: -webkit-calc(100vw - 20px); /* iOS対応 */
}

ちなみに、vw とは、ビューポートの幅を 1/100 した単位のことです。
ビューポートの幅とは画面の横幅のことを指すので、100vw は 画面の横幅のサイズになります。
なお、画面の高さを取得したい場合は、100vh と記述してください。

個人的な感覚かもしれませんが、コードがすっきりしたように感じます。
見た目にも、何をしているのかが分かりやすいですし、私はこちらの方が好みですね。
もちろん、実行後の画面は jQueryでもCSSでも全く一緒なので、お好みの方を使えば良いかと思います。

私のように、Javascript側で要素のリサイズ処理をしたくない派の方は、是非こちらを使用してはいかがでしょうか。

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

【アプリ】Cordovaで開発したアプリを高速化するポイント

現在開発中のアプリがようやく完成間近の形になってきたので、機能以外の改善も行い始めました。
それがアプリの速度改善!
特にAndroidで動作させると遅いので、調べながらではありますが、手を付け始めています。

今回参考にしたサイトはこちら。

PhoneGapアプリのパフォーマンスを改善する10のポイント -Adobe MAX 2013
https://news.mynavi.jp/article/20130520-am2013pg/

成功するPhoneGapアプリを開発するための高速化&UXテクニック
http://blog.asial.co.jp/1142

どちらも2013年の記事なのでやや古めですが、参考になりそうな内容です。

 

で、まずは手っ取り早く試せそうなものを一つずつ試してみました。

1.ハードウェアアクセラレーションを意識してCSS Transitionsを利用する

具体的には、CSSに下記のスタイルを適応することです。

transform: translate3d(0, 0, 0);

このスタイルを追加することで、HTML DOMの描画にGPUが用いられるようになるとのこと。
そうすると、滑らかな描画を実現でき、さらにアプリの速度が大きく向上することもあるそうです。
ただし、あまり多くのHTML DOM要素の描画にGPUを用いると、GPU上の利用可能メモリーが埋まってしまう可能性があり、そうすると突然アプリがクラッシュする危険性もあるとのこと。
特に、深くネストされたDOM要素にこのスタイルを適応すると、上記のようにアプリがクラッシュすることがあるため、安易に追加するのは控えるべきですね。

2.Clickイベントは使用しない

スマートフォンのClickイベントは、画面がタッチされてから発生するまでに300msほどの遅延があるため、Clickイベントの仕様は、動作が遅くなる原因になります。
そのため、代わりにTouchStartを使用するか、FastclickなどのスマホでのClickイベントの応答速度を早くするライブラリを利用するのが良いとのこと。
ちなみに、開発中のアプリには、このFastclickを導入しています。

Fastclick の導入については、こちらを参考にしました。

スマホのクリック応答速度を劇的に速くしてくれる 『FastClick』 の使い方
http://phiary.me/fastclick-usage/

 

3.コンテンツのリフローを控える

リフローとは、要素の位置や大きさなどの再計算を行うことを指します。
リフローの計算は負担が大きいので、必要最小限に抑えるべきとのこと。

…これやってる…。
でも、この処理はどうしてもやらなければならないので、どうにかならないか確認しなければですね。
あとは、下記も効果的とのこと。

  • DOM要素の数を減らす
  • 深くネストされたHTML DOM構造を避ける

…これもやっちゃってるなぁ…。
これについては、コードを確認して、削れそうなところは削らねば。
 

4.テストする

最後のポイントとしては、実際のデバイス、実際のデータを使い、実際の環境でテストする、とのこと。
特に、少し古めのスペックが低めの端末でテストするのがよさそうですね。
私は、私用の端末はそこそこ良いものを買ってしまったので、案外サクサクと動いてしまい、あまり参考にならない…。
会社にあるテスト用端末をお借りしなければですね。

 

他にもまだ改善点はありますが、とりあえず私が試せたもの、確認したものは以上です。
とりあえず、リフローを改善しよう…!

私と同じくCordovaのアプリを開発している方は、是非参考にしてみてください。

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

【CSS】意外と使える背景画像のサイズを変更する方法

大した技術ではないのですが、個人的に使えると思ったのでご紹介。
タイトルにある通り、CSS の background-image で指定した画像のサイズを変更する方法です。

コードはこちら。

// 背景画像を 30px × 30pxに指定
background-image:url("背景画像のパス");
background-size:30px;

そのものずばり、background-size というプロパティを使います。
上記のコードを追加すると、背景に指定した画像のサイズが縦横30pxで表示されます。

また、上記のようにサイズをじかに指定する以外にも、パーセント指定や、containcover といった値も使用できます。
パーセントの場合は、背景画像が指定された範囲に対する画像の幅と高さをパーセンテージで指定できます。
containは、画像の縦横の比率は保持して、背景の範囲に収まる最大サイズになるように画像を拡大縮小してくれます。
coverは、画像の縦横の比率を保持するところまでは、contain と同じですが、こちらは背景の範囲を完全に覆う最小サイズになるように画像を拡大縮小してくれます。
用途によって使い分けてください。

なお、画像のサイズを、縦20px 横 40pxなど、正方形でないサイズで指定したいときは、下記のように指定します。

// 背景画像を 縦20px 横 40pxに指定
background-image:url("背景画像のパス");
background-size:40px 20px;

横のサイズ 縦のサイズ、の順番で記載します。

 

今回は、グラフのマス目を背景画像を指定して表現するというときに、このプロパティを利用しました。
background-size を使えば、マス目の大きさを変えたいときに、元画像自体を編集することなく、CSSのみで調整することができます。
ちょっとしたことですが、意外と汎用性が高そうです。

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