カテゴリーアーカイブ CSS

著者:村上

【CSS】テーブルのセルの横幅を均等にする方法

テーブルで表を作成するとき、覚えておくと便利そうなスタイルが table-layout というプロパティです。
先日初めて使いましたが、このプロパティを適用すると、テーブルのセルの横幅が均等になるので、なかなか見やすい表を作成できました。
ただ、表示させるデータにもよるかな。

サンプルは下記のとおりです。

上は、表の横幅を指定しただけのテーブルで、下は table-layout に fixed を指定したテーブルです。
上記のように、横幅が均等になるので、類似データを表示するときに重宝しそう。

下の表のコードは下記のとおりです。

<table border="1" id="fixed">
    <tr>
        <th>月曜日</th>
        <th>火曜日</th>
        <th>水曜日</th>
        <th>木曜日</th>
        <th>金曜日</th>
        <th>土曜日</th>
        <th>日曜日</th>
    </tr>
    <tr>
        <td>Monday</td>
        <td>Tuesday</td>
        <td>Wednesday</td>
        <td>Thursday</td>
        <td>Friday</td>
        <td>Saturday</td>
        <td>Sunday</td>
    </tr>
</table>

#fixed {
    width:800px;
    table-layout: fixed;
}

見てわかる通り、table-layout: fixed; を指定しているだけです。
なお、table-layout プロパティは、テーブルの横幅が指定されていないと有効にならないため、必ず width プロパティを指定しましょう。

ちなみに、table-layout を適用したうえで、特定のセルのみの横幅のサイズを指定することもできます。
その場合は、横幅を指定したセル以外のセルは、引き続き均等の横幅で表示されます。

ちょっとしたことですが、セルの横幅が揃うだけでも、見やすさは大きく影響されますね。
また、テーブルに table-layout: fixed; を指定すると、最初の一行目を読み込んだ時点で各列の幅を固定して表示を開始するため、 表示が速くなるメリットがあるのだとか。
行数が多いデータを扱う場合は、積極的に使っていきたいですね。

以上、テーブルのセルの幅をそろえて、見た目を整える方法でした。

著者:村上

【CSS】IEでのみ適用されるスタイルを指定する方法

今回は久しぶりにスタイルシートについての記事です。
Chromeとかでは問題ないのに、IEで閲覧した時だけ、ここのアイコンの位置がずれる…ってことあるかと思います。
そういったときに、IEでのみ余白のサイズを○pxにするなど、ブラウザを指定してスタイルを適用する方法です。

参考にさせていただいた記事はこちら。

IE11にのみ適用するスタイルシート – Qiita
https://qiita.com/eturlt/items/d43b1e19d7878ed41456

記述方法は、下記のとおりです。

image {
    width : 300px;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    image {
        width : 250px;
    }
}

上記のようにメディアタイプを指定し、閲覧に使われているブラウザが IE だと判断したら、その中で記述した CSS を適用するという方法です。
こちらを使うと、例えば上記のコードでは、Chrome などで閲覧したときは画像の横幅は 300px で表示されますが、IE で閲覧したときのみ、画像の横幅は 250px で表示されます。
こちらを指定したところ、狙い通りに IE でのみ特定のスタイルを指定することができました。

が、こちらの方法、実はあまり推奨されていない方法なのだとか。
そのことについてまとめてあるサイトはこちら。

-ms-high-contrast を CSS ハックに使ってはいけない、ただひとつの理由 / JeffreyFrancesco.org
https://jeffreyfrancesco.org/weblog/2017042601/

また、こちらの方法では、依然として Microsoft Edge でデザインが崩れたままでした。

やはり IE、Edge は癖があって苦手です…！
が、とりあえずは IE では意図したとおりのデザインで表示させることができたので、一旦これでOKとしようかな…。
もし、他にいい方法があるようでしたら、あらためてご紹介します。

著者:村上

【CSS】テキストや画像の縦方向の位置を指定する「vertical-align」が効かない時の対処法

ある要素内のテキストや画像などを縦方向の位置を指定するときに便利な「vertical-align」プロパティですが、時折聞かないことがあるそう。
私もこの現象に遭遇したので、備忘録としてまとめ。

まず、書いたコードはこちら。

<div id="outer">
    <div id="inner"></div>
</div>

#outer{
    width: 500px;
    height: 500px;
    background-color: blue;
    vertical-align: middle;
}
#inner{
    width: 200px;
    height: 200px;
    background-color: green;
}

で、上記で何が問題かというと、そもそも「vertical-align」プロパティが適用されるのは、インライン要素とテーブルセルのみだったことです。
したがって、上記でいうと #outer に、「display: table-cell;」を追加したところ、あっさりと #inner の要素が #outer 要素に対して縦方向の中央揃えになりました。

分からないとドツボにハマりそうですが、案外原因ってこんな些細なことだったりするんですよね…。
私は分からないと判明してすぐに調べたので、長時間調べることもなく原因が判明しました。

なお、中央揃えする方法なら、こちらの方法もあります。

【CSS】DIV要素を上下左右で中央揃えする方法（IE、Safari対応）
https://cpoint-lab.co.jp/【css】div要素を上下左右で中央揃えする方法（ie、safari/

こちらは、親要素に「position: relative」を、子要素に「position: absolute」を指定して、さらに子要素に「top: 50%」「transform: translate(0, -50%)」を指定する方法です。
具体的には下記のとおりです。

#outer{
    width: 500px;
    height: 500px;
    background-color: blue;
    position: relative;
}
#inner{
    width: 200px;
    height: 200px;
    background-color: green;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}

上記のコードでも、vertical-align: center を指定した時と同じ結果になります。
なにかしらのCSSプロパティの制約がなければ、お好きな方をお使いいただければいいと思います。

ということで、要素の縦方向の位置を指定する方法でした。
他にも、margin を指定するなど、色々方法はあると思いますので、自分のコードにあった方法をお試しください。

著者:村上

【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:after の top のパーセントの値を変更します。
行数でいうと、18行目と28行目の箇所です。
パーセントを大きくすると三角が下に、小さくすると三角が上に移動しますので、お好みの位置で調節してください。

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

著者:村上

【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」共々、是非参考にしていただければと思います。

著者:村上

【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!」のアイコンを表示したりできそうですね。
それ以外は正直思いつきませんが…汎用性は高そうです。

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

著者:村上

【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は…乞うご期待！というところでしょうか。
メジャーなブラウザにはほぼ対応しているみたいなので、試しに使ってみるのもよさそうですね。

著者:村上

【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」とか書き間違えていたので、皆様はご注意ください！

著者:村上

【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; ですね。

著者:村上

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