sanitize-htmlとは - Qiita
sanitize-htmlとは ユーザーが入力したテキストを安全な形式に変換するライブラリです。ユーザーが入力したテキストをHTMLとして表示する際、セキュリティ上の問題が発生する可能性があります。悪意あるユーザーからのクロスサイトスクリプティング攻撃（XSS攻撃）などです。 sanitize-htmlは不正なタグや属性を削除することができ、脆弱性を減らせます。 XSS攻撃 悪意のあるスクリプトを埋め込み、ページを閲覧しているユーザーのブラウザに実行させる攻撃手法です。入力されたデータを書き換えたり、ブラウザで実行されるスクリプトを埋め込んだりすることで、攻撃します。 例えば、攻撃者が書き込んだコメント欄に悪意のあるスクリプトを埋め込んでおき、Webページを閲覧したユーザーのブラウザがそのスクリプトを実行してしまうと、攻撃者はユーザーのCookie情報を盗み取ることができてしまいます。 s
CSS - list-style-type - とほほのWWW入門
上記の他にも、CSS3 では数多くのタイプが定義されています。 http://www.w3.org/TR/css3-lists/ @counter-style で独自のタイプを定義することも可能です。 @counter-style cjk-heavenly-stem { type: alphabetic; glyphs: '\7532' '\4E59' '\4E19' '\4E01' '\620A' '\5DF1' '\5E9A' '\8F9B' '\58EC' '\7678'; /* '甲' '乙' '丙' '丁' '戊' '己' '庚' '辛' '壬' '癸' */ suffix: '、'; } <h5>none</h5> <ul style="list-style:none"> <li>HTML <li>CSS <li>JavaScript </ul> <h5>disc</h5> <
CSS clip-pathの使い方をジェネレーターを活用しながら覚える
CSSのclip-pathプロパティを使用してクリッピングしたことがなかったのでclip-pathの使い方を覚えることにしました。 CSSのclip-pathの使い方を覚えるにあたってclip-pathのジェネレーターを参考にしながらclip-pathの使い方(主にbasic-shapeの使い方)を覚えました。 初めてCSSでclip-pathの使い方を覚えようとしているclip-path初心者さん向けの内容になるかと思います。 CSSでclip-pathの使い方 CSSのclip-pathを使用すると要素にクリッピング領域を作ることができ、領域の境界から内側を表示して外側を切り抜くことができます。切り抜くことを「クリッピング」と言います。 CSSでクリッピングするclip-pathの使い方は、clip-pathをCSSのプロパティとして記述してclip-pathに使用できる関数と値を記述
CSS clip-pathの使い方をジェネレーターを活用しながら覚える
CSSのclip-pathプロパティを使用してクリッピングしたことがなかったのでclip-pathの使い方を覚えることにしました。 CSSのclip-pathの使い方を覚えるにあたってclip-pathのジェネレーターを参考にしながらclip-pathの使い方(主にbasic-shapeの使い方)を覚えました。 初めてCSSでclip-pathの使い方を覚えようとしているclip-path初心者さん向けの内容になるかと思います。 CSSでclip-pathの使い方 CSSのclip-pathを使用すると要素にクリッピング領域を作ることができ、領域の境界から内側を表示して外側を切り抜くことができます。切り抜くことを「クリッピング」と言います。 CSSでクリッピングするclip-pathの使い方は、clip-pathをCSSのプロパティとして記述してclip-pathに使用できる関数と値を記述
JavaScriptのsort関数の使い方を絶対わかるまで解説する
sort関数で数値の順番で並び替えができる原理まずは以下のサンプルを見てください。このサンプルは配列の中の数字を小さい順に並び替えます。 const numbers = [2, 5, 100, 4]; numbers.sort(function (a, b) { if (a < b) { return -1; } else if (a > b) { return 1; } else { return 0; } }); console.log(numbers); // 結果：[2, 4, 5, 100] こんな感じのコードはいろんな記事で紹介されていますが、僕は最初これを見た時にわからないことがいくつもありました。 まずはこのあたりを見ていきます。 引数にあるa, bって何？→配列の中の要素のうちの1つがa、次の1つがbです。sort関数で数値を比較する際には引数aとbを必ず取ります（名前は
rootのfont-sizeにvwを設定して画面幅によって可変にしたいmixin
はじめに レスポンシブにしたときのfont-sizeどうしていますか？ breakpointをいっぱい切る、vwで良い感じに調整する、clamp使う、良い感じのmixin作る、何もしない、と色々やり方があると思います・・・。 地味にめんどくさかったりするのでmixinを作ったほうが早いですね、きっと。 かつ、remを使いたい。htmlに62.5%つけるあれです。それをvwで設定します。 ※Dart Sass対応。まだ対応していない方は適宜calc()で書き換えて頂けると。 コード /* * htmlのfont-size用 */ @function rootFz($baseWidth: 1280px) { @return math.div(10px, $baseWidth) * 100vw; } /* * font-size可変用 */ @function calcFz($max) { $v
flexboxで横並びにしたコンテンツの中の最後の要素（ボタン等）は下揃えにする方法 - Qiita
どうも7noteです。横並びコンテンツの各要素の最後だけ下揃えにする方法について 先日ツイッターで見つけた画期的なアイデア・スタイルです。正直ちょっと感動しました。 Before After ガタガタになってしまうところをきれいに並べることができます！ ソース <ul> <li> <figure class="thumb"> <img src="sample.png" alt="画像"> </figure> <p class="text">テキストが入ります。テキストが入ります。テキストが入ります。</p> <div class="btn">ボタン</div> </li> <li> <figure class="thumb"> <img src="sample.png" alt="画像"> </figure> <p class="text">テキストが入ります。</p> <div clas
Flexboxで最後の1つだけ右寄せや下寄せにする方法！ | 模写修行メディア
Flexboxで最後の1つだけ右寄せにしたい Flexboxで最後の1つだけ下寄せにしたい このようなケースはサイト制作をしていると結構あります。結論、どちらもmarginとautoを使えば簡単に実装できます。 この記事ではサンプルを用いてFlexboxで右寄せや下寄せにする方法を紹介します。 この記事はお悩み解決系の記事なので、Flexboxに関する理解を深めたい方は下の記事をご覧ください。 Flexboxの使い方をどこよりも詳しく解説！図解やサンプルもあり！ 👇 メンターやってます 👇 模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。
CSSだけで数珠つなぎに無限ループするニュースティッカーを作ってみる
HTMLとCSS <div class="news_ticker1"> <ul> <li>ニュースティッカーのテスト1</li> <li>ニュースティッカーのテスト2</li> <li>ニュースティッカーのテスト3</li> <li>ニュースティッカーのテスト4</li> <li>ニュースティッカーのテスト5</li> </ul> </div> <style> .news_ticker1 { width:300px; overflow:hidden; white-space:nowrap; border:1px solid red; } @keyframes hscroll { 0% { transform:translateX(300px); } 100% { transform:translateX(-100%); } } .news_ticker1 ul { display:inli
will-changeを使ってなめらかなアニメーションを作成しよう | Tech Blog
animationやtransitionを使ってCSSアニメーションを行った際に、アニメーションがカクついて困った経験はありませんか？そんな時はwill-changeを使うことによって、カクついていたアニメーションをスムーズにすることができます。 この記事ではwill-changeの使う際の実装方法についてご説明します。 will-changeのブラウザサポート状況(2019/3/10時点)Edge、IE以外の主要なブラウザで利用可能です。 will-changeって何してくれるの？will-changeを指定することによって、アニメーションのパフォーマンスを上げる事ができます。 アニメーションするプロパティーをwill-changeで指定することによって、ブラウザは事前にアニメーションの準備を行い、その要素がアニメーションを行うのに最適な状態にします。ただし、will-changeを多用
【JavaScript】スクロールで現れる要素の実装方法（素のJS） - W&M de Asobo
【JavaScript】スクロールで現れる要素の実装方法（素のJS） この記事にはプロモーションが含まれています。 投稿：2023・05・13 更新：2023・07・28 Webページを下にスクロールさせていくと、スクロールが要素に達するタイミングでフワッと要素が現れる…といった動きのあるWebデザインが一時期流行しました。 最近では、スクロールする度に要素が次々と出てくるのがうざったく、ユーザー体験を悪くしてしまうという意見も見られるようになり、以前ほど主流ではなくなりつつあると筆者は感じます。 とは言え、スクロールに合わせて要素を出現させるデザインはまだまだ根強い人気を誇っており、様々なWebサイトで見かけるポピュラーな仕掛けです。 このようなデザインを実装する場合、jQueryなどのライブラリを用いるのが一般的かと思いますが、今回は素のJavaScript(Vanilla JS)で実
flexbox 子・孫 要素の高さを揃える方法
CSSのflexboxは子要素の高さを揃えますが、孫要素の高さは揃えてくれません。 このページでは、子・孫 要素の高さを揃える方法を紹介します。 デモ 子要素の高さを揃える 孫要素の高さを揃える 孫要素の高さを揃える + ボタンを下に設置 複数の孫要素の高さを揃える + ボタンを下に設置（強引） デモ See the Pen flexbox sample by kura (@kuranopen) on CodePen. 子要素の高さを揃える Flexboxを使えば、通常子要素の高さは揃います。 HTML <div class="flex1"> <div class="item"> <p class="text">テキストテキストテキストテキスト</p> </div> <div class="item"> <p class="text">テキストテキストテキストテキストテキストテキストテキス
CSS | filterプロパティは子要素、疑似要素で解除はできない | 1 NOTES
CSSのfilterプロパティは、CSS要素だけでなく画像やSVG、その透過部分を反映してフィルター効果を付けることができる優れものです。 用途の多いフィルターとして「drop-shadow」があります。 filter: drop-shadow(水平方向の距離 垂直方向の距離 影をぼかす大きさ 色);記述例 filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 1));CSSで円を作成した要素にfilterプロパティの「drop-shadow」を追加すると以下のようになります。 See the Pen CSS filter: drop-shadow() by yochans (@yochans) on CodePen. filterプロパティは子要素、疑似要素で解除はできないCSSのデザイン要素に子要素や疑似要素を含めた場合には注意が必要です。 親要素
CSS | filterプロパティは子要素、疑似要素で解除はできない | 1 NOTES
CSSのfilterプロパティは、CSS要素だけでなく画像やSVG、その透過部分を反映してフィルター効果を付けることができる優れものです。 用途の多いフィルターとして「drop-shadow」があります。 filter: drop-shadow(水平方向の距離 垂直方向の距離 影をぼかす大きさ 色);記述例 filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 1));CSSで円を作成した要素にfilterプロパティの「drop-shadow」を追加すると以下のようになります。 See the Pen CSS filter: drop-shadow() by yochans (@yochans) on CodePen. filterプロパティは子要素、疑似要素で解除はできないCSSのデザイン要素に子要素や疑似要素を含めた場合には注意が必要です。 親要素
【コピペ推奨】CSSで作るフローデザインテンプレ12選 - SEOタイムズ
<div class="flow_design01"> <ul class="flow01"> <li> <dl> <dt><span class="icon01">STEP 1</span>お申し込み</dt> <dd>SEOコンテンツ無料相談フォームから調査内容を記入いただき送信をお願いします。</dd> </dl> </li> <li> <dl> <dt><span class="icon01">STEP 2</span>調査</dt> <dd>調査結果をお伝えするため、事前に日程調整のご連絡を差し上げます。</dd> </dl> </li> <li> <dl> <dt><span class="icon01">STEP 3</span>結果報告</dt> <dd>お約束した日時にzoomにて調査結果をお伝えします。</dd> </dl> </li> <
min() - CSS: カスケーディングスタイルシート | MDN
CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
【簡単】 軽量で汎用性抜群のスライダー keen-slider.js
こんにちは、マルオです。 フリーランスのWEBデザイナーです。 これまで数多くのサイト制作をしてきて、 スライダーをjsで実装することがたくさんあります。 ボクは特に今までSlickやSwiperを使うことが多いです。 ここ最近ではとくに柔軟にカスタマイズできるSwiperを使用してます。 理由としては、ここ最近使用する機会が減ってきたjQueryに依存しないことが大きいな要因でした。 Swiperにも満足しているのですが、さらにより良いスライダーのJavaScriptライブラリはないかと探していたら見つけました。 タッチ・スワイプが滑らかなスライダー keen-slider.jsネイティブのタッチ・スワイプ操作に対応しているさまざまなスライダーを実装できるJavaScriptライブラリkeen-slider.js keen-sliderは、Swiper同様jQueryに依存は一切しないし
【HTML/CSS】もっと詳しくclip-path！図形を作ったり画像を切り抜いたりが簡単に！
<div class="circle"></div>.circle { clip-path: circle(30%); background-color: pink; width: 200px; height:200px; }clip-pathの座標clip-pathの座標について頭に入れておきましょう。 座標の原点は左上で、そこから右方向にx軸、下方向にy軸が伸びていきます。 半径100pxの円を描くとします。 clip-path: circle(100px at 0 0);値は「circle(円のサイズ at ポジション)」と数値またはパーセントを用いて指定します。 「circle(100px at 0 0)」とすると、「100pxの円を、中心がleftから0、topから0の位置に配置」となり、下図のようになるため表示されるのは円の右下部分のみになります。 つまり、外側4分の3はクリッ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://www.canva.com/ja_jp/learn/insta-story-kawaii-3rules/
Convert Photoshop Drop Shadows to CSS3 Box and Text Shadows