カテゴリーアーカイブ CSS

著者:村上

【CSS】要素の幅や高さを指定する単位vw、vhとは

昨日の私の記事の中で紹介したCSSプロパティに

height : 100vh;

上記のようなものがありました。
今回はこのプロパティについてです。

この vw や vh とは要素の幅や高さを指定する時に使用する単位です。
viewport width と viewport height の略です。

ビューポートとは何かについては下記のサイトが参考になります。

実践！スマホサイトのviewport設定 – 第1回 viewportとはなにか？｜CodeGrid
https://app.codegrid.net/entry/whats-viewport

ごく簡単に説明すると、ビューポートとは表示領域のことで、PCなどのデスクトップ環境では、ブラウザのウィンドウサイズにあたります。

そのため、例えば要素に

width: 100vw;

上記のように指定すると、このCSSを指定した要素の横幅は、ウィンドウの横幅100%となります。
ウィンドウ横幅 100%＝100vw なので、width: 10vw; と変更すると、要素の横幅はウィンドウ横幅 1/10、つまり10%になります。
高さを指定したいときは、viewport height を使い、例えば height: 100vh; と記述すると、要素の高さはウィンドウの100%になります。

今まで通り、width: 100%; を使ってもいいのですが、これは親要素に対してのパーセンテージになるため、仮に親要素の幅が ウィンドウの50%の幅だった場合は、width: 100%;を指定しても、ウィンドウの横幅 50% にしか広がりません。
その点、vw、vh を使えば、親要素の影響なく、ウィンドウの画面サイズを基準に、幅や高さを指定することができます。

私は主に、スマートフォンの画面デザインの時に、calc() と一緒に下記のように使うことが多かったです。

height: calc(100vh - 100px);

上記のように指定すると、このプロパティを指定した要素の高さは、ブラウザの画面の高さから 100px だけ引いた高さになります。
そのため、わざわざJavaScriptで画面の高さを取得して、そこから 100px 引いて、そしてCSSの高さを再指定して…ということをしなくて済むので、かなりコードがすっきりしました…！

以上、要素の高さや幅を指定するビューポートの単位 vw、vh についてでした。
なお、他にも vmax や vmin というものもあるそうですが…こちらは使ったことがないので、今回は割愛します。
興味のある方は、ご自分で調べてみてください。

著者:村上

【CSS】知らないプロパティがあるかも「「出会えたことに感謝したいCSSベスト3」まとめ」

今回の記事は、「#出会えたことに感謝したいCSSベスト3」というTwitterのタグをまとめたサイトについて。
見ているだけでも、私の知らないCSSプロパティばかりで、かなり参考になりそうだったので紹介します。

サイトへのリンクはこちらから。

「出会えたことに感謝したいCSSベスト3」まとめ（随時更新中）
https://togetter.com/li/1216261

流し読みしているだけでも、知らないプロパティがわんさか出てくるので、かなり勉強になります。
中でも良く挙げられているのが「display: flex;」というプロパティでした。
こちらはこのプロパティを指定した直下の要素が並列になるというものです。
使ったことはないのですが、調べた感じではとても便利そうでしたので、機会があったら是非使ってみたいですね。

あとは、以前紹介した calc プロパティも挙げられていました。
私もこれは凄く便利だと思うので、TOP3の中に入れると思います。

ちなみに、私が挙げるとしたらこんな感じ。

1. calc
2. height: 100vh;
3. transform: translate(-50%, -50%);

calc が 1位なのは譲れませんね。
2位は、高さを画面の 100% にしてくれる vh という単位で、これにはかなり助けられました。
3位の transform: translate(-50%, -50%); は、要素を左右上下中央揃えにしたいときに重宝しています。

当たり前ですが、CSSのプロパティって知らないと使えないので、こんな風に色んな人が「これ良いよ！」と紹介してくれると、知らなかったプロパティに出会えて凄く参考になります。
調べるにも限度があるので…こういうまとめサイトも積極的に目を通してみようかと思います。
興味があれば是非見てみてください！
Webデザイナーさん以外の方でも参考になると思います。

著者:村上

【CSS】アルファベットの大文字・小文字での表示を指定する方法

私の場合は、小文字が強制的に全て大文字になってしまったのがきっかけで調べたプロパティです。

使用するプロパティは「text-transform」です。
こちらは、アルファベットを大文字もしくは小文字で表示するかを指定できます。
指定できる値は下記のとおりです。

私は none を使いましたが、capitalize も便利そうですね。
が、たまに頭文字を大文字にしたくない時もあるので、そういうイレギュラーなときのことも考えると、none を使うのが無難かな。
で、今回すべての文字が大文字になった原因は、恐らく text-transform: uppercase; が body など結構上位の要素の方に指定されていたためだと思われるので、body で !important を使って強制的に上書きしました。
とりあえず、これで解決です。

以上、アルファベットの大文字・小文字での表示を指定する方法でした。
何故か小文字で書いたはずの英単語がすべて大文字になる！という場合は、こちらのプロパティが記述されていないか疑ってみてください。

著者:村上

【CSS】要素に指定したCSSスタイルを解除する方法

今回はCSSを解除する方法について。
複数のCSSファイルを適用しているサイトで、指定した要素に既に別のスタイルが指定されている場合があるかと思います。
で、その既に設定されているCSSスタイルを解除する方法です。

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

CSSのスタイルを解除する – Qiita
https://qiita.com/kijitora-neko/items/155b1bc499a365ea1e3f

スタイル解除に使うのは、initial という値です。
これを、スタイルを解除したいプロパティの値に指定するだけ。

指定方法のサンプルは下記のような感じです。

div {
    display: initial;
}
span {
    text-align: initial;
}

解除方法はたったこれだけです。

ということで、CSSスタイルを解除する方法でした。
!important を使って上書きする方法はありますが、解除は知らなかったので、これはなかなか使えそうです。

が、Internet Explorer 10 では動作しないとのことなので、動作確認は念入りにしてください。
また、プロパティによっては初期値がある場合もあるので、その時は初期値を指定したほうがよさそうです。
状況に応じて、便利に使いましょう。

著者:村上

【CSS】改行された文章で2行目以降の文字の始まりを字下げする方法

タイトルだけだとわかりにくいですが…要するに下の画像のように表示する方法です。

こちらは先日上司に、「これをやりたいんだけど方法を知ってる？」と聞かれて調べたのがきっかけです。
が、その時は既にやり方をご存知だった先輩がお答えしてくださいました。

使うCSSのプロパティは text-indent です。
文章の段落などの一行目のインデント幅を指定する際に使用するプロパティで、負の数を指定することもできます。

で、上の画像のように表示するには、下記のように記述します。

p{
    width: 200px;
    text-indent: -1em;
    padding-left: 1em; 
}

<p>※長い文章を書いたときに、2行目以降の始まりを字下げする方法です。<\p>

上のコードでは、まず text-indent を使って、一行目を左に 1em だけずらしています。
が、このままでは、ブラウザウィンドウの左端にめり込んでしまうため、padding-left プロパティで、p要素全体を 1em 分だけ、右に移動させています。
やっているのはこれだけ！
ちなみに、width は改行させるためにわざと入れているので、字下げには直接関係はありません。

勿論、字下げの幅は変更できますので、例えば【！注意！】のような文字分だけ、少し長めに字下げする、ということも可能です。

質問されるまで、このプロパティを知らなかったのですが…調べるたびに新しいプロパティがポコポコと出てくる感じがします。
全部覚えるのは無理にしても、少なくとも実際に調べて使ったものに関してはきちんと覚えておきたい…！
ちなみに、今のお気に入りは calc() です。
これ凄く便利！

著者:村上

【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 を指定するなど、色々方法はあると思いますので、自分のコードにあった方法をお試しください。