CSS3 flexを使った配置2(要素の改行) 以前掲載した、flexでシンプルに横に並べるサンプルに続き、子要素の数が多くなった時の応用編です。 まずは共通のスタイルを用意します。 .demo_box{... 2019-07-30 21:50:18
CSS3 flexを使った配置1(横の位置) flexを使ってfloatのような配置を実装します。 CSS3より追加されたflexのサンプルです。 flexという言葉の通りこれがあればレイアウトをうまいことやってくれるのでfloatやmarginで悩むことが減りそうです。... 2019-07-29 21:51:41
JS タップ圧力(感圧)検知 スマホやタブレットなどでは、タップした圧力を検知し、操作するシーンが増えてきました。JavaScriptで圧力を数値化する関数が用意されているので、実装してみました。 画面をグッと押し込むと発動するサンプルです。 このサンプルはスマホやタブレットなどのタップの圧力を検知できる端末で参照してください。 #press... 2019-07-29 21:46:07
GAS HTMLのページを作成する Google Apps Scriptの開発環境にてHTMLのページを作成する基本スクリプトのサンプルです。 index.htmlを表示するには「コード.gs」に以下の記述をします。 [[function doGet() { return HtmlService.createTemplateFromFile("index").... 2019-08-07 22:25:57
AngularJS リピートのフィルターいろいろ 以下のようなAngularJSのリピートの構文を使う場合様々なフィルターが用意されています。 [[<div ng-repeat="item in items | filter : 'あ'"&g... 2019-08-03 12:40:15
AngularJS 構文を表示させない AngularJSを部分的に活用している場合、構文が一瞬表示されることがあります。 それを防ぐためのAngularJSの属性はこちら。 [[<div ng-cloak>{{an... 2019-08-07 22:23:26
smarty 中括弧を使う場合 smartyの構文の中で{}を使う時に使うエスケープの方法。 smartyの関数は {} のような中括弧で書かれるため、中括弧自体を記述するときは、エスケープする必要があります。 複数の行をで中括弧を記述する場合はこちら... 2019-08-07 22:20:47
JS テキストエリア文字挿入 textareaタグ内でカーソルを合わせ、ボタンを押すと特定の文字が入るサンプルです。 テキストの入力で定型文を使うときに、パソコンの予測変換などを使いますが、同じように入力を手助けする機能の一案を紹介します。 挨拶や署名などがよくあり... 2019-07-29 05:33:37
JS URLのハッシュ値をUIに活用する URLの最後に#をつけて文字列をつけるとページ内のIDのまでページ内で移動します。一瞬で移動せずにスクロールとアコーディオンを組み合わせたUIのサンプルです。 ページ内からのリンクはaタグで書くだけ。 クリックすると、アコーディオンで隠れているコンテンツのところまで、スクロールし、コンテンツを表示します。... 2019-08-07 22:06:43
jQuery 画像読み込んでから発火 重い画像を読み込んだ後に表示します。 大きな画像や画質の高い画像は読み込みに若干時間がかかります。 読み込み中にJSが発火してしまうと、画面がガタついたり、予期せぬ動きをしてしまったりしま... 2019-08-07 21:46:57