あなたがまだ使っていないかもしれないHTML5の便利機能10選 - Qiita
こんにちは、たかとーです🧑🎤 こちらは、10 useful HTML5 features, you may not be usingの翻訳記事になります。 当記事は、Tapasさんの許可を得て翻訳しています。Tweet 10 useful HTML5 features, you may not be using HTML5は新しいものではありません。最初のリリース（2008年1月）以来いくつかの機能を使用してきました。100DaysOfCodeの取り組みの一環として、HTML5の機能リストをもう一度よく見てみました。何か見つけたかな？私は今のところあまり使っていません。 この記事では、過去にあまり使ったことがなかったが、今では便利になったHTML5の機能を10個挙げています。また、Netlifyでホストされている、実際に動作する例を作成しました。参考になることを願っています。 htt
atomでsass-autocompileを使用する方法 - Qiita
Sassを使用していますが、Atomでコンパイルできるように「sass-autocompile」というパッケージを導入しました。 私自身が行なった導入手順と使い方について、備忘的に記載します。（使用しているOSは、macosです） 導入手順 Homebrewのインストール nodebrew、Node.jsのインストール node-sassのインストール sass-autocompileの設定変更 1. Homebrewのインストール まず、Homebrewがインストールされているか確認します。 $ brew -v Homebrew 2.0.2 Homebrew/homebrew-core (git revision 623c4; last commit 2019-02-27) Homebrewのversionが表示されれば、すでにインストールされています。 https://qiita.co
プログラマが知っているとよい色(1)使い(JIS安全色) - Qiita
<この項は書きかけです。順次追記します。> This section is about to be written. I will add it little by little. 目次の前に(forward) この記事は、インターンシップの大学生の方に、「ゲームはするよりもゲームプログラムを書く方が楽しい」ということを説明した際に、その説明の一部として書いたものです。ゲームを卒業研究の題材にするなら、ゲームの中での色使いで、人による見え方の違いに配慮した改訂のあったJIS安全色(国際整合：ISO 3864-4:2011(Graphical symbols−Safety colours and safety signs−Part 4: Colorimetric and photometric properties of safety sign materials))を参考にするとよいよとい
CSS Grid Layout を極める！（基礎編） - Qiita
0. はじめに CSS Grid Layout（グリッドレイアウト）は、2次元レイアウト を、HTML/CSS を使って簡単・自由に操作できる、CSSの新しい機能です。 格子状のマス目のグリッドに好きな順番に配置したり結合したりすることで、様々なレイアウトが可能になります。 例えば、こんな簡単なHTMLで・・・ <body> <h1>タイトル</h1> <article>記事1</article> <article>記事2</article> <article>記事3</article> <article>記事4</article> <nav>ナビ</nav> <footer>フッター</footer> </body> CSSをちょっと書けば、こんなレイアウトが出来てしまいます！ 当記事では、こんなレイアウトを可能にする CSS Grid Layout の解説をしていきます。 尚、CSS
CSS Grid Layout を極める！（場面別編） - Qiita
0. はじめに この記事では、CSS Grid Layoutの基本は知っているという前提で、いろいろな場面を想定して更なる使い方を書いていきたいと思います。 この記事は4部構成の中の 場面別編 です。 CSS Grid Layout を極める！（基礎編） CSS Grid Layout を極める！（場面別編） ←これ 作成中：CSS Grid Layout を極める！（アルゴリズム編） 作成中：CSS Grid Layout を極める！（番外編） トラックの大きさを柔軟に指定したい (grid-template-rows / grid-template-columns) トラックの幅・高さの指定は grid-template-rows / grid-template-columns で行いました。 基礎編では px を主に使いましたが、他にも様々なものが使えます。そして、以下で挙げる値は自
[jQuery]inview.jsを使って横並び要素を順に表示させる方法 - Qiita
画面に表示されるタイミングでアクションを起こしたい時に便利な、inviewというjQueryプラグインがあります。 その要素の位置までスクロールしたらフェードインで表示する、といったエフェクトを簡単に実装出来るので大変便利に使っているのですが、横並び＋複数行の要素を順に表示させるのに手こずったので、その時に処理をメモしておきます。 やりたいこと 以下のイメージのように、画面内に表示されたタイミングで、横並び要素が順に表示（フェードイン）する。 ▼完成イメージ コード HTML jQueryとinview.jsを読み込みます。 <script src ="js/jquery.js"></script> <script src ="js/jquery.inview.min.js"></script> <div class="column"><!-- 全体を囲う包括要素 --> <div cla
![[jQuery]inview.jsを使って横並び要素を順に表示させる方法 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/322520a45cd7e8935098b40ca6b90980d282863f/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCalF1ZXJ5JTVEaW52aWV3LmpzJUUzJTgyJTkyJUU0JUJEJUJGJUUzJTgxJUEzJUUzJTgxJUE2JUU2JUE4JUFBJUU0JUI4JUE2JUUzJTgxJUIzJUU4JUE2JTgxJUU3JUI0JUEwJUUzJTgyJTkyJUU5JUEwJTg2JUUzJTgxJUFCJUU4JUExJUE4JUU3JUE0JUJBJUUzJTgxJTk1JUUzJTgxJTlCJUUzJTgyJThCJUU2JTk2JUI5JUU2JUIzJTk1JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz1jZjI4ZmVhZjA1ZWMxZjk1NTY1NjEyNDU5YzkwN2JjMA%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBub3F1YSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9YWJmYjZlY2RlZGY0ODA3YWQwOGIyZGYwODhhOGZiNDE%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D40659c3c1afd97cce9fff112a360a691)
【CSS3】@keyframes と animation 関連のまとめ - Qiita
はじめに animation プロパティと @keyframes を使うと、CSSだけでアニメーションの設定ができます。 簡単にアニメーションの設定ができるので、覚えると楽しいです。 そもそもアニメーションって？ アニメーションの意味をググると動画と書かれていますが、動画というよりは、動きまたは変化という意味で捉える方が理解しやすいかと思います。 この記事でも、アニメーションという単語を用いて説明しますが、動きまたは変化という意味で読んでください。 最初は @keyframes について見ていきましょう。 説明するときに英語の読み方も記載していますが、参考程度に見てください。 keyframes について @keyframes は、アニメーション開始から終了するまでどのようなアニメーションをするのか指定できるCSSの文法です。 @keyframes は、@規則のため、@から始まり、波括弧内
もし、HTMLのテキスト周りでデザイナーからこんなお願いをされたら... - Qiita
HTMLのテキストはPhotoshopのように融通が効かないから、デザイナーからの細かいお願いはだいたい断っている...なんてことありませんか？ モダンブラウザは色んなプロパティが対応してきているので、できることも増えています。 今回は、知っているといざというとき便利なテキスト周りのCSSを集めてみました。 「日本語、文字詰めできないかな？ほら、このカタカナとかキモい。。」 「Webで文字詰めだと？無理なんだよあきらめな！」なんていう時代はもうとうに過ぎ去っています。OpenTypeのフォントであれば、日本語でもちゃんと文字詰めできるんです。 .class { -moz-font-feature-settings: "palt"; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } ↓こんなかんじで
スマホでソフトウェアキーボードを表示させない。 - Qiita
jqueryのdatepickerをスマフォで使っていてキーボードが邪魔だから非表示にしたい！ってことで inputタグに対してreadonlyをつかって読み込み専用のボックスにしてやることで対応。 これによって値が送れるかつ、スマフォのソフトウェアキーボードを出さないということが可能です。 ただし、入力はjsからしかできなくなります。 参考タグ <input type="text" name="date" value="0000-00-00" readonly="readonly" /> Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use
結局「下からのスクロール位置」を取得するにはどうすればいいのか - Qiita
最近の Web サービスでよくある「下までスクロールしたら次のコンテンツを読み込む(オートページャライズ)」を実装するためには、当然ですが「下までスクロールしたかどうか」を検出する必要があります。 これが簡単そうに見えて意外と面倒臭く、自分も毎回思い出すのに時間がかかってしまいます。 御託はいいから結論を先に言え これでよさそう function getScrollBottom() { var body = window.document.body; var html = window.document.documentElement; var scrollTop = body.scrollTop || html.scrollTop; return html.scrollHeight - html.clientHeight - scrollTop; } 以下、解説です どんな値が取得できる
イマドキのJavaScriptの書き方2018
PySpa統合思念体です。これからJavaScriptを覚えるなら、「この書き方はもう覚えなくていい」（よりよい代替がある）というものを集めてみました。 ES6以降の難しさは、旧来の書き方にプラスが増えただけではなく、大量の「旧来の書き方は間違いを誘発しやすいから非推奨」というものを作り出した点にあります。5年前、10年前の本やウェブがあまり役に立たちません。なお、書き方が複数あるものは、好き嫌いは当然あると思いますが、あえて過激に1つに絞っているところもあります。なお、これはこれから新規に学ぶ人が、過去のドキュメントやコードを見た時に古い情報を選別するためのまとめです。残念ながら、今時の書き方のみで構成された書籍などが存在しないからです。 たぶん明示的に書いていても読み飛ばす人はいると思いますが、すでに書いている人向けではありません。これから書くコードをこのスタイルにしていくのは別にいい
CSSアニメーションをワンポイントで取り入れてリッチなサイトにしよう - Qiita
エイチームライフスタイルアドベントカレンダー2017、9日目は株式会社エイチームライフスタイルのデザイナー @chika_1127 が担当します。 今回はCSSアニメーションについてのご紹介です。 本記事についての注意書き 今回の記事はCSSアニメーションの基本的な書き方を知っている方向けです 基本的なプロパティや使い方などは省略します 基礎的な記述について知りたい方は下記のページがオススメです CSSアニメーション 入門 CSSアニメーションの使いどころが分からない問題 ところでみなさん、CSSアニメーションをどういう場面で使っていますか？ 特設サイトやLPで使うもの、といったイメージがありませんか？ 世の中にはこれもCSSアニメーションなの！？ と驚くような複雑なCSSアニメーションなどもありますが、 そればかりがCSSアニメーションではありません。 プロモーションサイトのようなギミッ
プログラマーから見た、SCSSの正しい(かもしれない)使いかた - Qiita
SCSSとは SCSSというのは、CSSのアレなところを何とかしようという目的で作成されたメタ言語です。詳細は省略します。 なにそれ？ ってかたは、コチラなどがわかりやすいのではないかと思います。 CSSのメタ言語Sass(SCSS)、LESSの完全入門 でですね。 ここで大事なのは、こいつは要するにCSS周りの技術ですので、つまるところは基本「デザイナーさんが使う」ものである、というところです。 彼らは概して、非常におおらかで、健康的で、寛容です。私たちサーバーサイドエンジニアのように、細かいことで「こんな仕様は許されんな！」「なんだよこの仕様設計したヤツって○○じゃねーの？」などとイラついたりしません。 なので、あんな欠点だらけのクソ規格であるCSSにも、特に気にしたりしないらしいのです。 ところがやはり、中には「CSSのそーゆーところって、やっぱ問題だよねー」って思う人々もいたらしく
srcset属性について - Qiita
とりあえず3行で srcsetはHTML5で策定された新属性 この要素はブラウザのスクリーン要件(幅、高さ、ピクセル密度)に応じて、異なる画像を読み込む事ができる IEでは使うことが出来ないので注意(http://caniuse.com/#search=srcset) srcset属性について詳しく 詳しく書いてあり、良い記事です。 srcset と sizes エリック・ポーティス 文と絵 鈴木丈 訳 個人的には、印象に残ったのは グリンピースおいしい^q^ でした メリット Retinaディスプレイ用に画像を切り替える ウィンドウサイズに合わせて画像を切り替える ウィンドウサイズに合わせて動的に画像を切り替える ->環境ににあった最適な画像をブラウザが選んでくれる（余計な画像は読み込まない） 引用元:HTMLのsrcsetを使って画像をレスポンシブにRetina対応させてみよう デメリ
CSSだけで横メニューをつくる。但し、ボックスからはみ出たリストはボタンにして、そのボタンを押すと縦のリストメニューが出る - Qiita
/* ========================================================== */ /* ここから下がメニューの設定 */ /* ========================================================== */ /* メニューのON/OFFを保存する為のチェックボックス 非表示 */ #menuOn{ display : none } /* 隠しメニューを表示したとき用のスペーサー */ /* なのでデフォルトでは非表示 */ #menuOn + menu + div.spacer{ display : none; } /* 隠しメニューを表示時のメニューの設定 */ /* absolute指定を行い、高さも与える */ #menuOn:checked + menu{ height : calc(100
【デザイナー向け】これからAndroidのデザインをする人へ - Qiita
はじめに 自己紹介 私は日本にAndroidが上陸したAndroid 1.6の時代(2009年頃)からAndroidの開発者としてAndroid7系になった今も(執筆時2017年)Androidエンジニアを続けています。 Androidの歴史をずっと側で見守り続けた私がエンジニア目線で思っている事を述べるので、これからAndroidのデザインをするデザイナーに見て頂きたいです。 ※ この記事の内容は一個人の意見で所属先は一切関係ありません 一番言いたいこと まず、普段iPhoneを使っているデザイナーは最新もしくは1つ前のOSが入ったAndroid端末をメイン端末とまではいかなくても2台持ちにして常用して下さい。 ハッキリ言ってこれが全てです!! 良さ気なUIのアプリを一通り入れて数十分触るだけでは全く意味がありません。 Androidの良さは通知やIntentと呼ばれるアプリ間の密な連携
[社内新人向け]Gitで使ってほしくないコマンド - Qiita
社内に新人が増えてきたので、弊社のWeb開発でのGitのゆるーい利用方針をまとめます。 本当はネガティブなことばかり書かずに、「覚えて欲しいコマンド、使ってほしくないコマンド」というタイトルにしたかったのですが、予想以上に長くなりそうなので分けます。 (追記：第二弾できました) → [社内新人向け]Gitで絶対にオススメなプラグインや設定3つ 社内環境 Web系開発がほぼ100％ ブランチワークはGitflowをベースにしたプルリク駆動開発 少人数チームなので、エンジニアは全員LinuxのCUI操作をできて欲しい（vagrantや開発サーバ上の操作など） GitのGUIクライアントは、SourceTreeとGithub公式を試しましたが、初学者が使うと却って危ない挙動をしてしまうケースがあったので、全員CUI操作をしてもらうことにしました CIツールはまだ導入できず。各サーバーへのデプロイ
![[社内新人向け]Gitで使ってほしくないコマンド - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/c02b564a55050853439b0f6986d3aa42501396d4/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCJUU3JUE0JUJFJUU1JTg2JTg1JUU2JTk2JUIwJUU0JUJBJUJBJUU1JTkwJTkxJUUzJTgxJTkxJTVER2l0JUUzJTgxJUE3JUU0JUJEJUJGJUUzJTgxJUEzJUUzJTgxJUE2JUUzJTgxJUJCJUUzJTgxJTk3JUUzJTgxJThGJUUzJTgxJUFBJUUzJTgxJTg0JUUzJTgyJUIzJUUzJTgzJTlFJUUzJTgzJUIzJUUzJTgzJTg5JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz00YzYzNDI4NzA3YjAxYTI4Y2QzMzAyOTFjYzQzMTkxYQ%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDB6YXJhbW1lJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1mZDc5M2U2Y2U4OTg4ZTM4OTI2YmE3NDkyOTc1MDJkZQ%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Dc30c566ec78e040079beb6919643238f)
5分で理解する React.js - Qiita
いまさらですがReact（react.js）をはじめてみました。 Virtual DOMばかりが話題にあがるReactですが、それにとらわれていると理解が進まない、と言うかReactで理解しなければならないのはVirtual DOMではないことがわかりました。 Reactについての良い資料はすでにたくさんありますので、末尾に参考資料としてあげています。 このエントリは自分がReactのチュートリアルをなぞりながら書いた自分用のメモですが「1エントリで概要をちゃちゃっと理解したい」という方に役に立ったら良いな、とも思っています。 Reactチュートリアル http://facebook.github.io/react/docs/tutorial.html 基本 JavaScriptで書かれたライブラリ。react.jsをインクルードして使う。 （MVCで言うところの）Viewのみを担当する。
早く・それなりの UI を実現する React コンポーネントセット 16 選 - Qiita
これまで、開発者が「早く・それなりの UI 」を実現するために、Bootstrap などの CSS フレームワークが重宝されてきました。 しかし今では、React などのライブラリを使って UI をコンポーネント化するようになってきています。 React であっても、事前に CSS フレームワークを読み込んでおき、クラス名を付与することでこれまでと同じように使うことができます。 ただ、既存の CSS フレームワークは内部で jQuery を使用していることが多いので、React と jQuery を共存させるか、jQuery 部分を自前で実装しないといけません。 そこで React で「早く・それなりの UI 」を作れそうな React コンポーネントセットを手当たり次第に調べてみました。 Note: Web 向け UI の コンポーネントのみとなっています。React Native や
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://qiita.com/Dronetube/items/ac02a23eafe7d09f3b57