著者:村上
【CSS】知らないプロパティがあるかも「「出会えたことに感謝したいCSSベスト3」まとめ」
今回の記事は、「#出会えたことに感謝したいCSSベスト3」というTwitterのタグをまとめたサイトについて。
見ているだけでも、私の知らないCSSプロパティばかりで、かなり参考になりそうだったので紹介します。
サイトへのリンクはこちらから。
「出会えたことに感謝したいCSSベスト3」まとめ（随時更新中）
https://togetter.com/li/1216261
流し読みしているだけでも、知らないプロパティがわんさか出てくるので、かなり勉強になります。
中でも良く挙げられているのが「display: flex;」というプロパティでした。
こちらはこのプロパティを指定した直下の要素が並列になるというものです。
使ったことはないのですが、調べた感じではとても便利そうでしたので、機会があったら是非使ってみたいですね。
あとは、以前紹介した calc プロパティも挙げられていました。
私もこれは凄く便利だと思うので、TOP3の中に入れると思います。
ちなみに、私が挙げるとしたらこんな感じ。
- calc
- height: 100vh;
- transform: translate(-50%, -50%);
calc が 1位なのは譲れませんね。
2位は、高さを画面の 100% にしてくれる vh という単位で、これにはかなり助けられました。
3位の transform: translate(-50%, -50%); は、要素を左右上下中央揃えにしたいときに重宝しています。
当たり前ですが、CSSのプロパティって知らないと使えないので、こんな風に色んな人が「これ良いよ！」と紹介してくれると、知らなかったプロパティに出会えて凄く参考になります。
調べるにも限度があるので…こういうまとめサイトも積極的に目を通してみようかと思います。
興味があれば是非見てみてください！
Webデザイナーさん以外の方でも参考になると思います。
著者:村上
【CSS】アルファベットの大文字・小文字での表示を指定する方法
私の場合は、小文字が強制的に全て大文字になってしまったのがきっかけで調べたプロパティです。
使用するプロパティは「text-transform」です。
こちらは、アルファベットを大文字もしくは小文字で表示するかを指定できます。
指定できる値は下記のとおりです。
| 値 | 表示される文字の形式 |
| none | 初期値。大文字・小文字は記述した通りに表示されます |
| capitalize | 単語の先頭文字を大文字で表示します |
| lowercase | 全ての文字を小文字で表示します |
| uppercase | 全ての文字を大文字で表示します |
私は 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】iOSで画面を滑らかにスクロールさせる方法
iOSの端末で縦に長い画面をスクロールさせた時に、慣性スクロールが効かず、途中でつっかえるような、ぎこちない動きになってしまったときの対処法です。
と言っても対処法というほど難しいことはなく、そのスクロールする要素に対して -webkit-overflow-scrolling プロパティを適用するだけです。
具体的には下記のとおりです。
<div class="scroll">
<p>スクロールさせたい要素です</p>
// 以下、要素の中身を記述
</div>
.scroll {
height: 300px;
overflow: scroll;
-webkit-overflow-scrolling : touch;
}
重要なのは、4行目の -webkit-overflow-scrolling : touch; です。
これを指定することで、慣性スクロールが有効になります。
この -webkit-overflow-scrolling プロパティは、値に auto もしくは touch を指定します。
なお、デフォルト値は auto で、この場合は慣性スクロールが適用されません。
ということで、iOS で慣性スクロールを適用する方法でした。
この指定があるのとないのでは、実際に使っているときの感覚に大分違いがあるので、スマートフォンでの閲覧が考えられる場合は、記述しておいた方が無難だと思います。
スマートフォンでのスクロールがカクつくと、ここまでなのか！と意外なくらい、ストレスを感じました。
著者:村上
【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 を指定するなど、色々方法はあると思いますので、自分のコードにあった方法をお試しください。
著者:村上
【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」共々、是非参考にしていただければと思います。