20200914のCSSに関する記事は6件です。

投稿日：2020-09-14T21:02:27+09:00

【初心者でもわかる】ふちに模様がついてるデザインの時、模様の大きさをキープしたまま可変に対応させる方法

どうも7noteです。左右などに模様がついたデザインを作る時のちょっとしたコツについて

今回は以下のようなデザインを作る方法です。

文字の右上と左上に模様が入った場合のデザイン。

まず、1枚の背景画像として画像を設置した場合の書き方はこうなります。
index.html
<h2>ここに見出しが入ります</h2>
style.css
h2 {
 width: 300px;
 text-align: center;
 background: url(sample_bg.png) no-repeat;
}
結果

上手に入れる事ができました。

ではもし横幅がもっと長くなればどうでしょうか。

このように意図しないような広がり方になってしまい、模様が切れてしまいます。
画像の横幅に依存してしまっては表示が崩れてしまうのです。

横幅が可変でかわったとしても崩れないようにする方法

模様の画像を左右それぞれ分けて用意し、CSSを以下のように書き換えてください。
style.css
h2 {
 width: 300px;
 text-align: center;
 background-image: url(sample_bg_left.png),url(sample_bg_right.png);
 background-repeat: no-repeat;
 background-size: 50px 50px;
 background-position: left top, right top;
}
結果



このように横幅が変化しても、模様自体は常に同じ大きさをキープすることができます。

まとめ

背景画像にはカンマ（,）で区切ることで複数画像を指定することができます。これを利用して常に同じ大きさの画像を左上・右上に配置することで横幅に依存することなく可変にも対応することができます。

ちょっとした工夫が他のWEBサイトとの差になるので、このような所にも丁寧さが現れるサイト作りを意識したいものですね。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ

　 Tweet
Qiitaで続きを読む

投稿日：2020-09-14T15:53:31+09:00

画像にマウスオーバーすると背景をグラデーションにしてメニューが出るようにする

Youtubeの動画やfreepikのように、画像にホバーすると画像にオーバレイすると、メニューが出てきて、メニューの背景にはグラデーションが掛かったデザインがありますが、それを実現するサンプルです。

See the Pen QWNxvgW by emesh (@emesh) on CodePen.

定義要件としては、
1.ホバーすると画像がグラデーションになる
2.下にメニューが表示される
3.画像からでもリンクできると言う点が必要でした。

まずグラデーションはHTMLにマスクの要素を用意し、それをCSSで調整するようにしています。画像のリンクはそのままではできないのでよくある要素全体に拡大するコードを使っていますが、そのコードではメニューにも影響を及ぼし、文字が一つの場所に集合してしまうというバグにも影響が及ぼすので下記のコードでpositionをキャンセルさせることにしています。
    figcaption a {
            position: initial !important;
            color: #fff;
        }
参考になりましたらどうぞ。

おまけ

ホバーするとメニューが表示するのではなく常時メニューを表示させたい場合にはこちらを。

See the Pen メニューを常時表示したいとき by emesh (@emesh) on CodePen.

参考サイト

CSSのみで実装できる、画像と相性が良さそうなホバーエフェクト 15
Hover Effect Ideas

　 Tweet
Qiitaで続きを読む

投稿日：2020-09-14T12:57:46+09:00

セレクター・擬似要素・擬似クラスまとめ

CSSセレクター

セレクターにはタグや id・class 以外にも、指定する方法があります。

全称セレクター

すべてのセレクターをまとめて指定したいときは全称セレクターと呼ばれる * を使います。
*{
 color: #000;
}
このように記述すると、すべての要素に対してfont-size:16が設定されます。

複数のセレクター

2つ以上のセレクターを指定したいときは , で区切ることで指定できます。
h1,h2,h3{
 font-weight: bold;
}
子孫セレクター

2つ以上のセレクターを半角スペースで区切ると、下の階層の子孫要素を指定することができます。
ul li a{
 color: #f00;
}
子セレクター

2つ以上のセレクターを > で区切ると、直下の階層の子要素を指定することができます。
ul > li > a{
 color: #00f;
}
※ 子孫セレクターと子セレクターは微妙に指定できる要素が違います。子孫セレクターは親要素の中にある子要素全てに対して指定することができます。子セレクターは親要素の直下の子要素しか指定することができません。

※ CSSでは親子関係になっているセレクターの「子」を指定することはできますが、「親」になっている部分を指定することはできません。

隣接セレクタ

2つ以上のセレクターを + で区切ると、直後にあるセレクターを指定することができます。
p + div{
width: 100px;
}
※直後にあるセレクターを指定することはできますが、直前にあるセレクターを指定することはできません。

擬似クラス

擬似クラスとは、選択されたセレクターが特定の状態を指定するものです。例えばマウスのカーソルが上に乗っているときだけ色が変わるボタンをよく目にすることがありますが、これは擬似クラスの:hoverという状態を指定して記述することができます。擬似クラスは :◯◯ のような形で、◯◯にはその状態が記述されます。

hover

マウスカーソルが上に重なった状態の時を表すのがhoverです。
a:hover{
 color: #f00;
}
linkとvisited

linkは未訪問、visitedは訪問済みのリンクを指定するものです。<a>に指定するもので、何も指定をしていないと未訪問は青、訪問済みは紫になっています。
a:link{
 color: #f00;
}
a:visited{
 color: #0f0;
}
first-child・last-child・nth-child()

兄弟要素の◯番目を指定できる擬似クラス。first-childは一番最初、last-childは一番最後、nth-childは () 内に数字を入れると指定することができます。nth-childに関しては偶数（even）・奇数（odd）・倍数（n）が指定できます。
ul li:nth-child(3){
 color:#0f0;
}
疑似要素

疑似要素は選択したセレクターの特定部分を整形して表示するためのものです。擬似クラスと同じく:◯◯というふうに記述します。
「疑似要素」は「擬似クラス」と区別できるように、「::after」のようにコロン2つで書くこともあります。

first-letter

最初の1文字目を変化させることができる疑似要素です。
p:first-letter{
 color:#ff0;
 font-size:40px;
}
before・after

要素の直前と直後に擬似要素を作成します。プロパティにはcontentというものを用意して、内容を書き込みます。
p:before{
 content: "直前の疑似要素";
 color:#0f0;
}
p:after{
 content: "直前の疑似要素";
 color:#0f0;
}
属性セレクタ

HTMLタグの中には「属性」と呼ばれる部分があります。例えば<img src="hoge.jpg" width="300" height="300" alt="hogehoge">の中の、src="hoge.jpg" width="300" height="300" alt="hogehoge"の部分は属性にあたります。

この属性の部分を指定することができるのが属性セレクタです。例えば<a href="#" target="_blank">というHTMLタグがあったときに、ページの中でtarget="_blank"となっている<a>を指定したいときは以下のように記述します。
a[target="_blank"]{
 color:#f00;
}
このように [ ] で囲って属性を記述すると指定することができます。

参考

この記事は以下の情報を参考にして執筆しました。N予備校

　 Tweet
Qiitaで続きを読む

投稿日：2020-09-14T12:02:00+09:00

SCSSのrandom関数で最小値を設定する

ランダムな値を生成したいけど最小値は設定したい
というときのためのSCSS
// 指定した最小値($min)と最大値($max)の間のランダムな数を返す
// 単位は$unitに指定（px,%,vw,vh,vmax,vmin）
// minMaxRandom(80, 100, 1%)
@function minMaxRandom($min: 1, $max: 100, $unit: 1%) {
 $num: random($max);

 @while ($num/($num * 0 + 1) < $min) {
 $num: random($max);
 }
 @return $num * $unit;
}
使い方

（例）div100個に幅と高さが100pxから200pxのランダムな数値を指定する
@for $i from 1 through 100 {
 div.nth-child(#{$i}) {
 $rondomNum: minMaxRandom(100, 200, 1%);
 width: $rondomNum;
 height: $rondomNum;
 }
}
参考
SCSSでランダムな値を扱う方法

デフォで最小値も設定できたらいいのに。。
と思った次第でした。

おしまい。

　 Tweet
Qiitaで続きを読む

投稿日：2020-09-14T10:30:37+09:00

'rgb[a](R, G, B[, A])' を正規表現で処理して、各値をメンバーとしてもつオブジェクトを返す関数。

たとえば、'rgba(220, 20, 60, 0.5)' を放り込めば
{
 red : 220,
 green: 20,
 blue : 60,
 alpha: 0.5,
}
が返ってくる関数です．

完成コード
TypeScript
rgba.ts
interface RgbaValues {
 red:number,
 green:number,
 blue:number,
 alpha:number
}

const rgbaStrToValues = ( rgba:string ):RgbaValues|void => {
 const realNumPattern = '([+-]?\\d*\\.?\\d+)';
 const rgbaPattern = `rgba?\$` +
 ` *${ realNumPattern } *, *${ realNumPattern } *,` +
 ` *${ realNumPattern } *(?:, *${ realNumPattern } *)?\$`;
 const regexp = new RegExp( rgbaPattern );
 const result = regexp.exec( rgba );
 if ( ! result ) { return; }

 const { 1: red, 2: green, 3: blue, 4: alpha } = result;
 if ( ! ( red && green && blue ) ) { return; }

 const { min, max } = Math;
 return {
 red : max( min( Number( red ), 255 ), 0 ),
 green: max( min( Number( green ), 255 ), 0 ),
 blue : max( min( Number( blue ), 255 ), 0 ),
 alpha: alpha ? max( min( Number( alpha ), 1 ), 0 ) : 1,
 };
};
¹
JavaScript
rgba.js
const rgbaStrToValues = function( rgba ) {
 const realNumPattern = '([+-]?\\d*\\.?\\d+)';
 const rgbaPattern = `rgba?\$` +
 ` *${ realNumPattern } *, *${ realNumPattern } *,` +
 ` *${ realNumPattern } *(?:, *${ realNumPattern } *)?\$`;
 const regexp = new RegExp( rgbaPattern );
 const result = regexp.exec( rgba );
 if ( ! result ) { return; }

 const { 1: red, 2: green, 3: blue, 4: alpha } = result;
 if ( ! ( red && green && blue ) ) { return; }

 const { min, max } = Math;
 return {
 red : max( min( Number( red ), 255 ), 0 ),
 green: max( min( Number( green ), 255 ), 0 ),
 blue : max( min( Number( blue ), 255 ), 0 ),
 alpha: alpha ? max( min( Number( alpha ), 1 ), 0 ) : 1,
 };
};
説明

正規表現

'rgba' もしくは 'rgb' にマッチする正規表現は，/rgba?/ なので，'rgba(*)', 'rgb(*)' の両方にマッチする正規表現は，次のようになります².
/^rgba?$.*$$/
'rgb[a](R, G, B[, A])' の各値は，実数³（0 省略可）の正規表現 /([+-]?\d*\.?\d+)/⁴でマッチさせます. R, G, B は 0～255, A は 0～1 の範囲ですが，ここでは数値の範囲は限定しません．これを加えると次のようになります．
/^rgba?$([+-]?\d*\.?\d+), ([+-]?\d*\.?\d+), ([+-]?\d*\.?\d+), ([+-]?\d*\.?\d+)$$/
A 値はオプショナルなので，(?:)（非格納括弧）で囲って ? を後ろにつけます．また，カンマと括弧の内側⁵にはスペースが 0 以上の任意個数含まれるので，/ */ を /,/ の前後に入れます. 以下で正規表現は完成です．
/^rgba?$ *([+-]?\d*\.?\d+) *, *([+-]?\d*\.?\d+) *, *([+-]?\d*\.?\d+)(?: *, *([+-]?\d*\.?\d+).*)$$/
TypeScript / JavaScript

上の完成コードでは，実数部分だけ一旦 realNumPattern に入れてから結合していますが，1 行が長くなってもいいなら，次のように直接正規表現を記述してコメントを付けたほうが分かりやすいかもしれません（文字列型では \ のエスケープが二重になるのがちょっと鬱陶しい……）．
const rgbaPattern =
 /^rgba?$ *([+-]?\d*\.?\d+) *, *([+-]?\d*\.?\d+) *, *([+-]?\d*\.?\d+)(?: *, *([+-]?\d*\.?\d+).*)$$/g;
 // /[+-]?\d*\.?\d+/ は実数
RegExp.prototype.exec( str )^MDN は，str が正規表現にマッチしなかった場合は null を，マッチした場合は，正規表現の括弧内にマッチした部分文字列が [1], ...[n] に格納されたオブジェクトを返します. なので，rgb に指定した文字列が正規表現にマッチしなかった場合は，if ( ! result ) { return; } で undefined を返すようにしています．

また，TypeScript 4.0.2 の型推論では, この時点で result の [1], [2], [3], [4] の型は string になっていますが，実際には string|undefined のはずなので⁶，一応型ガード的に if ( ! ( red && green && blue ) ) { return; } を入れています⁷．

以上のチェックを通過した場合，red, green, blue を 0～255 の数値型に，alpha を 0～1 の数値型（ undefined の場合は 1 ）に変換した値をオブジェクトに格納して return します．

あとがき

想定使用例としては，

不透明度を半分にした 'rgba(*)' を生成する．

RGBA を HSLA や CMYK などに変換する別の関数に放り込む．

などを考えています．今回はとりあえず 1. の用途で使う予定です．

より簡単そうな方法としては，.replace() で括弧内を取得し，.split(',') で各値に分割するという手も考えられますが，個人的には正規表現で文字列全体をマッチさせたほうが安心感があったので，今回の方法をとってみました．

以上です．

rgbaStrToValues() の戻り値の方は，書かなくても OK（つまり RgbaValues インターフェースも不要）ですが，export rgbaStrToValues() する場合, 書いたほうがいいです（eslint で "@typescript-eslint/explicit-module-boundary-types"^gitHub を有効にしている場合は，警告が出ます）． ↩

document.getCompuotedStyle()[someColorProperty]^MDN の値は（すくなくとも Chrome では）かならず 'rgba(*)' 形式ですが，ElementCSSInlineStyle.style[someColorProperty]^MDN の値は 'rgb(*)'形式の場合があります． ↩

'rgb[a](R, G, B[, A])' の各値が取りうるデータ型は <number> か <percentage> です^MDNが，<percentage> はほとんど見たことがないので，とりあえず無視しています（CSSStyleDeclaration[someColorProperty]^MDN の値も，rgb[a](<number>, <number>, <number>, <number>) 形式です）．なお，rgba 引数に <percentage> を値にもつ rgb[a](R, G, B[, A]) を入れた場合は，regExp にマッチしないため ! result となって，return undefined; となります． ↩

Cf. 数値とマッチする正規表現 - Qiita. ↩

一応括弧の外側にも含みうるので，/ *\(/ として regExp.exec( rgba.trim() ) とすれば，さらに厳密になります． ↩

この問題は，配列一般に当てはまります．Suggestion: option to include undefined in index signatures · Issue #13778 · microsoft/TypeScript をざっと見たかんじ，仕様どおりでとくに変更される予定もなさそうです． ↩

inFinite() を使えば，より厳密に，ちゃんと数字と小数点のみの文字列が取れているか確認できますが，そこまでやる必要はないと思います．似たような処理で，もっと正規表現が複雑な場合は，そこまでチェックしたほうがよさそうですが． ↩

　 Tweet
Qiitaで続きを読む

投稿日：2020-09-14T02:01:18+09:00

pictSPACE店舗説明文の装飾タグ

はじめに

同人専用自家通販サービスの pictSPACEさんで設置できる店舗スペースの説明文に、htmlが使用できるとのことだったので、装飾タグを作成してみました。
ご自由にコピー&ペーストしていただき、オンライン同人イベント参加の際の店舗設営の際にお役立てください。
※店舗の設置方法については pictSPACEさんのサイトをご覧ください。

免責事項

※本記事に記載された内容については、正確性を保証しません。
※本記事の内容を用いたあらゆる結果について、著者はいかなる責任も負いません。記事のコードの使用は自己の判断、責任において行ってください。
※再配布はご遠慮ください。

店舗装飾タグ（全部のせ）

頒布物管理>説明文の部分に以下のソースを入れると画像のようになります。
※改行を入れるとbrタグが挿入されてしまう仕様のため、このようなコードになっています。

一度説明文にこのタグをこのままコピー&ペーストして、不要な部分を削っていくとよいと思います。
(後述の各パーツ対応ソースを参照して、削ってみてください。)

　
<div style=" padding: 0.1em 0.6em; color: #fff; font-weight: bold; background: -moz-linear-gradient(left, #ff5e63, #ff9964); background: -webkit-linear-gradient(left, #ff5e63, #ff9964); background: linear-gradient(to right, #ff5e63, #ff9964); margin-bottom: 0.5em;">New!</div>R-18全年齢
ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト
<a href="ここに通販URL1" target="_blank">某通販</a><a href="ここに通販URL2" target="_blank">Hoge</a><a href="ここに通販URL3" target="_blank">Hoge</a>
各パーツ対応ソース

New!

新刊ではない時は以下を削除してください。
<div style=" padding: 0.1em 0.6em; color: #fff; font-weight: bold; background: -moz-linear-gradient(left, #ff5e63, #ff9964); background: -webkit-linear-gradient(left, #ff5e63, #ff9964); background: linear-gradient(to right, #ff5e63, #ff9964); margin-bottom: 0.5em;">New!</div>
年齢制限

どちらかを削除して使用してください。（全年齢の時は両方削除でもいいかも）
R-18
全年齢
外部通販リンク

それっぽい色味のものを用意しました。
ご自身が使われている通販サイト様に合わせてどうぞ。

ここに通販URL1に通販ページURL
某通販の部分に表示させたい文字を入れてください。
<a href="ここに通販URL1" target="_blank">某通販</a>
ここに通販URL2に通販ページURL
Hogeの部分に表示させたい文字を入れてください。
<a href="ここに通販URL2" target="_blank">Hoge</a>
ここに通販URL3に通販ページURL
Hogeの部分に表示させたい文字を入れてください。
<a href="ここに通販URL3" target="_blank">Hoge</a>
外部通販を使用しない場合

以下を削除してください。
<a href="ここに通販URL1" target="_blank">某通販</a><a href="ここに通販URL2" target="_blank">Hoge</a><a href="ここに通販URL3" target="_blank">Hoge</a>
この記事が少しでもオンラインイベントのお役に立てれば嬉しいです。