CSS

【CSS】改行を含む複数行左寄せの文字列を中央寄せにする方法

複数行のテキストを左寄せにレイアウトしながらも、
全体としてはセンタリングしたい場合があります。

全体をdisplay: block;テキスト部分をdisplay: inline-block;としてセンタリングすると実現できます。

<div class="center">
  <p class="txt">
    吾輩は猫である。名前はまだ無い。<br>
    どこで生れたかとんと見当がつかぬ。<br>
    何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
  </p>
</div>
.center {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    display: block;
    border: 1px solid #000;
}

.center .txt {
    text-align: left;
    display: inline-block;
}

参考:https://blog.raizzenet.com/how-to-make-the-text-left-justified-by-centering/

【CSS】ボタンにCSSでアイコンを付ける方法

aタグのみで作成した以下のようなボタンを
CSSのみで装飾する場合、文字のすぐ前や後ろにアイコンなどを付けたい場合があります。

<a href="#" class="icon-btn">ボタン</a>
a.icon-btn {
    display: block;
    color: #fff;
    background: #000;
    text-decoration: none;
    font-size: 16px;
    text-align: center;
    border-radius: 100px;
    padding: 10px;
    margin: 10px auto;
}

a.icon-btn::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url(./img/icon-btn.svg) no-repeat;
    background-size: contain;
    vertical-align: middle;
    margin: -3px 5px 0 0;
}

参考:https://webnetamemo.com/coding/css/201708105449

【CSS】iOSのハンバーガーメニューがスクロールできない場合の修正方法

スマートフォンでハンバーガーメニューのコンテンツ量が多く
スクロールをさせたい場合、positionプロパティとoverflowプロパティを指定することがありますが、
iOSで以下のような設定をしてしまうとハンバーガーメニューのスクロールが効かなくなります。

  • positionプロパティがabsoluteまたはfixed
  • heightプロパティが固定幅(相対値、絶対値)
  • overflowプロパティがスクロール指定(autoやscroll)
  • -webkit-overflow-scrollingプロパティがtouch
  • 同じ要素にpositionプロパティとoverflowプロパティを指定

実際のcssで以下のような記述の場合、正常にスクロール動作しません。

.menu {
    position: fixed;
    top: 0;
    left: 0;
    overflow: auto;
    width: 100%;
    height: 100%;
    -webkit-overflow-scrolling: touch;
}

positionプロパティとoverflowプロパティを別の要素に指定するとスクロール出来るようになります。

/* 位置指定用 */
.menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* スクロール用 */
.menu .inner {
    overflow: auto;
    width: 100%;
    height: 100%;
    -webkit-overflow-scrolling: touch;
}
参考:https://shanabrian.com/web/html-css-js-technics/css-ios-safari-02.php

【CSS】複数の背景画像の設置方法

CSSでひとつのクラスに複数の背景画像を設置することが可能です。
記述は以下のようになります。

background-image: A,B,C;
background-repeat: A,B,C;
background-position: A,B,C;
background-size: A,B,C;

具体的には以下のようになります。

.icon {
    background-image: url(./icon.svg), url(./icon2.svg);
    background-repeat: no-repeat, no-repeat;
    background-position: 0 50%, 100% 50%;
    background-size: 10px, 15px;
}

参考:https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds

【CSS】行末を三点リーダーで省略する

CMSなどでサイトを構築すると、
運用後のコンテンツ量がバラバラになるので、
デザイン崩れを抑えるために行数を設定しておき、溢れた分は三点リーダーなどで
省略しておくのがスマートなのではないかと思っています。

一行版

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

複数行版

最後の2が行数に対応する部分なので、三行であれば3に変更などすると行数を変更できます。

overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;

参考:https://and-ha.com/coding/clamp/

【CSS】効率的なコーディング作業04(セレクタの命名)

以前紹介したGoogleスプレッドシートを使ったclassの命名のための英語化の方法
より効率的にするGoogleスプレッドシートの関数の紹介です。

前回は日本語を英語にするだけのものでしたが、
更に、英語をclassに使いやすいように大文字を小文字に、スペースをハイフンにする関数です。

例:最新記事→New article→new-article

=LOWER(SUBSTITUTE(B2, " ", "-"))

「B2」は元のテキストを含むセルを示しています。
「SUBSTITUTE」関数がスペースをハイフンに置換し、
「LOWER」関数がテキストを小文字に変換します。

スプレッドシートには以下のように記述します。

   A B C
1 ja en
2 最新記事 =IF($A2<>"", GOOGLETRANSLATE($A2,$A$1,B$1),"") =LOWER(SUBSTITUTE(B2, " ", "-"))

【WordPress】VisualStudioCode風の配色(Highlighting Code Blockのカスタマイズ)

以前の記事で紹介しているように
普段のテキストエディタはEmEditorを使っているで
VisualStudioCodeは使っていないのですが、
コードの配色が落ち着いていて玄人っぽさが出るかな?と
このサイトのHighlighting Code Blockでコード表示しているものをVScode風に変えてみました。

以下のCSSを適用テンプレートのCSSなどに追記すると変更されます。
/* VSCode */
.hcb_wrap.hcb_wrap code, .hcb_wrap.hcb_wrap pre { color: #9cdcfe!important; background: #1e1e1e!important;}/* 全体 */
.token.keyword { color: #c586c0!important;}/* 予約語 */
.token.keyword.def { color: #569cd6!important; font-style: initial!important;}/* 予約語def */
.token.string { color: #ce9178!important;}/* 文字列 */
.token.comment { color: #7ba85f!important;}/* コメント */
.token.class-name {color: #38cdae!important;}/* クラス名 */
.token.function { color: #dcdcaa!important;}/* 関数 */
.token.operator, .token.punctuation { color: #c8c8c8!important;}/* 演算子・記号(句読点) */
.token.number { color: #bcd2b0!important;}/* 数字 */
.token.boolean { color: #569cd6!important;}/* ブール */
.token.interpolation .token.punctuation { color: #569cd6!important;}/* リテラル内の記号(句読点) */
.token.builtin { color: #e3e3e3!important; font-style: initial!important;}/* 組み込み */

参考:https://youonly.net/wordpress-highlighting-code-block-vscode/

【CSS】IE11でremを使う場合の注意点(疑似要素でのline-heightバグ)

文字サイズにアクセシビリティを求める場合はremを使うという記事を投稿しました。

2022.06時点で既にシェアは1割未満なのでIEに関するバグはほとんど無視しても良いのかもしれませんが…

場合によってはまだ考慮する場面もあるかもしれませんので
メモとして記事化しておきます。

※Windows10のIE11は2022年6月15日(日本時間6月16日)にサポート終了。2023年2月14日に完全無効化予定(EdgeのIEモードは2029年までサポート予定)

※Windows7(ESU)、Windows8.1、Windows10 LTSC、Windows ServerではIE11が引き続き提供される。(Windows7(ESU)は2023年1月10日有償サポート終了Windows8.1は2023年1月10日延長サポート終了

IE11のrem指定で起きるバグ

IE11では疑似要素(:before、:after)に対して行高(line-height)をremで指定しても正しくレイアウトされないようです。

1行のテキストの場合、
要素の高さ(height)と行高(line-height) を同じ値にして
縦方向の中央寄せ(センタリング)をすることがありますが、これが出来ないということになります。

その他のIE11関連のバグもコチラに紹介されています。
https://kiomiru.co.jp/blog/coding/ie11-bugs/

参考:https://www.webmagazine.kakisiti.co.jp/?p=571
https://www.qbook.jp/column/20220720_1391.html
https://kiomiru.co.jp/blog/coding/ie11-bugs/
https://ja.wikipedia.org/wiki/Internet_Explorer_11

【CSS】文字サイズ62.5%問題(px、em、rem何を使うべきか?)

SNS上で文字サイズ62.5%問題が賑わっているので
内容をまとめてみようと思います。

と言っても、コリスの記事がかなりバランス良く情報がまとまっている内容かな?とは思いますが…
https://coliss.com/articles/build-websites/operation/css/about-pixels-and-accessibility.html

論点を絞って、最後に自分的な結論(今後どう制作していくか)をまとめようと思います。

px、em、rem何を使うべきか?

emやremのように相対的なサイズ指定がベストではあるものの、
最近のブラウザではズーム機能なども最適化されてきているので、px指定でもそこまで問題は大きくなく、アクセシビリティにどこまでコストを割くかという部分で決めれば良いのではないかと思います。

ちなみに以前制作を担当した案件では

p {
    font-size: 16px ;
    font-size: 1rem ;
}

というようにrem優先、px補助…というような位置づけで併記した記述をするレギュレーションになっていました。
これなら各要素を見ただけでも1rem=16pxになっているんだな、と分かり他人が保守する際も分かりやすいかもしれません。

文字サイズを62.5%指定するのは辞めるべきなのか?

これは元々remなど相対的なサイズを扱いやすくするための裏技的なハックなので
辞めるべきなのだろうと思いますが…

デフォルトの1rem=16pxを変更してしまうもので、サードパーティー製のフレームワークなど1remを16pxのまま扱っているものと混合して使う場合、不具合が生じる場合があることもあるようですが、使わない場合、影響は限定的なのかもしれません。

視覚障害者の方など、ブラウザの設定で文字のデフォルトサイズ(スケーリング)を変更している場合、基本サイズ(1rem)を32pxにしていても、20pxでの表示になってしまい
2/3のサイズで表示されることになってしまうなどユーザーの意図しない表示結果になってしまいますが、

こちらも以下のように
htmlにフォントサイズ62.5%にして、bodyに1.6remすることでブラウザ設定の文字サイズの問題は回避できそうです。

html {
    font-size: 62.5%;
}

body {
    font-size: 1.6rem;
}

先に紹介したpxとremの併記で(他人が見た際の)メンテナンス性を担保することも可能です。

p {
    font-size: 16px ;
    font-size: 1.6rem ;
}

62.5%ハックを使わない方法:CSS変数を使用する

62.5%ハックを使わない方法としては、CSSの問題はCSSで解決したほうがいいと思うので、
CSS変数を使ったコリスの解決方法が最もスマートな方法ではないかと思います。
(もともとSass環境で開発しているなどの場合は、そちらで解決しても良いかも。)

html {
  --10px: 0.625rem;
  --11px: 0.6875rem;
  --12px: 0.75rem;
  --13px: 0.8125rem;
  --14px: 0.875rem;
  --15px: 0.9375rem;
  --16px: 1rem;
  --17px: 1.0625rem;
  --18px: 1.125rem;
  --19px: 1.1875rem;
  --20px: 1.25rem;
  --21px: 1.3125rem;
  --22px: 1.375rem;
  --23px: 1.4375rem;
  --24px: 1.5rem;
}
p {
  font-size: var(--16px);
}

自分的結論

現時点(2023.01)での私個人の結論としては、

・アクセシビリティへの大きな配慮などが必要な場合は62.5%を使ってrem
・デザイン性を優先する場合はpx

サードパーティー製のフレームワークともともと混合して使う場合や、将来的に混合しそう(WordPressベースでサイトを構築しているなど)な場合は、CSS変数を使うなど、適宜使い分けるのが良いかもしれません。

これだとやや結論としては弱いので私個人としては

・基本はpx
・アクセシビリティ対応が必要な場合は62.5%+rem(別途見積として料金を載せる)

で今後制作していこうかな?と思います。(アクセシビリティ対応が必要ということは、簡易的にでもレギュレーションが必要ということかな…と。)

参考:https://coliss.com/articles/build-websites/operation/css/about-pixels-and-accessibility.html
https://zenn.dev/tak_dcxi/articles/26280e7607bcd2

【CSS】テーブルのセルの幅を均等にする(width: 1%;)

テーブルのセルの幅を均等にしたい場合があります。

少し裏技的な設定方法にはなりますが、
tdwidth: 1%;を設定すると横幅が均等になります。

td {
    width: 1 % ;
}

こちらのページの表に適用しています。

均等ではないほうがキレイに表示される場合もあるので、このサイトではtableタグにclass="equality"を付けたときだけ横幅が均等になるように設定しています。

数字など文字列が長くなる場合は、こちらの「URLなど長い半角英数字の折り返し表示」のページを参考に以下のように改行設定を加えても良いかもしれません。

td {
    width: 1 %;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

参考:https://csshtml.work/td-width-equal/

【CSS】float卒業(flexboxへの移行)

flexboxのCSSをGUIベースで生成できるWebサービス

https://suiq.jp/flex-layout-generator/

最近は、チートシートを見ながら
なるべくfloatは使わないようにし始めたけど
長年floatで組んできたから、まだまだ脳みそがfloat脳になってる…

チートシートは今のところ
Webクリエイターボックスさんのを使っています。
メルマガ登録が必要だけど、コンパクトにまとまっていて分かりやすいかな。

チートシートやWebサービス使いながら
そろそろ卒業しなければ…

参考:https://www.yuukidesign.com/2022/07/139/
https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet

【CSS】URLなど長い半角英数字の折り返し表示

URLなど長い半角英数字があると
コンテンツの表示領域を超えてしまって表示が崩れてしまうことがあります。

特にスマホでの表示ではコンテンツ部分が縮小されてしまったりと
問題も大きいです。

URLなど長い半角英数字を折り返し表示することで
デザインの崩れを防ぎます。

以下のCSSを適用することでデザイン崩れを防げます。

word-wrap: break-word;
overflow-wrap: break-word;

overflow-wrapプロパティはCSS3で定義された新しいプロパティ名です。

word-wrapは従来からあるプロパティ名です。
(もともとIE独自のプロパティで、現在もIE・EdgeやFirefoxはword-wrapのみ認識)

リセットCSSや共通CSSに最初から記述しておくと便利かもしれません。
2023.01.06 リセットCSSに追加

参考:https://allabout.co.jp/gm/gc/463542/
https://accelboon.com/tn/css-半角英数の連続文字が折り返すようにする/

【CSS】色の透明度の指定(3パターン):opacity、RGBA、HEX(16進数)

CSSで色の透明度の指定は3パターンあります。
opacityとRGBAが有名ですが、その他にも通常のHEX(16進数)でも指定できます。

/* opacity */
.colorA{
    background-color: #000; /* rgb(0,0,0);も可 */
    opacity: 0.8;
}

/* RGBA */
.colorB{
    background-color: rgba(0,0,0,0.8);
}

/* HEX(16進数) */
.colorC{
    background-color: #000000CC;
}

opacityは背景色だけでなく指定セレクタ内に文字など他の要素があると、全て透明になってしまうので注意が必要です。

HEX(16進数)はよく使われる6桁#000000の末尾に透明度を16進数を2桁追加する8桁にする#000000CCという色指定なので、便利な一方、透明度を16進数で指定しなければならないため扱いにクセがあります。

透明度5%刻みの場合の16進数は以下のようになります。

不透明度(%) 16進数
100 FF
95 F2
90 E6
85 D9
80 CC
75 BF
70 B3
65 A6
60 99
55 8C
50 80
45 73
40 66
35 59
30 4D
25 40
20 33
15 26
10 1A
5 0D
0 00

参考:https://toriton.link/coding/opacity_colorcode/
https://totolog34.com/444/

【CSS】リセット用スタイルシート

各ブラウザごとにデフォルトの設定が異なり、
同じHTMLでも微妙に異なる表示となるため、仕事としてコーディングする場合、リセット用のCSSを一番最初に読み込むのが最近は定番になっています。

リセット用CSSもどこまでリセットするかなど様々な考え方もあり
世界中に無数のリセット用CSSが公開されています。

私は、YUI LibraryのCSS Resetをベースに自分なりにカスタマイズした下記のものを標準的に使っています。

YUIのリセット用CSSの一番大きな特徴はH1、H2など見出しタグも全て同じ文字装飾にリセットしている点です。

@charset "utf-8";
/*reset*/

html {
    color: #000;
    background: #fff;
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
    margin: 0;
    padding: 0;
    line-height: 1.5;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    font-size: inherit;
    font: 100%;
}

fieldset,
img {
    border: 0;
}

img {
    vertical-align: bottom;
}

address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
    font-style: normal;
    font-weight: 400;
}

ol,
ul {
    list-style: none;
}

li {
    list-style-type: none;
}

caption,
th {
    text-align: left;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 100%;
    font-weight: 400;
}

q:before,
q:after {
    content: '';
}

abbr,
acronym {
    border: 0;
    font-variant: normal;
}

sup {
    vertical-align: text-top;
    font-size: smaller;
}

sub {
    vertical-align: text-bottom;
}

input,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    *font-size: 100%;
}

legend {
    color: #333;
}

body {
    font: 12px "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "MS Pゴシック", "MS PGothic", "Lucida Grande", sans-serif;
    letter-spacing: .2em;
    font-feature-settings: "palt";
}

.mincho {
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "MS PMincho", "Times New Roman", Times, "HG明朝B", "MS 明朝", serif;
}

#container {
    overflow: hidden;
}

input[type=submit] {
    -webkit-appearance: none;
}

*:after {
    display: block;
    clear: both;
}

.cf {
    zoom: 1;
}

.cf:after {
    content: "";
}

@media (max-width:767px) {
    img {
        max-width: 100%;
        height: auto;
    }
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    -o-box-sizing: border-box;
}

body {
    -webkit-text-size-adjust: 100%;
}

input,
textarea,
select {
    font-size: 16px
}
/*common*/

a {
    transition: all 0.3s linear;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

a:link,
a:visited {
    text-decoration: none;
    color: #666;
}

a:hover {
    text-decoration: none;
    color: #999;
}

button {
    background: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    appearance: none;
}

.cfはフロートをクリアするためのショートコードなので
floatではなく完全にflexboxでコーディングする場合、不要です。

フォントの指定も游ゴシックや游明朝も入れていますが、クセ(コーディング上の)も強いので場合によっては削除しても良いかもしれません。

#container {
overflow: hidden;
}

で、特にスマホで横ブレなど起きないように設定しています。

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-o-box-sizing: border-box;
}

でpaddingやborderなどBOXの横幅に影響するものは全て「込み」で表示されるように指定しwidthの横幅指定からはみ出さないようにしています。

一部色指定なども入れているので、コーディングするデザインに合わせて一部改変して使っています。

2023.01.06 URLなど長い半角英数字をリンク内で折り返すようにCSS追加

HTMLテンプレートはこちら

【CSS】効率的なコーディング作業03(セレクタ用の英語化)

CSSを書く際、セレクタの命名に時間がかかってしまう場合が
多くあります。

その原因のひとつに、セレクタに日本語が使えないからということもあるかと思います。
(日本語をローマ字に置き換えて…ということは可能ですが。)

そんなときはGoogleスプレッドシート
自動翻訳機能で英語化すると便利です。

一行目にそれぞれ訳したい言語を記入します。
今回は「日本語を英語に翻訳」なので、それぞれjaenを記入します。

二行目以降は…
各要素をdivで囲ったBOXの内容を要約し
A列に日本語を記入していきます。

英語を表示したいセル(B列)に下記のように
=IF($A2<>"", GOOGLETRANSLATE($A2,$A$1,B$1),"")を記述します。

   A B
1 ja en
2 最新ニュース =IF($A2<>"", GOOGLETRANSLATE($A2,$A$1,B$1),"")

if文の最後のほう$A$1ja$B$1enを指していて、
A2(最新ニュース)をja(日本語)からen(英語)に
訳しなさい…という指定になっています。

一行作成しておけば、2行目3行目はコピペで日本語の部分だけ
変更していけば、自動で英語に翻訳していってくれます。

【CSS】効率的なコーディング作業02(CSSの圧縮と整形)

CSSを手打ちで書いていくと、癖や非効率な記述や記述揺れなども多く発生します。
そのままでもブラウザでの表示には問題ありませんが、
少しでもコードをキレイにしておきたいものです。

CSSの圧縮や整形を活用することで、
効率的にコードを一定の状態に保てます。

エディターの標準機能や拡張機能などでも実現できますが、
Webサービスで簡単に出来るもの。

探すといくつかありますが、
以下のものが使いやすいと思います。

■CSSの圧縮
https://syncer.jp/css-minifier

■CSSの整形
https://lab.syncer.jp/Tool/CSS-PrettyPrint/

圧縮は全コードを一括ではなく、
ブロックごとにコピペを繰り返していくとメンテナンス性を保つことが出来ます。

整形は全てをまとめてコピペで大丈夫です。

効率的なコーディング作業01(CSSのアウトライン生成)
生成したCSSだと使わない空のセレクタもあるので、これも削除せずそのまま整形すると

div {
}

div {}

こうなるので{}をエディターで検索して
空の行を削除していくと不要なコードを除けます。

【CSS】効率的なコーディング作業01(CSSのアウトライン生成)

HTMLを記述して、そのコードを下記のサイトにコピー&ペーストして
CSSのアウトラインを生成することができます。

OneClickCSS

私の場合は「Childrens CSS」を使います。
下記のHTMLを貼り付け「Childrens CSS」ボタンをクリック。

<div class="box">
  <img src="./photo.jpg" alt="test photo" class="photo">
  <p class="txt">text sample text sample</p>
  <p class="cmt">comment sample comment sample</p>
</div>

下記のようなCSSが生成されます。

div.box {
}
div.box img.photo {
}
div.box p.txt {
}
div.box p.cmt {
}

エディターでdivを削除していくと余分なコードを省けます。

.box {
}
.box img.photo {
}
.box p.txt {
}
.box p.cmt {
}

場合によってはimgpも削除しても良いです。
(残しておいたほうがHTMLの構造が分かりやすい場合もあります。)

セレクタの命名にdivを含めない(例:diveやdivingなど)ようにしておくと、divを一斉置換で削除でき、より効率的なコーディング作業が実現できます。