<color> - 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 の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
linear-gradient() - 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 の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
HTMLメールをやめるべきという件 | 大阪のWEB制作会社ファーストネットジャパン
普段からビジネスにおいてよくつかわれるメール。 今となってはほんとあたりまえになりました。 わたしがこの仕事をはじめた98年前後はメールでおくってもらえますか？っていうとめんどくさいな・・・電話じゃだめなの？なんて嫌がられたものです。 さてさて、メールを受信する際に意識されているかどうかわかりませんが2通りの形式があるのをご存知でしょうか？ １つは文章だけで構成されるテキスト形式メール もう一つは画像の挿入や文字加工で見た目を整えたHTML形式メール(HTMLメールと呼びます） です。 HTMLメールというのは皆さんもよく受信される画像や文字が装飾されたメールでAmazonや楽天などのメールマガジンなどでよく使われます。。 今回はこのHTMLメールはセキュリティ上やめるべきという内容のお話です。 「テキストメール」と「HTMLメール」の特徴 テキストメールの特徴 テキストメールというのは単
バックエンドエンジニアのためのVue.js、React、Angular入門 - Qiita
WEBシステム、WEBプログラム開発において昨今ではjQueryではなくVue.js、React、AngularなどのJSフレームワークが主流となってきています。ただ、これらの活用は学習コストが高いといわれています。その原因はフロントエンドありきで話が進みすぎていたからだと考えています。したがって、自分の投稿記事は、jQueryを多用するWEBシステムエンジニアに向けた、フォーム操作をメインに置いた半備忘録兼自分なりに解釈した解説です。 ちなみに自分はサーバ構築からバックエンドまでこなしているワンオペエンジニア（フリーランス、非正規雇用に非ず）です。 コンポーネント、ルーティング、スタイル周りの続編を作成しました（編集が困難になるほど容量圧迫してたので、それぞれで独立させています）。また、Vueは3.2から採用されたscript setup、Angularは14から採用されたスタンドアロン
position―スタイルシートリファレンス
positionプロパティは、ボックスの配置方法（基準位置）が、相対位置か絶対位置かを指定する際に使用します。 positionプロパティで指定するのは、配置方法（基準位置）のみです。 実際の表示位置の指定には、 top、 bottom、 left、 rightを併用して、基準位置からの距離を設定する必要があります。 ■値 static 特に配置方法を指定しません。この値のときには、top、bottom、left、rightは適用されません。これが初期値です。 relative 相対位置への配置となります。positionプロパティでstaticを指定した場合に表示される位置が基準位置となります。 absolute 絶対位置への配置となります。親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。親ボックスにpositi
phoenix_live_view v0.4.1 Phoenix.LiveView behaviour 日本語訳 - Qiita
Phoenix.LiveViewは現在なお開発がすすんでおり、本内容が古くなっている可能性があります。おかしいなと思ったら公式ドキュメントを参照してください。 LiveViewを使ってアプリケーションを作りたいのですが、 ドキュメントをかじり読みしていると知識の抜けがあったりで遠回りになってしまうことがあるのでエイヤで https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html を翻訳してみました。 Google翻訳を多用しつつ、自分で読み返して変な日本語はできるだけ修正／意訳しています。 間違いやおかしな点は指摘をお願いします。 LiveViewはリッチでリアルタイムなユーザー体験をサーバーサイドでレンダリングされたHTMLで提供します。 LiveViewのプログラミングモデルは宣言的です。LiveViewにおけるイベントはステー
CSSフレックスボックス(display:flex)の使い方 [無料ホームページ作成クラウドサービス まめわざ]
HTMLのレイアウト方法で最も新しいフレキシブルボックスをまめわざでも利用しています。 手軽に並列レイアウトができるスタイルですが、他の並列レイアウトとの使い分けはどうすべきか、flexにしかできない表現はあるのかを、実例を挙げながら解説します。
![CSSフレックスボックス(display:flex)の使い方 [無料ホームページ作成クラウドサービス まめわざ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/6fd81d279134a62bc4badc391345ceb7051e7ee5/height=288;version=1;width=512/https%3A%2F%2Fmamewaza.com%2Fimg%2F1466995529664s.jpg)
jQuery でセレクトボックスのプルダウン項目（option 要素）を追加／削除する方法
フォームオブジェクトの中でも、セレクトボックスの操作は少し特殊です。記述方法を覚えてしまえば問題ないのですが、同じようなミスをして調べる機会が多いのもセレクトボックスの特徴ではないでしょうか。 jQuery を使えば、様々な需要に合った操作ができるようになります。ここではプルダウン項目の追加・削除について触れますが、基本となるセレクトボックス操作の知識は必要不可欠なので、ぜひ次の記事も一緒に確認していただければと思います。
色々なパターンの点滅するCSSアニメーションサンプル集 | 1 NOTES
文字や要素を点滅するCSSアニメーションのパターン集です。 各点滅アニメーションのサンプルコードは@keyframes（キーフレーム）を使ったanimationを利用しています。 通常点滅パターンシンプルなフラッシュパターンで、1秒間隔で点滅アニメーションさせています。 See the Pen CSS Flash animation 1 by yochans (@yochans) on CodePen. <div class="box"></div>.box { animation: flash 1s linear infinite; width: 50px; height: 50px; background: #0091EA; margin: 20px; } @keyframes flash { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
cheerio-httpcli
cheerio-httpcli - Node.js用WEBスクレイピングモジュール Node.jsでWEBページのスクレイピングを行う際に必要となる文字コードの変換と、cheerioによってパースしたHTMLをjQueryのように操作できるHTTPクライアントモジュールです。 特徴 取得先WEBページの文字コードを自動で判定してHTMLをUTF-8に変換 UTF-8に変換したHTMLをjQueryのように操作可能 フォームの送信やリンクのクリックをエミュレート フォーム送信時のファイルアップロード対応 Node.jsお馴染みのコールバック形式と最近の流行であるプロミス形式どちらにも対応 同期リクエスト対応 $('a')要素のリンク先をファイルとしてダウンロード可能 $('img')要素画像をファイルとしてダウンロード可能(LazyLoad対応) $('a,img,script,link')
マウスカーソルの形状を変える
解説 「cursor」プロパティは、ページ上で表示されるマウスポインタ（カーソル）の種類を変えることができるスタイルシートです。 通常、マウスカーソルは矢印で表示されますが、リンクの上にきたときや入力中のはそれぞれ異なる種類のカーソルが表示されるはずです。 これらカーソルの種類を要素ごとに変えることができます。 値 「cursor」プロパティで指定できるカーソルの種類に割り当てられた値は、以下の表のようになっています。 以下はWindows系のOSのポインタの一例です。 OSやブラウザによって表示されるカーソルの形状は異なります。 値 カーソル形状 ポインタ例
Wikiの記述にHTMLタグを使用したい — Redmine.JP
Redmine 5.0は3つのテキスト書式「Textile」、「Markdown」、「CommonMark Markdown」に対応していますが、このうち Markdown と Textile についてはセキュリティ上の理由からHTMLタグの使用が制限されています。 HTMLタグを使用したい場合のテキスト書式ごとの対応 HTMLタグを使用する方法は現在選択されている「テキスト書式」の設定（「管理」→「設定」→「全般」画面）により異なります。 CommonMark Markdown CommonMark MarkdownではそのままでHTMLタグが使用可能です。特別な対応は不要です。 Markdown 「テキスト書式」の設定（「管理」→「設定」→「全般」画面）を「CommonMark Markdown」に変更してください。Redmine内部で使用されるMarkdownエンジンが Redcar
改行コード(\n)が含まれる文字列をブラウザの表示上で改行表示させる方法 - Qiita
はじめに HTMLタグの要素内容として、改行コードを含む文字列を埋め込んだ場合に改行の見せ方をブラウザ側で調整する方法がわかりました。 vue.jsを使用したプロジェクトなのでVue.jsのコンポーネントを使用していますが、vue.jsとかmustache記法は関係ありません。 困っていること 何もしないと、こんな感じになります。 エラーメッセージとはいえ、美しく表示させたいのでエラーメッセージ毎に改行表示させたい。 JS側のコードになるべくHTMLタグを入れ込みたくない。 実行結果 サンプルコード <template> ... <strong>Error: {{message}}</strong> ... </template> <script> export default { data() { return { message: `User nameは必須項目です。 E-m
tableのcolでCSSのtext-alignが効かない！というどぅーでもいい話
全然、科の話では無いのですが授業ネタ。 最近、AKBの総選挙があって、それをネタにHTMLのtableを練習しよう！というお題をやっていました。で、票のところは数値なので、右寄せにしたいじゃないですか！ で、colgroupを使って右寄せにしようとしても、それは反映されません。これはブラウザの実装の問題ではなく、そもそもtext-alignは指定されたブロック要素の中に在るインライン要素に対する指定で、これがtdやthなら有効なのですが、colやcolgroupはtdやthの親要素ではないという扱いなので、こうなります。table要素も他のブロック要素と違う振る舞いをする面もあり、悩ましいですね。これを何とかしようとすると、右寄せしたいtdにclassを設定して、そのstyleでtext-alignを使うしかありません、縦一列を一元化して指定したくても、出来ません。 colって何のために在
col／colgroup 要素で有効なスタイルと無効なスタイル。
Web 制作のことを中心に、ちょっとした Tips などを掲載しています。「自分用メモ」が基本スタンス。 btmup Blog 「ある列だけを改行なしにしたい」というときが結構あります。 確実なのは「その列のすべての td タグに class を付けていく」という方法ですが、あまりスマートとは言えません。 ソースの見栄え的にもいただけない感じ。 そこで、col や colgroup が使えるんじゃないかと思い、事あるごとに試していました。 が、どうしてもうまくいきません。 col と colgroup の組み合わせ方を変えてみたり、CSS の設定を工夫してみたり、いろいろ試しましたが結果は同じ。 ただ、設定したスタイルの中でも適用されるものと適用されないものがあり、その違いがよく分からないままだったので、どうもしっくりこない状態なのでした。 んで今回も似たような場面に遭遇したので改めて調べ
Is jQuery .text() method XSS safe?
I have unescaped data from users. So is it safe to use like this: var data = '<test>a&f"#</test>'; // example data from ajax response if (typeof(data) === 'string') $('body').text(data); Can I use like this or there is some problems like encoding or some specific symbols that I should be careful and add more strict validation?
もうすぐクリスマスなのでinputとlabelの仲を引き裂いてみた - Qiita
本記事はLIFULLその2 Advent Calendar 2017 17日目の記事になります。 こんにちは。新卒二年目デザイナーのえびといいます。好きな寿司ネタはえんがわです。 主にLIFULL HOME'S新築一戸建てのデザイン・コーディング業務をしています。 最近formを触る機会がありました。 その中でも特に触っていたのがinput・label要素です。 formの中枢を司るinputを影から一生懸命支えるlabel。さながら仲睦まじい夫婦・カップルのようでした。 爆発してほしい。 今回はそんなinputとlabelの関係をお話しつつ破局に導いてみます。 フォームで散見するcheckboxやradioなどのinput要素。 このまま使うと非常にダサイのですが、label要素を使うことによってCSSで自由にデザインできるようになります。 さながら「仕事は出来るけれどちょっとイケてない
「****」でマスクされているパスワードの中身を見せてくれるChrome拡張「Reveal」
ネットサービスで使うIDとパスワードをウェブブラウザに記録させておくと、ログイン時に自分で入力しなくても自動補完してくれるので楽ですが、手動で再入力を求められると困ってしまうもの。Chromeであれば設定の中に「パスワード」の項目があって保存しているパスワードを見られますが、保存数が多いとそれを探すのもまた大変。そんな時に、目の前の入力フォーム内の「****」というマスクを解除し、入力されている内容を見せてくれるChrome拡張機能が「Reveal」です。 Reveal - Chrome ウェブストア https://chrome.google.com/webstore/detail/reveal/coickbnhchmdngjabciaimhdhnbgnpef ブラウザ「Google Chrome」を使って上記URLにアクセスして「Chromeに追加」をクリックします。 「拡張機能を追加
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
sakurachiro.com
.text() | jQuery API Documentation