初めに 業務で、iOSとAndroidのプッシュ通知をHTML/CSSで作ることになりました。 プッシュ通知をHTML/CSS作っている人がいなかったので、 自分で作ってみました。 Codepenを使用して、作成しています。 画面に埋め込むタイプだと、サイズが小さいので Codepenのサイトで、触ってください。 iOS版　プッシュ通知 Android版　プッシュ通知 最後に 色々、触ってみてください。 改良点などあれば、ぜひ教えてください。

はじめに 　formタグの中にtextareaタグを作成して文章を投稿したい時に、改行させて入力することもあります。そのままデータベースに保存→データを取得して表示すると、なんと改行が消えてしまっています。 　今回はこれを解消しようと思います。 CSSを使った方法 　改行は消えてしまっていますが、そこにはちゃんとHTMLエンティティという特殊な文字で改行の情報が保存されています。 　CSSを使って、改行させることができます。 style.css .comment { white-space: pre-wrap; } white-spaceは、CSSのプロパティで、要素内のホワイトスペースをどう扱うかを決めるプロパティです。 pre-wrapとすることで改行が反映されます！ ちょっとしたことですが、ブラウザへの表示は意外とハマりやすいので、備忘録として残しておきます。

list-style-type: ; list-style-type（リスト・スタイル・タイプ） 種別：プロパティ 役割：HTMLにあるリストの種類を設定。リストの箇条書きの記号を決めることが出来る。 設定できるリストの記号は↓ 記号なし``` 使用例：list-style-type:none; ```disc: ●つまり黒丸がつく``` 使用例：list-style-type:disc; ```circle:○。つまり白丸``` 使用例：list-style-type:circle; ```square(意味は死角): ■がつく``` 使用例：list-style-type:square;

先日、コリスで紹介されたcssプロパティのaspect-ratio（ie11以外のモダンブラウザで利用可）に感動して、ie11がお亡くなりになってから利用できる他のcss周辺技術が気になり調査してみた。 aspect-ratio 下記のように記述するだけで、縦横比が16:9のレイアウトが作成可能 width: 100%; aspect-ratio: 16 / 9; aspect-ratioを利用しない場合は、以下のように、beforeにpadding-top: 56.25%;を指定し、親や子の要素にpositionを設定するという面倒な対応をしないといけない .parent { position: relative; width: 100%; &:before { content: ''; display: block; padding-top: 56.25%; /* 16 : 9 */ } .child { position: absolute; top: 0; left: 0; } } min(), max(), clamp() 便利css関数 例えば以下のようなコードをminを利用すると1行で置換可能 追記：minとmaxの認識が逆になっていました。。申し訳ありません。 ↓この様な認識が正しいですね。 min('基本幅', '最大幅') max('基本幅', '最小幅') 以下のコメントも修正しております。 minは最大幅を、maxは最小幅を第2引数で指定します。わかりにくいですね。 width: 50%; max-width: 500px; ↓ width: min(50%, 500px); /* 第2引数がmax-widthの値 */ 同じ様に、maxを利用すると、下記のように置換可能 width: 100%; min-width: 1280px; ↓ width: max(100%, 1280px); /* 第2引数がmin-widthの値 */ min と max を合体させたようなものがclamp width: clamp(500px, 100%, 1280px); /* min-width, width, max-widthを1行で指定可能 */ object-fit 画像の縦横比を要素に併せて伸縮する指定。ブラウザ幅を拡縮しても維持可能 これがあると、imgタグのwidthやheightの調整がかなり楽。 object-fit: cover;が特に良い。 See the Pen CSS object-fit by Dudley Storey (@dudleystorey) on CodePen. ↓参考リンク https://webdesignday.jp/inspiration/technique/css/7976/ mix-blend-mode 要素の重ねた時の見え方を指定するプロパティ https://ics.media/entry/7258/ 驚くべきなのは、mix-blend-mode: multiply; 白背景の画像を透過可能 See the Pen jpg-LOGO mix-blend-mode multiply by Kobayashi (@Pulp_Kobayashi) on CodePen. backdrop-filter 画像に対して、ぼかしやグレースケール等といったフィルターをcssで実装可能 See the Pen Image filter backdrop-filter by Kobayashi (@Pulp_Kobayashi) on CodePen. clip-path 要素の形状を自由に変形させる事が可能 See the Pen clip-path examples by Chris Coyier (@chriscoyier) on CodePen. clip-pathの各種図形の参考 https://bennettfeely.com/clippy/ scroll-snap-type, scroll-snap-align cssだけでカルーセルを実装可能なcssプロパティ overflow-x: scroll; よりもスライドした時にしっかり要素で止まる感じがいい See the Pen CSS Carousel by Kobayashi (@Pulp_Kobayashi) on CodePen. .wrap { scroll-snap-type: x mandatory; white-space: nowrap; overflow-x: auto; } .item { scroll-snap-align: center; display: inline-block; width: 40%; white-space: normal; } display: grid; 基本的な使い方としては、格子状のレイアウトが組む事が可能 上下中央表示。display: flex;だと3行必要 display: grid; place-items: center; position: absoluteが必要な要素を重ねるレイアウトもdisplay: gridがあれば、実現可能 See the Pen Less absolute - Card by Ahmad Shadeed (@shadeed) on CodePen. position: sticky; jsのscroll系ライブラリを利用しないと実装できないようなスクロール後に吸着する様な実装が可能 See the Pen Heading Follow position sticky by Kobayashi (@Pulp_Kobayashi) on CodePen. calc()内でvwが利用できる レスポンシブで、width: calc(100vw - 30px); のような実装をした時に、 ie11のみで意味不明な挙動をしたけれどもie11がお亡くなりになったら思う存分calcを利用可能 参考 CSSのaspect-ratioプロパティがすべてのブラウザにサポートされました、画像をアスペクト比で実装する今までとこれからの実装方法 https://coliss.com/articles/build-websites/operation/css/css-ways-to-create-fixed-aspect-ratio.html CSSの比較関数が便利すぎる！min(), max(), clamp()の使い方を詳しく解説 https://coliss.com/articles/build-websites/operation/css/css-about-min-max-clamp.html IE終了後にWeb制作の現場で使えるHTML&CSSコード14選！おさえておきたいコードを集めてみた https://pulpxstyle.com/ie-not-supported-css/

px→vw変換 スタイルシートで関数を用いる場合、例えば「 pxを vw に置き換えたい」と思った場合 vw は気軽に計算できないので、下記のような変換の関数を用いる。 @function vw($size, $viewport:375) { $rate: 100 / $viewport; @return $rate * $size * 1vw; } viewport: 375px（iPhone） を基準に変換しています。 これを使ってサイズを指定する場合、こうなります。 border: 1px solid #ff0000; ↓ border: vw(1) solid #ff0000; もしもデザインがAndroid基準で作ってる場合 下記のように記述する。 border: 1px solid #ff0000; ↓ border: vw(1, 360) solid #ff0000; しかし、今まで作ったcssをいちいち消して書いてするのは、とても面倒です。 px 消して)を書いて、カーソルを移動してpx(を書いて、とやるのは大変。 そんな事を数字全部にやってたら日が暮れます。 正規表現で置換 正規表現で4回置換をかけます。 ([0-9]…数字{4}…文字数)px　これで「1234px」的な感じの文字列が置き換える対象になります。 vw($1)…$1 は、上の置き換える対象の中で()で囲んだ文字を指しています。1234という数字を残せます。 ([0-9]{4})px vw($1) width: 1000px; →width: vw(1000); ([0-9]{3})px vw($1) width: 375px; →width: vw(375); ([0-9]{2})px vw($1) font-size: 16px; →font-size: vw(16); ([0-9]{1})px vw($1) border: 1px solid #ff0000; →border: vw(1) solid #ff0000; 注意 4桁→3桁→2桁→1桁の順にやらないとおかしくなります。 マイナスの数値には対応していないので、スタイルにマイナスを多用している場合は、 マイナスを先に置き換えてあげたほうが良いです。（例） (-[0-9]{4})px vw($1)