modal, modalessウィンドウをjQuery UIなしで実装

HTML JavaScript CSS

code JS CSS HTML 使い方 jQuery UIを使わずにmodalを表示するロジックをメモ書きします。 ※modal, modalessウィンドウのサイズやカラーは適当 code JS // modal var modalWindow = (function() { return { open: function(modal) { var $cover = $("div.cov…

2017-01-08

jQuery、JSまわりでよく起こすであろうバグをざっくりと。

HTML JavaScript

バグの温床 data, attr, propでのデータ取得(get)/更新(set) $(this)の中身 id読み込み時の挙動 true/falseの空判定 null.~~ find, closest等による要素取得自由度が高いからと言って好き放題やらない他の酷い例焦ったり急いでコーディングしてると忘れが…

2016-12-22

AWSでのサービス制作(申し込みフォーム) - AWS Lambda/API Gateway/S3/DynamoDB/SES/CloudFront/ACM/Route 53

AWS Python HTML JavaScript

概要 IAM Role準備ユーザー作成グループ作成 IAM Roleでログイン独自ドメイン取得/SSL準備 API形だけ作成実データ配置(S3) S3へのPOSTアクセスキャッシュコントロールテーブル用意 Lambda関数作成 Configure triggers Configure function Lambda funct…

2016-11-14

wordpressでそれっぽい企業用サイトを作るために

WordPress CSS HTML

初期状態見た目の修正コメント欄を消すサイドバーを検索欄以外全て消すタイトルを消すフッターを修正するナビゲーションバーの配置お問い合わせフォームデザインの追加(style.css) 画像フォルダ整理ちょっとしたレスポンシブデザインに。設定の修…

2016-11-03

CSSデザイン比較その2 - float/position

CSS HTML

表示結果 no float code HTML CSS 総括引き続きCSSの比較。今回はちょっと変わって、要素の左右寄せの話。有名なサイトでChromeで要素を検証、とかするとよくfloat: leftとかclear: bothとか目にすると思います。 floatは画像の左右にテキスト回り込みをさ…

2016-11-02

CSSデザイン比較その1 - box-shadow

CSS HTML

これは、デザイン追加時に「あれどうなるんだっけ？」って思う微妙なデザインを分かりやすく、視覚的に比較する(微妙に韻を踏んでる)シリーズです。いちいち使い方とか結果をググるのも面倒だし、他で使われてるのを見ても効果が分かりづらかったりしますか…

2016-09-24

BackboneJS, AngularJS無しで外部HTML読み込みするコード

HTML JavaScript Rails

どうも。 HTMLの一部を動的に書き換える方法としてはappendやbefore, ajaxなどといった手段があります。HTMLを動的に書き換えるのには、BackboneJSとAngularJSを使った書き換え方法もあります。でも新たにライブラリを習得するのも面倒なのでもっと簡単にや…

2016-09-05

【CSS, JavaScript】ちょっとしたネタや知ってると便利な知識

HTML CSS JavaScript

どうも。知っておくことでちょっとした落とし穴を回避出来そうな知識と少しだけ便利なテクニックをば。 divの中身を敷き詰める JSのイベント発火イベントを登録してそれを発火させるとき、普通はクリックしたら～とかマウスオーバーしたら～という条件で発…

2016-09-03

JSっぽい挙動をCSSだけで表現 - チェックボックス、ラジオボタン

HTML CSS

HTMLとCSSのみで便利な挙動と見た目を作ってみました。比較的よく使うフォームの一部をCSSで装飾してやることによって、よりスタイリッシュさを出します。大事なことは、JSを一切利用していないこと。つまり、バグで動作しないリスクがないということです。…

2016-08-30

html動的編集後の要素にイベント追加するには

HTML JavaScript

どうも。 JavaScript(以降JS)でappend, prepend, after, before等でhtml要素を動的に追加/削除した場合に、その変更後要素に対してイベントを追加する時に困ることがあると思います。ajaxなんかもそうですね。コード上はどう考えても動くはずなのに、どうな…

2016-05-26

JS, CSSでクリックしてラベル選択を書いてみた

HTML JavaScript CSS コーディング

どうも。 UIの一つとして使える、クリックしてラベル付けをする挙動をJS, CSSを用いて実装してみました。jQueryで書いててネイティブに起こすのは大変なのではてぶ上では実装してませんが、codepenとかですぐ試せるはずなのでお試しあれ。 HTML <div class="wrapper"> <div class="contents"> <div class="panel_area" id="panel_upper"><ul class="proposed"></ul></div> <div id="panel_lower"> <ul class="proposed"> <li></li></ul></div></div></div>