注）本文中の「コンテナ」「アイテム」について 本文中でいう「コンテナ」「アイテム」は、flexコンテナとflexアイテムのことを指しています。 コンテナ display: flexや、wrap指定などをする 複数のアイテムを含む アイテム flex: 1 0 0%などの指定をする 1. アイテム潰れる問題（Safari） Chrome Safari 潰れてますね。 起きる条件 Safari なぜ コンテンツの最小サイズを尊重してくれない模様 どうすればいいのか flex-shrinkに0を指定 flex-basisにautoを指定（デフォ値なので、指定がなければそのままでOK） Safari10にて修正済み（つまり、SierraとiOS 10以降では対応不要） 2. align-items:center はみ出す問題 Chrome IE11 はみ出てますね。 起きる条件 IE10-11 f

JavaScriptに関する初級～中級Tipsをいくつか書いていたのですが， 話題が膨らんじゃったので分離しました． はじめに thisを理解する 本題 thisを退避させる 無名関数を用いる call, apply, bindメソッドを用いる removeEventListenerを使用する場合 おわりに はじめに ブラウザで動作するJavaScriptでthisを用いた場合， 基本的にはグローバルオブジェクトであるwindowオブジェクトを指します． しかし，たま～～にthisの中身が異なる場合があります． 例えば，Web制作に扱われやすいマウスのイベントリスナー内のお話． イベントリスナーといえば，引数もどう設定するんだ！という疑問も出てくるんじゃないかと思います． 今回の議題を整理しましょう． イベントリスナー内のthisを制御するには？ イベントリスナーに引数を与えるには？ th

はじめに とある要素の中をいじりたいという時 innerHTML で操作することもあるかもしれません。 しかし、実はこれはあまりよろしくない。 innerHTML は既存の要素を破壊（？）する innerHTML を書き換えるということはつまり、要素の中身をすべて新しいものに書き換えるということです。 既存の要素は、新たな要素として扱われてしまいます。 サンプル 例えば、以下のようなHTMLとJavaScriptコードがあったとします。

ajaxはjavascriptを使った非同期通信という技術で、様々なウェブサイトで使用されています。jQueryを使うことでこのajaxも手軽に実装できるのですが、今回はajaxで他ページからのコンテンツを呼び出して表示させる便利なサンプ…

gulp-sassとgulp-postcssを組み合わせると、快適なCSSのコンパイル環境を実現できます。 Sassのコンパイルはgulp-sassで行い、ポストプリセッサーであるgulp-postcssにその後の処理を連携させるイメージです。 ※このエントリーは当初「gulp-sassとgulp-cssnextで快適コンパイル環境を構築」というタイトルで公開していましたが、gulp-cssnextが非推奨プラグインとなり、PostCSSを使ったやり方が主流になってきたため、gulp-postcssを用いた内容に全面的に修正しました。 基礎知識 gulp-sassについて gulpでSassのコンパイルを行うnpmパッケージです。 libsassを使っているため、gulp-ruby-sassやgulp-compassと比べて処理が高速で、 Rubyに依存しないため環境の構築・共有がしやすい

CSSセレクタのチートシートでは、要素セレクタ / classセレクタ / idセレクタ / 属性セレクタ / 複数セレクタ / 子孫セレクタ / 兄弟セレクタ / 隣接セレクタ / 擬似クラス / 擬似要素 / 全称セレクターから37パターンのセレクタの説明と実際のコードで使い方サンプルを紹介しています。

最近atomからVScodeに乗り換えたがatomでは開始タグ～閉じタグまでを選択するショートカットをよく使ってた。（デフォのショートカットなのか設定したものなのかは忘れた） 結構重宝していたのでVScodeでも同じようなショートカットはないか調べていたらどうやらEmmet（効率的にHTMLやCSSのマークアップ手助けしてくれる、すごいツール）の機能らしい 設定方法 環境設定　→　キーボードショートカット キーバーインドの検索で editor.emmet.action.balanceOut を検索 ショートカットをあてる Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful inform

ラジコのタイムフリーでもっと RaNi Music♪ を聴こう！ 最近 RaNi Music♪ を「ラジコ・タイムフリー」機能で放送時間外の「平日の深夜」や「週末」に聴く方が増えています。ただいまこの「ラジコ・タイムフリー」機能を使って、もっと RaNi Music♪ を聴こうというキャンペーンを展開中です。 » タイムフリーとは？(ラジコのページが開きます) 「ラジコ・タイムフリー」機能を使ったことがない方は、この機会に使ってみて感想・体験談を、使ったことがある方は「タイムフリーを使ってこんなところでRaNi Music♪を聴いています」というエピソードや「今後こんなところでこんな使い方をしてみたい」という活用法やアイデア等をお寄せください。 ぜひ番組はライブで、そしてタイムフリーでもう一度お聴きください。 » RaNi Music♪ 投稿送信フォーム My Humming Time ラ

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. Learn moreSee full compatibilityReport feedback キャンバス API (Canvas API) は JavaScript と HTML の <canvas> 要素によってグラフィックを描く方法を提供します。他にも、アニメーション、ゲームのグラフィック、データの可視化、写真加工、リアルタイム動画処理などに使用することができます。 キャンバス API は全体的に 2D グラフィックを対象としています。 WebGL API は、こちらも <canvas> 要素を使用して、ハードウ

MAMPは、Apache, MySQL, PHP をパッケージとして一括インストールすることができるソフトです。PHPの勉強用やPickles Frameworkの様なPHPベースのCMSを自分のPC上で構築出来ます。 ここではMAMPのインストール方法と複数のローカルホストをたてる時の設定の仕方を書いてみます。 MAMPのダウンロード 以下のMAMPの公式サイトからパッケージをダウンロードできます。 http://www.mamp.info/en/ ダウンロードしたMAMP_MAMP_PRO_3.0.5.pkgというファイルをダブルクリックします。↓ インストーラーの流れにそっていけばインストール出来ます。(MAMP PROがいらない場合は一番最後でカスタマイズを選択すればMAMPのみをインストール出来ます) "MAMP" の中に "MAMP.app" というファイルがあるので、ダブルク

株式会社つみき UI/UX事業終了のお知らせ 拝啓　時下ますますご清祥のこととお喜び申し上げます。 平素より格別のご高配を賜り、厚く御礼申し上げます。 この度、弊社は創業以来続けて参りましたUI/UX事業（受託制作事業）につきまして、2024年4月30日をもって終了することを決定いたしました。 今後は、弊社の主力事業であるFilmarksをはじめとした、映像関連事業に注力して参ります。 ご愛顧を受け賜りました皆様には、深く感謝申し上げますとともに、ご理解賜りますようお願い申し上げます。 敬具 株式会社つみき 代表取締役社長 鈴木 貴幸 事業終了予定日：2024年4月30日 biz@tsumikiinc.com

CSSは設計手法も大事ですが、どういう単語で名前をつけていくかも大事だと思っています。 個人個人でばらつきが出るところでもありますし、「単語名 英語」で検索をして探した単語を使ったけど若干意味合いが違ったといったこともあると思います。 クラス名を決めるためのリストを見かけることもありますが、英単語の読みは書かれていても意味合いが書かれていることは少ないように思います。 自分の確認用と、チームで製作するさいの基準になるようなものを作りたいと思い、単語とその意味を短くまとめてGitHubにあげています。 CSS クラス名リスト | GitHub 以下投稿時の内容です。 名前をつけることは難しいですが、とても重要なことです。 CSSには設計思想が必要ですが、実践するにあたり、名前と機能の意味がとおり、名前のつけ方にブレがないようにするべきです。 このドキュメントでは、CSSでよく使われる単語を分

YouTubeの埋め込みコードで動画をWebサイトに埋め込むことが出来ますが、再生や停止をJSでコントロールしたい場合があり、調べてみました。 ちなみにYouTubeはie8のサポートはもうしていないみたいです。ie8でYouTubeにアクセスすると以下のような画面になります。 実装 Sample Page HTML HTMLでポイントなのは、iframeのsrcにenablejsapi=1というパラメーターを付加することです。 enablejsapiに1を設定することでプレーヤーJavaScript APIが有効になります。 その他のパラメーターはこちらを参照 → YouTube IFrame API Parameters <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="wid