frontendmemo

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

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選

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

firefoxでbutton要素がクリック時に動くのを防ぐ

css

button要素って結構厄介でデフォルトのスタイルが当たっています。 button要素の中に画像を指定した場合 background: none; border: none; cursor: pointer; で十分かと思いますが、その場合firefoxでクリックしたとき動きます。 下記お試しください。See th…

【コーディング】デザイン再現性のチェック項目5つ

コーディングした後にデザインを再現できているか確認していることと思います。 PSDと見比べてチェックするべき項目を5つほど挙げてみました・ マージン マージンは完全にピッタリ同じにすることは行間、前後の要素に依存するため難しい場合もありますが、 …

【CSS】gridLayoutで使えるminmax()の新単位frとは

css

frはFlexible Lengthを表し fr単位を使用するこの長さは、グリッドコンテナ内の空きスペース領域の一部を表します。例えば、2つのセルを持つ100px幅のグリッドがあるとします。1つは20pxの固定幅で指定し、もう1つは1frで指定します。この場合、空きスペース…

UTF-8で必要な実体参照3つ

機種依存文字のうちどれを実体参照にすべきか、そのまま打つかは悩ましいですね。しかし実際実体参照にしないと文字化けする問題はshift-jisで起こるものなのでUTF-8では気にしなくていいですよ。ということをgoogleのcssスタイルガイドに書いてあります。Go…

飲み会割り勘ツール

飲み会で最後にしなければいけないのが、会計の支払いですね。割り勘で支払う場合、先輩後輩、男女で何:何の割合で支払わうかを計算しなければいけません。その計算ツールを作ったので、ブックマークして飲みが終わったらこのサイトを開いていただければと…

【html】実装ページを量産する時にする7つの自己チェック

Webサイトは、ページ数が多ければ多いほど元となるテンプレートページを量産していく作業があります。量産については、いかに効率よく、間違いやミスなくページを作れるかがカギとなりますので、その際必ずやっておくべき、自己チェックを挙げていきたいと思…

YouTubeを埋め込んでも重くならないようにする方法のyoutubeソース置換ツール

youtube動画URL 例:https://www.youtube.com/watch?v=0E00Zuayv9Q 置換クリア 出力結果 ブログにyoutubeを貼ることが割と多いのですが、何個も設置した場合気になるのが読み込み速度ですよね。 自分は下記の記事を参考に、クリックしたらhtmlを置換して動画…

option生成ツール

option生成ツールを作りました。きっかけは、良くある平成とか昭和とか金額とかのセレクトボックスを作るとき大変わずらわしく感じたからです。 都道府県は対応してませんが、数字が絡む前後に単語が入る文言をoptionタグに入れたい場合は、使用いただければ…

widthって何て読むの?コーディング用語の読み方を決める

コーディングをしてると、単語は書けるが、読み方がわからないということが何度かあります。 コーダー、プログラマあるあるだと思いますが、読み方で戦争になったり、恥ずかしい思いをしたり。どこかに正解はないのかと普段思っていました。そんな折こちらの…