フロントエンド

フロントエンド

Create React Appで作成したアプリをgithubで公開する【npm gh-pages】

React.jsを学習してそのアウトプットとして簡単なWEBアプリを作ってサクッと公開したい。まずReactチュートリアルをやってみました。create-react-appというコマンドを利用してとても簡単にローカル環境ができて感動しまし...
フロントエンド

【CSS】ガターが均一なカードレイアウト(レスポンシブ対応)実装例

display: flexを利用してレスポンシブ対応のカードレイアウトを作りました。アイテムの横幅、縦幅、アイテム間の余白(ガター)がいずれも相対指定のため、どんなウィンドウサイズでもバランスを崩すことのないレイアウトです。 ...
フロントエンド

jQuery UIのAutocompleteで入力補完(サジェスト)を実装

入力値にマッチした項目が表示され、入力候補を選択するとテキストフィールドに反映される入力補完(サジェスト)を実装する方法をご紹介します。jsライブラリであるjQuery UIのAutocompleteを利用します。 See t...
フロントエンド

【javaScript】for…in、for…of、forEachの違いと用途

ループの方法が多すぎるし、それぞれちょっとずつ違いがあって全然覚えられないためまとめておきます。 for...in ・列挙可能であればなんでもループできる・順不同であることに注意・オブジェクトのループ専用として利用した方が良い...
フロントエンド

javaScriptのオブジェクト指向(ES6)

ES6のオブジェクト指向の基礎的なところをまとめました。 クラスの定義、インスタンスの生成 Norimonoクラスを定義します。Norimonoクラスは定員を表すcapacityプロパティを持っています。 class N...
フロントエンド

javaScriptのオブジェクト指向(ES6より前の旧構文)

javaScriptのクラスの構文はES6から大きく変わって便利になりました。ES6の構文だけ覚えたいところですが、旧構文から覚えることでjavaScriptならではのプロトタイプベースのオブジェクト指向の理解が深まります。本記事ではES...
フロントエンド

CSSセレクタを活用してDOM操作をもっと快適にする

jQueryでDOM操作をするときに知っていると快適になるCSSセレクタ8選。論理和、論理積、子孫セレクタ、子セレクタ、属性セレクタ、N番目系(first-child、last-child、nth-of-type)の8つのCSSセレクタを紹介。
フロントエンド

parsley.jsで独自バリデーションを作る

フォームのフロントの入力チェックに欠かせないのがparsley.jsです。ビルドインのバリデーションだけだと基本的なものしかないので、独自バリデーションの作り方を記載しています。 バージョン parsley.js 2.3.13...
フロントエンド

jQueryでinputのvalue属性セレクタが効かない

久しぶりの投稿です。今回はJavaScriptのミニネタ。 明細のある入力フォームを作っていて、明細部分の商品名が重複していたらエラーとなるように、jsでバリデーションをつけたかったのです。目指すのは以下の画像のような感じ。 ...
フロントエンド

javaScriptでiOS風の電卓を作りました

javaScriptの勉強中です。何か作りながらのほうが楽しいので、電卓を作ってみました。 iOSやmacに標準装備されている電卓風にしてみました。 ただ、この電卓、いくつか動かない機能が……(^^;) +/-や小数点はちょっと面倒...
フロントエンド

【CSS】謎の余白の正体はmarginでもpaddingでもないアレでした

WEB制作会社に入社して6か月のド新人HTMLコーダーです。最近はCSSや開発者ツールにも少しは慣れてきて、問題があっても自分で解決できるようになってきました。しかし、最近「謎の余白」でハマった事件があり、ご紹介したいと思います。 ...
フロントエンド

【HTML】マークアップ手順を新人コーダーが実務ベースで解説

WEB制作会社に入社して5か月のド新人HTMLコーダーです。最初は保守で小さなマークアップからやらせてもらい、少しずつレベルアップし、先日ついに新規案件のマークアップを担当させて頂きました。ティザーサイト(comming soon的なサイ...
タイトルとURLをコピーしました