初めに 業務で、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とすることで改行が反映されます！ ちょっとしたことですが、ブラウザへの表示は意外とハマりやすいので、備忘録として残しておきます。
はじめに こんにちは！ 松本 佑大（まつもと ゆうだい）と申します！ 今回はv-onについてアウトプットしていきます！ v-onとは v-onとはボタンをクリックしたり、スクロールなどのユーザーによる一連の挙動を『イベント』と呼びます。そして、それら様々なイベントに対応して発動させる処理のこと（関数）を『イベントハンドラ』と呼びます。 Vue.jsにおいて、イベントによってイベントハンドラを実行させるには、v-onを使用します。 書き方 今回はボタンclick!を押したら、現在の日時が表示されるプログラムを実行していきます。 HTML <button v-on:click="Onclick"> Click! </button> <p> {{ now }} </p> Vue.js var app = new Vue({ el:'#app', data:{ now='' } methods: { Onclick: function() { this.now = new Date().toLocaleString(); } } }) dataオプションにnowプロパティ（p要素と同じもの）を設置します。 イベントハンドラのメソッドmethodsを定義していきます。内容は、”ボタンをクリックしたらdataのnowに現在時刻を代入する”というふうにします。それが上記になります。 それをp要素 {{now}}とHTMLに記述すれば出力されます。 出力結果が画像のようになります。 ポイントまとめ ・<button v-on:〇〇="〇〇〇">を記述 ・<p>{{〇}}</p>を記述 ・メソッドmethodsを定義し関数の処理を書く。 ・dataに{{〇}}と共通のプロパティを記述する 最後に 今回はv-onについてアウトプットしました。 今回の記事を読んで気になったこと、質問等あればコメント等頂けると幸いです。 今後ともQiitaにてアウトプットしていきます！ 最後までご愛読ありがとうございました！
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;
はじめに DOMにはHTMLを操作するための様々なプロパティが用意されていますが、HTMLテキストの書き換えができるプロパティが複数あり、ややこしかったので違いをまとめます。 具体的には textContent innerText innerHTML outerHTML の4つのプロパティの違いについてまとめます。 使い分け 最初に使い分けをまとめておくと、 HTMLタグを含む文字列を設定したい場合はinnerHTMLあるいはouterHTMLを使う。 単純なテキストを設定したい場合はtextContentを使う。 改行などユーザーがブラウザで見ているのと同じ状態で取得したい場合はinnerTextを使う。 textContent 対象のノードに含まれるテキストを取得・設定できる。 テキストを参照 node.textContent 対象のノードおよびノードの子孫ノードのテキストをすべて連結した値を取得することができる。 テキストを書き換え node.textContent = 'value' ノードの textContent プロパティの値に新しい文字列を設定すると、対象のノードの子孫のノードがすべて削除されたあとに設定した文字列の値を持つテキストノードが追加される。 設定する文字列の中にHTMLのタグなどが含まれていた場合 HTML のタグを含む文字列を設定した場合、タグとしては認識されず単なる文字列として扱われる。 innerText 要素内のレンダリングされたテキストを取得・設定できる。 テキストを参照 htmlElement.innerText 対象の要素および要素の子孫要素のテキストを取得することができる。 空白ノードなどのようにブラウザでは表示されないものは取得されない。 スタイルシートの設定などで非表示になっている要素、 <style> タグのように元々ブラウザに表示されない要素のテキストは取得されない。 また <br> タグで改行が行わている場合は改行された状態でテキストを取得する。 テキストを書き換え htmlElement.innerText = 'value' 要素の innerText プロパティの値に新しい文字列を設定すると、対象の要素の子孫要素のノードがすべて削除されたあとに設定した文字列の値を持つテキストノードが追加される。 設定する文字列の中にHTMLのタグなどが含まれていた場合 HTML のタグを含む文字列を設定した場合、タグとしては認識されず単なる文字列として扱われる。 innerHTML 要素に含まれるHTML文を取得・設定できる。 HTML文を参照 element.innerHTML 要素に子や孫の要素が含まれる場合は、それらの要素の HTML 文も含めて取得する。 HTML 文は HTML ファイルに記述されている内容をそのまま取得する。 HTML文を書き換え element.innerHTML = 'value' 要素の innerHTML プロパティの値に新しい文字列を設定すると、対象の要素の子孫要素のノードがすべて削除されたあとに設定した HTML 文の値が追加される。 新しく追加した HTML 文の中にタグが含まれていた場合にはそのままタグとして扱われる。 HTML文の中にscriptタグが含まれていた場合 innerHTML プロパティには HTML 文を新しい値として設定できるため、 <script> タグが含まれる HTML 文も設定できる。 ただし、innerHTML プロパティを利用して <script> が設定された場合は記述されたスクリプトは実行されない。 outerHTML 要素自身と要素に含まれるHTML文を取得 要素自身も含めたHTML文を参照 element.outerHTML innerHTML では要素に含まれる HTML 文を取得するが、 outerHTML では要素自身も含めて取得する。 要素自身も含めたHTML文を書き換え element.outerHTML = 'value' その他の仕様はinnerHTMLと同様。 参考・引用サイト
