frontendmemo

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

【初心者向け】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は考慮すべき…

android端末でfocusが外れない場合の対処法

なかなか遭遇しないバグだと思うのですが、念のためmemoします。 エラー発生条件・環境 android5を使用。カルーセルのサムネイルをタップしてから、スワイプする。 エラーの状態 スワイプ後もタップしたサムネイルからフォーカスが外れず、スワイプした画像…

意外と知られていない!?dlの直下にdivを置いてもOK!

css

質問サイトにもdl要素の直下にはdt、dd以外置いていけないという答えで終わっており意外と知られていないかもしれません。MDNのdl要素のページでも下記のように記しています。 <dl> <div> <dt>Name</dt> <dd>Godzilla</dd> </div> <div> <dt>Born</dt> <dd>1952</dd> </div> <div> <dt>Birthplace</dt> <dd>Japan</dd> </div> <div> <dt>Color</dt> <dd>Green</dd> </div> </dl> WHATWG HTML…

WAI-ARIA基礎まとめ カルーセルを例に実装方法の解説

WAI-ARIAとは WAI-ARIAの語源は、Web Accessibility Initiative - Accessible Rich Internet Applications(ウェブ・アクセシビリティ・イニシァティブ・アクセシブル・リッチ・インターネット・アプリケーション)です。 WAIは、あらゆる人がWWWを利用でき…

IE9でcssが効いてない・崩れる場合考えられること 対処法

IE9以前のブラウザではCSSの制限があり、それを超えたCSSは適応されません。 CSSセレクタ数の制限 1つのCSSファイル、または1つのstyleタグ内のセレクタは4095個までです。 IE9以前でCSSファイル、またはstyleタグは31個目までしか適応されない。 https://su…

iframeはmarginの相殺が起こらない

css

CSSにおけるマージンの相殺は深いですよね。マージンの相殺とは、簡単に言うと要素が連続する場合にマージンのサイズが大きい方が優先されるということです。例えばh2がmargin-bottom:30pxで続く要素がmargin-top:20pxであればその要素間は30pxになります。 …

Googleマップで都道府県市区町村の境界がわかるようになった!

本日Googleマップを見ると都道府県、市区町村の境界がわかるようになっていました。 東京都 これは面白いですね。住んでる所が東京か疑問に思われる場所でも境界内に入っていれば即証明できますね笑 新宿区 こやってみると新宿って駅の1/3は新宿じゃないwと…

Evernoteで保存できない!アップグレードの強要?

本日Evernoteで保存が出来なくなりあせりました。いつものように保存しようとすると以下のような表示が。アップグレードとキャンセルボタンしかありません。どうすればよいかというと、アップグレードをクリックしてノートに戻るを選択するか、本文にそのま…

cssで見出しデザイン117選

css

見出しデザインのアイディアってこれでもかっていうくらいありますよね。 今日はそんな見出しデザインをしてくれてるサイトを集めました。 シンプルなHTMLとCSSをコピペするだけで実装できる見出しデザイン20選 fit-jp.com 手書き風の見出しデザイン[01] サ…

リファレンスサイトまとめ4つ

MDN developer.mozilla.org HTMLクイックリファレンス www.htmq.com TAG index http://www.tagindex.com/html_tag/link/a_mailto_sub.htmlwww.tagindex.com とほほのWWW入門 http://www.tohoho-web.com/www.htmwww.tohoho-web.com

親要素のコンテンツ幅を超えて100%の子要素ボックスを作る

css

レスポンシブデザインを作る上で時として無理をしなければいけない時があります。先日どうしてもコンテンツ幅を超えて100%のボックスを作る必要があり、そんなことできないかと思いきや調べてみたら発見することができました。ボックスにネガティブマージン…

display:flexでよく使う8つのプロパティ

css

display flexはとても便利ですが、プロパティが多く、単語も長いので覚えずらいプロパティかなと思います。そんな覚えたての方に向けてよく使うと思われるプロパティに絞って下記に例を挙げました。 .contents { max-width: 700px; } .lyt1 { display: flex;…

ソースコード共有サービス4選

正式名称はわかりませんが、ソースコード共有サービスはとても便利ですよね。 必要なのは、ネットにつながってる環境のみ。エディタもサーバー環境も必要なしで、コーディングができて共有ができます。勉強の為や、デバッグ、作品公開などいろんな用途があり…