frontendmemo

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

意外と知られていない!?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タグに入れたい場合は、使用いただければ…

プログラミング、コーディング用語の読み方を決める

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

新卒研修でhtml、cssの講師を担当した

会社の新卒研修でhtmlとcssを担当したので、その感触と教える側の心構えとして学んだことを書いておこうと思います。 内容 css講義 課題 感触 うちの会社の新卒はディレクター、コーダー、デザイナーまたはその他で職種が別れてるのですが、今年はコーダーが…

【css】リンクの文字色とアンダーラインの色を変える方法

css

通常リンクテキストに text-decoration:underline; を当てるとそのまま文字色と同じ色のアンダーラインが付きますよね。See the Pen vmGLGo by funclur (@funclur) on CodePen. リンクの文字色とアンダーラインの色を変えるには? a要素の中にspanなどを入れ…

【CSS】table-cellにtext-overflowを効かせる

text-overflowプロパティは厄介なもので、特定の条件下でないと効いてくれないことが多々あります。先日書いたものはselectbox内でJsを使用して3点リーダーを表示させるものでした。 www.frontendmemo.xyz今回はdisplay:table-cell内のテキストにtext-overfl…

table-cellにtext-overflowを効かせる

css

text-overflowプロパティは厄介なもので、特定の条件下でないと効いてくれないことが多々あります。先日書いたものはselectbox内でJsを使用して3点リーダーを表示させるものでした。 www.frontendmemo.xyz今回はdisplay:table-cell内のテキストにtext-overfl…

【JavaScript】クロージャを使って10回ボタンを押したらアラートを出す

下記を参考にクロージャを使って10回ボタンを押したらアラートを出してみたいと思います。[JavaScript] 猿でもわかるクロージャ超入門 5 クロージャを作る · DQNEO起業日記 クロージャの条件 外の関数のスコープ内で変数を定義し、 外の関数の中に関数(=関…

【JavaScript】モジュールパターンを学ぶ~スムーススクロール機能を実装~

モジュールパターンというものを最近知りました。プラグインでよく使われてる手法なのかなと思います。モジュールパターンの参考記事 【JavaScript】モジュールパターンについて知る - Qiita 【JavaScript】デザインパターンを知ってみる。モジュール・パタ…

要素の増減でページ遷移のアンカーリンクの位置がずれる

アンカーリンクとはリンク先urlを例えば../index.html#anchorとしておくとクリックした時、id="anchor"とidを振った要素にスクロール位置が合うようになります。 またそれは同一ページでも別ページでもいけるんですね。 <a href="../index.html#anchor">アンカーリンク</a> <h2 id="anchor">見出し</h2> 上記のように…

【JQuery】特定の要素以外の要素を取得

セレクタで絞る .notメソッドを使用する .hasメソッドを使用する .hasメソッドを打ち消す DEMO 特定の属性以外の要素を取得するのは簡単でやり方は何個かあります。 セレクタで絞る 属性!=値で特定の属性以外の要素を取得するができます。 <ul> <li>texttext</li> <li>texttext</li></ul>…

擬似要素:hoverはないがhover:擬似要素はある

css

:hover+::after :first-child+::before 擬似クラスと擬似要素の違い 擬似クラス 擬似要素 ::beforeの:hoverはないが:hoverの::beforeはあります。 同じように::afterの:hoverはないが:hoverの::afterはあります。下記に例を示します。リンクにマウスオーバー…

thunderbirdでメールが送信できない 2017

thunderbirdでメールが送信できない現象が起きました。https://support.mozilla.org/t5/Basics/Thunderbird-%E3%81%AE%E6%9B%B4%E6%96%B0/ta-p/19555現象が起こる前にアップデートしたため、もしかしたらと思いましたが やはり原因はそれだったようです。aug…

【JavaScript】配列のアルファベットや数値を昇順・降順にソートする 

アルファベット順にソートする 数値順にソートする 2ケタ以上の場合 降順 reverseメソッド アルファベット順にソートする アルファベット順にソートするのは簡単です。 配列にsortメソッドを使用します。 var x = ['tokyo', 'osaka', 'sendai', 'fukuoka']; …

【JavaScript】配列に要素を追加する push unshift splice

push、unshift、spliceは配列に要素を追加するメソッドです。 push pushは配列の最後尾に追加します。 配列.push('値'); unshift unshiftは配列の先頭に追加します。 配列.unshift('値'); splice spliceは配列内の任意の位置に要素を追加したり、任意の位置…

【javascript】forEachで配列を取得する

forループよりも簡単に配列のデータを取得するのがforEachです。 下記のように使用します。 <form name="fn_a" id="fi_a" method="GET"> <input type="button" value="押すと配列から読み込み"> <textarea name="tan_a" id="tai_a" rows="5" cols="30"></textarea> </form> var x = Array(); x = ["tokyo","sendai","osaka"]; function foo(){ x.forEach(bar); } function ba…

prepend、appendなどJQueryで要素を追加するメソッドまとめ

JQueryで要素を追加する方法は沢山あります。 prepend、append、after、beforeは前後に追加する方法です。 .part1と.part2は結果は同じです。.part1は$(A).メソッド(B)でAにBを入れる。 .part2は$(A).メソッド(B)でBにAを入れる。という風にAとBが入れ替わる…

bodyに充てるべきcss2017

css

bodyに充てるべきcssサイト全体を左右するのでとても重要です。自分が充てているcssは以下です。 (あくまでも一例) body { margin: 0; padding: 0; font-size: 16px; -webkit-text-size-adjust: 100%; font-family: "ヒラギノ角ゴPro W3", "Hiragino Kaku …

メディアクエリ最大値、最少値の書き方 mixinも

css

レスポンシブデザインサイトを制作する時、必須の記述メディアクエリ。こちらを何も見ずに書こうとすると忘れいることがあるので備忘録的に記事にしておこうと思います。 幅1200px以下 @media screen and (max-width: 1200px) { } max-widthつまり、最大値が…

何番目系のおさらい nth-childとnth-of-typeの違いと使い分け

1番最初の要素 1番最後の要素 奇数 偶数 要素が単一の場合(nth-child) 要素が複合的な場合(nth-child)(うまくいってない例) 要素が複合的な場合 (of-type) n番目以上の要素 要素が単一の場合 n番目以下の要素 要素が単一の場合 n番目以上の要素 n番目以下…

フロントエンドで本当によく使うツール(サイト編)

世の中便利なツールを無料で提供してるサイトってたくさんありますよね。 今日はその中でも現場で本当に使うツール(サイト編)を紹介します。 カラーコード変換ツール Googleマップで緯度・経度を求める Unicodeエスケープシーケンス変換ツール 画像圧縮 jp…

オフラインで使えるchromeアドオンの「Web Maker」が超高速!!

フロントエンド制作時のテストや社内での勉強会などはcodepenを使用しますが、どうしてもオンラインは速度についてはオフラインには劣ります。そのため時には簡単なコードのテストはhtmlファイルを作り必要であればjQueryを読み込んで...という非常に非効率…

jQueryのCDNを読み込みたい バージョンごとのurl一覧

jQueryは、JavaScriptを比較的楽に書くことができるライブラリですが、こちらの読み込み先をまとめたいと思います。特段理由がなければ、最新のバージョンを使うことをお勧めします。理由としては、より最適化され読み込みスピードが速くなっているからです…

CSS3の本当に使えるジェネレーターまとめ11個

CSS3でコーディングの幅がだいぶ広がりましたね。しかし、その反面記述が複雑で覚えにくいのが難点です。そんな時はジェネレーターで直感的にコードを生成した方が効率的です。今日はそんなCSS3のジェネレーターの中で本当に使ってるサービスをご紹介します…

【検証】max-width は width を上書きしますが、min-width は max-width を上書きするとは?

developer.mozilla.orgmax-width、min-widthについてMDNには下記のように書かれています。 max-width は要素に与えられる幅の上限を指定する為に用いる CSS プロパティです。このプロパティは、 width プロパティの値が max-width で指定された値より大きく…

【css】サイズのわからない要素を縦横中央揃えにしたい

css

cssで縦横中央揃えにしたいことは、よくあることだと思います。その場合、中央揃えにしたい要素のwidth、heightがわかってるか、もしくはどんなサイズが来ても中央に来るよう対応させるかでcssの充て方が変わってきます。 サイズがわかってる場合 codepen.io…

2017年カレンダーをJavascriptで生成

卓上カレンダーを買うお金がないのでカレンダーをJsで作ってみました。 こちらを参考に作りました。 イヌでもわかるJavaScript講座 - カレンダー 感謝です。ソースはカレンダーの下に載せています。 #calendar:after { clear: both; display: block; content…

配列から空文字を削除する方法など

falseと判定されるvalueまとめ 文字列や数値を真偽値に変換する方法 Boolean !!エクスクラメーションマーク2つ 配列から空文字を削除する falseと判定されるvalueまとめ null 0 undefind ''(空文字) NaN false 文字列や数値を真偽値に変換する方法 Boolea…

JavaScript urlのファイル名のみ取得する方法(拡張子あり/なし)

urlのファイル名のみ取得したい場合があります。たとえば http://○○○.com/○○○/index.htmlのindexを抽出したいときですね。 以下のようにします。 var l = window.location.pathname.split('/'); l = l[l.length-1]; l = l.split('.')[0]; console.log(l); //…

JavaScript 問題③

問題 1~100までの数字の中で、3の倍数と3が含まれている数字をconsoleで表示させてください。 答え See the Pen ygaygv by funclur (@funclur) on CodePen. vvar result = 0; var count = 0; var array = []; var re = /3/; for(var i = 1;i <= 100;i++){ i…

オブジェクト指向 JavaScriptの原則 プリミティブ型と参照型、関数、コンストラクタ、プロトタイプ

オブジェクト指向 JavaScriptの原則を読んで学んだことを書きます。 全てを網羅してないことと本書と例文に多少違いがありますことご了承ください。オブジェクト指向JavaScriptの原則作者: Nicholas C. Zakas,和田祐一郎出版社/メーカー: オライリージャパン…

JavaScript 問題②

問題 文字列hatenabloghatanosiinaaに含まれてるaの数をconsole.logで出力してください。 答え See the Pen ggOMbo by funclur (@funclur) on CodePen. var str = 'hatenabloghatanosiinaa'; var count = 0; for(var i = 0; str.length>i; i++){ var strPart…

JavaScript 問題①

問題:下記のようにconsole.logで出力してください。 記事の投稿数が96になりました。 記事の投稿数が97になりました。 記事の投稿数が98になりました。 記事の投稿数が99になりました。 記事の投稿数が記念すべき100になりました。 1つ目 (function(){ var …