読者です 読者をやめる 読者になる 読者になる

frontendmemo

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

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 …

アクセシビリティの理解を深める②インタラクション設計

アクセシビリティの理解を深める連載②です。 デザイニングWebアクセシビリティを読んで学んだ要点を書いていきます。デザイニングWebアクセシビリティ - アクセシブルな設計やコンテンツ制作のアプローチ作者: 太田良典,伊原力也出版社/メーカー: ボーンデジ…

括弧(かっこ)を強調や装飾目的で使うのをやめよう-アクセシビリティ

アクセシビリティを達成する上で、括弧の扱いは注意しなければいけません。 悪い例1 【お問い合わせ】tel:000-0000-0000 上記のような括弧の使い方は古いサイトによく見られます。これは、見出しとしての装飾目的で括弧を付けているためアクセシビリティ的に…

JSをプラグイン化 コンストラクタとインスタンス トグル機能を例に解説

プラグイン作成する際、$.fn.hogehogeでオプションを追加していきますが、より機能ごとに関数を作っていく場合コンストラクタとインストラクタを絡めると効率的に組めていいと思います。例えば、以下簡単な例ですがトグルを初期設定とトグル機能に分けていま…

アクセシビリティを深める①ナビゲーション設計

アクセシビリティについて何回かこのブログでも取り上げました。frontendmemo.hatenablog.com良書「デザイニングWebアクセシビリティ」の項目の問題と解決策を挙げていっただけなので今回からは各トッピクスによりクローズアップしていきたいと思います。 改…

【JS不要】cssのみでtelリンクを無効にする方法

電話番号をかけさせたいときのhtmlは以下のようにします。 <p class="tel"><a href="tel:0312345678">03-1234-5678</a></p> しかしこれだと、PCの時でもリンクしてしまい、レスポンシブデザインで制作している時は、スマホのみに対応させたいですよね。以下のようにすれば、cssのみでPC→電話リンク無効、スマ…

【css】android4.3とandroid4.4の差が激しい

css

android2系は、使えないプロパティが多いイメージでしたが、実は4系でも4.1~4.3までは使えないことが多いことに気づきました。 1位 display:flex flex系は対応していません。4.4から対応しています。flexの対応状況はこちら↓ Can I use... Support tables f…

infoアイコンから×へ ハンバーガーアニメーションの応用

css

巷では賛否両論あるハンバーガーメニューですが、実際多くのユーザーに認知されたインターフェースであることは間違いなさそうです。下記記事は、面白かったです。 qiita.com今回は、別のアイコンから×にアニメーションできるか試してみました。例えばmenuナ…

marginとline-heightの計算ツールを作ってみた

marginとline-heightの計算ツールを作ってみました。 実際はmixinなどで動かす方が効率よいと思います。ちょっとした作業でscssの設定などをしていない時に使っていただければと思います。マージンフォントサイズ行間割合結果 var $margin = document.queryS…

jquery 最も簡単な自作タブ切り替え機能

タブ切り替え機能をわかりやすく解説したいと思います。cssは解説には不要なのでなしにしています。 デモ See the Pen PGRjpv by funclur (@funclur) on CodePen. 解説 html <ul class="js-tab-title"> <li class="active"><a href="#anc-tab01">タブA</a></li> <li><a href="#anc-tab02">タブB</a></li> <li><a href="#anc-tab03">タブC</a></li> <li><a href="#anc-tab04">タブD</a>…</li></ul>

chart.jsをスクロール時に発動 ドーナツ型円、縦型棒、横型棒グラフ

chart.jsはグラフにアニメーションを取り入れるプラグインです。www.chartjs.orgこのプラグインは、通常更新時に発動するのですが、スクロール時に発動させたいこともあるのではないでしょうか。 DEMO See the Pen pELoRb by funclur (@funclur) on CodePen.…

form要素のinputやtextareaがiphoneでピンチインするのを防ぐ方法

form要素はいろいろとコツが必要になることが多いかと思います。スマホでinput要素に入力したところピンチインする現象に遭遇しました。文字が小さいためあえてピンチインする仕様だそうなのですが、恐らく十人が十人めんどくさっと思うでしょう。 これを解…

white-space、word-wrap、word-breakをまとめてみた。

css

white-space、word-wrap、word-breakの違いがわかりづらいのでまとめてみました。See the Pen KgyGzw by funclur (@funclur) on CodePen. 1.指定なし 日本語は単語の途中でも折り返されます 英語は単語区切りで折り返されます 連続する英数字は折り返されま…

ボックスの中の画像やテキストを上下中央揃えにする方法

css

上下中央に配置する方法はいろいろありますがボックスの中のテキストを上下中央に配置したい場合は、display:tableを使うとよいでしょう。 ボックスの中にテキスト See the Pen jraOXp by funclur (@funclur) on CodePen. point 1.boxにdisplay:tableをテキ…

レスポンシブデザインにおいてtableの対応で最も簡単な方法

css

レスポンシブデザインにおいてtableの対応は、悩ませる要素の一つです。display:blockにして縦並びにしたりもありますが、rowspanなどが必要なときはこの方法は有効ではありません。結局簡単なのは、スマホサイズ時は、スクロールさせることではないでしょう…

select要素にtext-overflow:ellipsisを効かせる方法

css

テキストが長いときなど、幅を超える分は三点リーダーに変えたいときがあるかと思います。それがtext-overflow:ellipsisです。しかし、select要素には三点リーダーが適応されませんでした。そこでselect要素にも三点リーダーを聞かせる方法を調べてみました…

Webを仕事にするなら覚えておくべきアクセシビリティ~デザイニングWebアクセシビリティまとめ⑤~

デザイニングWebアクセシビリティのまとめ⑤です frontendmemo.hatenablog.com今回が最終回 実装 です。デザイニングWebアクセシビリティ - アクセシブルな設計やコンテンツ制作のアプローチ作者: 太田良典,伊原力也出版社/メーカー: ボーンデジタル発売日: 2…

Webを仕事にするなら覚えておくべきアクセシビリティ~デザイニングWebアクセシビリティまとめ④~

デザイニングWebアクセシビリティのまとめ④です frontendmemo.hatenablog.com今回は ビジュアルデザイン です。デザイニングWebアクセシビリティ - アクセシブルな設計やコンテンツ制作のアプローチ作者: 太田良典,伊原力也出版社/メーカー: ボーンデジタル…