frontendmemo

このサイトは、「html、css、js、ruby,ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

CodepenでできるVueの基礎を学ぶVol.4 データの監視と加工

Vue

こちらの記事は基礎から学ぶVue.jsの内容を学習した記録です。基礎から学ぶ Vue.js作者: mio出版社/メーカー: シーアンドアール研究所発売日: 2018/05/29メディア: 単行本(ソフトカバー)この商品を含むブログを見る こちらの記事で気になることは本の中に…

CodepenでできるVueの基礎を学ぶVol.3 データの登録と更新

Vue

こちらの記事は基礎から学ぶVue.jsの内容を学習した記録です。基礎から学ぶ Vue.js作者: mio出版社/メーカー: シーアンドアール研究所発売日: 2018/05/29メディア: 単行本(ソフトカバー)この商品を含むブログを見る こちらの記事で気になることは本の中に…

rubyにおける環境変数の作り方

環境変数に入れておくことで、大事なパスワードをプロジェクトのディレクトリ内に置かずに管理できます。そうすることで、gitignoreをせずにコミット対象から除外(そもそもプロジェクトのディレクトリ内ではないため)できます。1. .bash_profileを生成しま…

CodepenでできるVueの基礎を学ぶVol.2 データの登録と更新

Vue

基礎から学ぶ Vue.js作者: mio出版社/メーカー: シーアンドアール研究所発売日: 2018/05/29メディア: 単行本(ソフトカバー)この商品を含むブログを見るこちらの本を参考にサンプルコードを記述しています。 データの登録と更新 テキストと属性のデータバイ…

パフォーマンス向上のためのデザイン設計まとめてみた(画像編)

パフォーマンス向上のためのデザイン設計作者: Lara Callender Hogan,西脇靖紘,星野靖子出版社/メーカー: オライリージャパン発売日: 2016/06/25メディア: 単行本(ソフトカバー)この商品を含むブログ (1件) を見るこの記事は「パフォーマンス向上のための…

herokuで10ずつidが加算されていく現象

こちらに記載されている通り、cleardbというデータベースの仕様らしい。 なのでそのままにしたほうがいいとのこと。ClearDB FAQs – ClearDB ClearDBは循環レプリケーションを使用してマスターマスターのMySQLサポートを提供します。そのため、あるマスターが…

herokuがupできなかった現象Precompiling assets failed.

herokuがアップ出来ずに1、2ヶ月ほど悩んでいましたが、やっと解決ができました。エラー文言はこちら Precompiling assets failed.直訳するとコンパイル前のassetファイルの失敗ですかね。assetファイルを見るとcss、JS共に原因がありました。 assetファイル…

CodepenでできるVueの基礎を学ぶVol.1

Vue

こちらの記事は基礎から学ぶVue.jsの内容を学習した記録です。基礎から学ぶ Vue.js作者: mio出版社/メーカー: シーアンドアール研究所発売日: 2018/05/29メディア: 単行本(ソフトカバー)この商品を含むブログを見る こちらの記事で気になることは本の中に…

head内のmetaタグの中身を書き換えることは可能?

可能でした。document.head.childrenでheadの子要素にアクセスし、name属性で分岐処理をします。 下記の場合はdescriptionを取得する例です。codepen.ioheadタグ内のmeta情報を取得・書き換えを行う。Javascript・jQuery! | | ルディの脳内ブログ SEO的にど…

数字のmaxlengthが効かない?oninputでの対処法

テキストボックスの文字数制限の仕方は下記の通り。 <input type="text" maxlength="5"> 数字のみに制限したい場合は以下のようにします。 <input type="number" pattern="[0-9]*" maxlength="5"> しかしtype="number"はmaxlengthがききません。 入力を数字と文字数制限両方適応させたい場合の対処法を紹介します。 oninput oninputはjavascriptの i…

jqueryでスクロール位置の取得・設定【デモあり】

スクロール位置の取得 jqueryでスクロール位置の取得するには要素scrollメソッドを使用します。codepen.io scrollメソッドに限らずメソッドはonを使うことを推奨します。 スクロール位置の設定 jqueryでスクロール位置の設定するには要素scrollメソッドを使…

chrome以外でgooglemapで現在地が表示されない

chrome以外でgooglemapで現在地が表示されないバグが起きたと思ったのですが、違いました。正確にはPCはGPS現在地を正しく取得できないのです。それはchromeもそうです。 現在私は新宿でGPSを取得しましたが、chrome以外は千代田区を指していました。 chrome…

【初心者向け】Ruby on Railsでブログ作成手順をわかりやすくまとめてみた

まず基本的な作り方ですがルーター、コントローラー、ビューの順番で作成していきます。 自分のような初心者は何から触っていいかわからなくなると思います。 そんな時は心の中でルーター、コントローラー、ビュー。ルーター、コントローラー、ビューと唱え…

Ruby初心者が躓きがちな基本まとめ

TECH::CAMPでrubyを学んでいて、学習していくうちに基本を忘れてるがために先に進めなくなることはよくあります。そんな基本をまとめてみました。 ルーティング パスに対応してどのコントローラのアクションを動かすかを設定するもの get 'tweets' => 'tweet…

railsが起動しなかった3つのエラーの対処(cannot load such file -- sqlite3/sqlite3_native (LoadError))

たった1日で基本が身に付く! Ruby on Rails 超入門作者: WINGSプロジェクト竹馬力,山田祥寛出版社/メーカー: 技術評論社発売日: 2018/03/09メディア: 大型本この商品を含むブログを見る「たった1日で基本が身につく!ruby onrails超入門」を読んで、 rubyの…

モバイルフレンドリー対策とは?

近年モバイルファーストが叫ばれていますが、googleではモバイルファーストではない(スマートフォン対応していない)サイトには検索結果で「ページがモバイル フレンドリーではありません。」という文言が表示されるようになってしまいました。SEO順位も影…

SSL化してもセキュリティレベルの高い企業ではサイトが閲覧できないという話

SSL化してもセキュリティレベルの高い企業ではサイトが閲覧できない、それはSSLのレベルに原因がありました。 SSLとは インターネット上でのデータのやりとりを暗号化し、第三者に情報をのぞかれたり盗まれたりしないようにするのがSSL(Secure Sockets Laye…

ケンカしないれこーず

#calendar:after { clear: both; display: block; content: ""; } #calendar table { border-collapse: collapse; text-align: left; line-height: 1.5; float: left; margin: 10px 10px 0 0; } #calendar thead { border-right: 1px solid #ccc; border-lef…

トグルのarea-*は何を指定するか。

area-*属性はJSで変更された要素の役割と状態をブラウザに伝える働きをします。 トグルでの使用例 トグルでは主に下記を使用します。 aria-controls・・・ボタンと開閉要素の関連付け aria-expanded・・・開閉の状態 主に下記のようにします。 <div class="toggle-01 js-toggle is-open"> <button type="button" class="toggle-hook js-toggle-hook" aria-controls="toggle-content-01"><span>閉じる</span></button> </div>

全てのフォーカス要素を無効にしたい

JSなどで対象エリア内のフォーカスを全て無効にしたい時があると思います。 全てのフォーカス要素は? フォーカス要素一覧は下記です。 a[href] area[href] [onclick] [tabindex] input button select option textarea output summary video audio object em…

nodeをアップデートしたらgulpが動かない時の対処法

nodeをアップデートしたらgulpが強制終了するようになりました。 意外と忘れそうなので備忘録用にメモします。node-sassを使用しているのですが、node-sassはバージョンごとにインストールが必要なのでコマンドプロンプトにて下記を実行しました。 npm insta…

css3でコイントスのように水平に回転するアニメーション

css

読み込み時にコイントスのように水平に回転するアニメーションのcss3です。マウスオーバー時も回転します。 <div class="coin-wrap"> <div class="coin"> <div class="front"><h2>コイン:表</h2></div> <div class="back"><h2>コイン:裏</h2></div> </div> </div> .coin-wrap .coin { position: relative; width: 200px; height: 200px; transform-style: preserve-3d; transition: a…

flexで簡単!画像を中央揃えにして横並びにする方法(キャプションあり)

css

画像を中央揃えにして横並びにする方法 <ul class="img-col2"> <li class="image"> <figure><img src="https://dummyimage.com/300x300/000/fff" alt=""> <figcaption>キャプションが入ります</figcaption></figure> </li> <li class="image"> <figure><img src="https://dummyimage.com/300x300/000/fff" alt=""> <figcaption>キャプションが入ります</figcaption><…</figure></li></ul>

プライベート関数をグローバル領域から呼び出し

プライベート関数をグローバル領域から呼び出すためには、関数内でメソッドを作りオブジェクトを返せば関数を呼び出すことができます。See the Pen OjrjVE by funclur (@funclur) on CodePen. var func = (function(){ function private(){ alert() } return…

Webデザイナーのための就職・転職情報とサイトまとめ

未経験からWebデザイナーになるためには 理由 Webデザイナーに向いてる人とは 職種・働き方 Webデザイナーの残業は? 大手制作会社かベンチャー中小か 大手の良い所 大手の悪い所 ベンチャーの良い所 ベンチャーの悪い所 Webデザイナーの年収は? Webデザイ…

iphoneX対応サイトの実装方法・注意点まとめ html・css

css

近く実装案件も出てくるであろうiPhone Xの実装方法、注意点の記事をまとめました。 主に表示領域に対して処理を加えなければいけなくなりそうです。 iPhone X の Safari における Web コンテンツの表示 medium.com <meta name="viewport" content="viewport-fit=cover"> viewport にこの値を設定することで、Saf</meta>…

Webサイトデザインを集めたサイト総まとめ 国内・海外・LP・スマートフォン・レスポンシブデザイン

国内Webサイト CHOICELY W FINDER Design-trigger 週刊ウェブデザイン 現代デザイン 4db MUUUUU.ORG Tau Magazine ズロック イラストブックマーク straightline bookmark WONDER BOOKMARKS I/O 3000 bookma! v3 81-web.com S5-Style .SG_BOOKMARK イイネ!WE…

gulpが動かない原因と対処法

先日gulpが動かなくなったのでその対処法の1つをメモしておきます。 発生経緯 webpackをインストールするためnodeとnpmのヴァージョンを下記に上げた。 node 6.11.2 npm 3.10.10 その後、環境構築済みのgulpを起動したら即強制終了するようになった。 対処法…

モジュール・コンポーネントを意識したhtml、css設計(後半)

www.frontendmemo.xyz前回の続きで、モジュール・コンポーネントを意識したhtml、css設計の後半を書きます。 リンクテキスト a要素にあてるべきdisplayプロパティ 単一リンクとリンクリストを作る リンクを作る時注意点まとめ レイアウト いろんな横並びを理…

モジュール・コンポーネントを意識したhtml、css設計(前半)

運用・保守性を上げるモジュール・コンポーネントとは? 上マージンか下マージンか 上マージンを勧める理由 上マージンとは? マージンの打ち消し 下マージンとは? マージンの打ち消し line-heightを考慮したマージンに設定するか line-heightは考慮すべき…