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

frontendmemo

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

何番目系のおさらい 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アクセシビリティ - アクセシブルな設計やコンテンツ制作のアプローチ作者: 太田良典,伊原力也出版社/メーカー: ボーンデジタル…

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

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

angluar.js基本のToDoアプリ

今更angluar.jsを学び始めました。まずはドットインストールでどんなものかを知り同じように写経します。 angluar.jsとは google製のフレームワーク html拡張 どういうケースで使えるか シングルページアプリケーション Webサイト管理画面 フォーム画面 ハイ…

feedlyのようなドロワーメニューを作る

feedly.comfeedlyとても便利ですよね。今回はfeedlyで使用されている、マウスオーバーしたらメニューが表示されるようなドロワ―メニューを作ってみました。See the Pen KrqPzd by funclur (@funclur) on CodePen. <div class="drower-wrapper"> <div class="drower-open"> <ul> <li>開いた</li> <li><button>閉じる</button></li> </ul> </div> <div class="drower-close"> <ul> <li>開く</li> </ul></div></div>

覚えておきたい記事 ~8/23

今週の覚えておきたいフロントエンド関連の記事を挙げたいと思います。 すべてのパスワードを撲滅すべき3億6000万の理由 uxmilk.jpWebnioiteパスワードが増えていくのは誰しも悩みの種の一つでしょう。早くパスワードに変わるものが開発されると良いですね。…

フォームパーツのcssは初期値だらけ~第一回 button~

css

フォームパーツの初期値の実装が激しい 主なフォームパーツの要素は以下です。 input checkbox radio select textarea button そしてこれらは、borderや文字色、背景色などが各ブラウザによって予め実装されています。 各ブラウザで見え方が違うのはそのため…

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

デザイニングWebアクセシビリティのまとめ②です frontendmemo.hatenablog.com今回は ナビゲーション設計 システム設計 です。 ナビゲーション設計は、ブログにおいても大変ためになる内容でした。 いかに、ユーザーの目的を達成しやすくナビ構成を考えるかと…

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

デザイニングWebアクセシビリティ読みました。 アクセシビリティ大事ですよね。何となく聞いたことはあるけど、正直とっつきにくい、知らなくても大丈夫でしょ、という人も一度読んでいただきたい本、デザイニングWebアクセシビリティをまとめてみました。デ…

三項演算子の基本3つ

三項演算子とは? 三項演算子は、略して書くことができる書き方で、そのため可読性が低いと倦厭されることもあります。 しかし、自分の経験上だいたいできる人のscriptやプラグインのscriptを読むとかっこよく三項演算子を使っています。 つまり、三項演算子…

比較演算子

jsでは避けて通れない比較演算子。こちらの書き方とそれぞれについて忘れないよう書き留めておきます。 等しいは=== ここで似たような==は絶対に使わないこと。===と==は微妙な違いがあります。'1'と1、つまり数値と文字列の1を==はtrueにするなどです。===…

liの何番目をセレクタで指定

css

よく忘れるので、覚えておくためにも以下記事にします。 項目1 項目2 項目3 項目4 項目5 1つ目 li:frist-child 2つ目 li:nth-child(2) 3つ目 li:nth-child(3) 最後から2番目 li:nth-last-child(2) 最後 li:last-child 奇数 li:nth-child(odd) 偶数 li:nth-ch…

margin-top派 or margin-bottom派

css

marginのつけ方に迷う ずっとmargin-bottom派だったんですけど、marginの相殺が思うようにされないケースが出てくるためマージンが相殺されないケースについて | WEBデザインの教科書margin-top派になって、自分なりのルールを決めてみようと思ったわけです…

コーダーが知っておくべきPhotoshop効率化テク

コーダーであれphotoshopでスライスなり軽い修正などを行うことがあるかと思います。 そんなコーダーでも知っておくべきphotoshopでの作業が少しでも早くなるようなTipsを紹介します。 画像やシェイプのサイズを知る テキストを選択した時○×選択以外で解除す…

見出し モジュールNo.1

見出しモジュールを作るときに心がけること 常に改行した時のことを考える 改行した時デザインは保たれてるか、行間は必要以上に空いてないか 必要であればbeforeやafterの疑似要素を駆使し、画像を使わずに済むコーディング 見出し 1例 See the Pen KrqPww …

Webサイト構築・運用で実際に使っているブックマークレット9選

ブックマークレットとは? ブックマークレットはブックマークにjavascriptを保存することでブラウザ上でプログラムを実行できるものです。 Web制作現場では、効率化のため必須になりますので良く使用するブラウザには入れておきましょう。 今回は、自分が仕…

挨拶

初めまして このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブロ…