CSSやHTML、JavaScript等で、似たような挙動をするタグや方法で何が違うのかを解説する・「this vs that」
あまり知られていないかもしれない、CSS-in-JSを実装するライブラリでできる5つの便利なテクニック | コリス
CSS-in-JSはJavaScriptを使用してコンポーネントをスタイルするテクニックです。 Reactには従来のCSSに加えて、スタイリングのオプションとして、インラインスタイルとCSS-in-JSがあります。 CSS-in-JSを実装するライブラリでできる5つの便利なテクニックを紹介します。 5 things you can do in CSS-in-JS that you didn’t know about originally published at LogRocket 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. 他のスタイル付きコンポーネントを参照 2. ライブラリの機能をJSSで拡張 3. 複数のアニメーションをキーフレームで連結 4. グローバルスタイルを宣言 5. スタイルによるコンポーネ
あれ、いつも書いてるな～というJavaScript の小技集 | バシャログ。
いい加減髪を切りたいminamiです。 JavaScriptでいつも書いてるな～という処理や、知っていると便利なTipsを簡潔に集めた記事を見てほお～と思ったものがいくつもあったので抜粋してみました。 ※追記1： ご指摘がありましたので一部修正しました。「配列をソートする」ではなく「配列をシャッフルする」でした。 ※追記2：「HTMLをエスケープする」のソースがまちがって表示されていました。修正しました。 ※追記3：予想以上に反響が大きく、多数ご指摘を受けてしまいました。よく使う処理の書き方もいろいろあるんだな～という参考程度にご紹介したのですが、参照元の記事の内容の検証が不十分なまま紹介してしまい申し訳ありませんでした。いろいろと勉強になりました！ 45 Useful JavaScript Tips, Tricks and Best Practices 配列からランダムで値を取り出す v
レスポンシブWebデザインのサイトでデバイスやウインドウ幅によってJavaScriptの処理を条件分岐させる | 福岡のホームページ制作会社 | シンス株式会社
こんにちは、福岡のホームページ制作シンス株式会社の越水です。 レスポンシブWebデザインでホームページ制作を行うとき、「スマホの時だけJavaScriptの処理を加えたい」なんてことあったりしますよね。 今回はそんな時によく使うJavaScriptの条件分岐について書きたいと思います。 レスポンシブWebデザインではウインドウ幅、またはUA（ユーザーエージェント）によって処理を分けることができる例えばスマホでホームページを見た時だけ動作させたい画像スライダーがあったとします。 何の情報をもとに条件分岐させればうまくスマホだけで動作させることができるでしょうか。主に2通りの方法があります。 ウインドウサイズの横幅によって条件分岐使用デバイスのUA（ユーザーエージェント）によって条件分岐前者はCSSのメディアクエリーを使うことでウインドウサイズによってレイアウトを変更させるのと似たような方法で
「YouTubeを埋め込んでも重くならないようにする方法」がだいぶ微妙だった（ので書き直した）
ウェブページに大量のYouTube動画を埋め込むと読み込みが遅くなるのを改善する方法が話題になっています。 複数のYouTube動画を埋め込んでも重くならないようにする方法 - オバサンになりたい。(www.obanari.com)YouTubeを埋め込んでも重くならないようにする方法がめっちゃ良かった - NO TITLE(shiromatakumi.hatenablog.com)考え方としては、元々 iframe 要素が埋め込まれているところを img 要素によるサムネイル表示に変更して、「クリックされたら iframe 要素に置き換え、かつ autoplay オプションで再生を始める」というやり方ですね。 この発想自体は良いものだと思うのですが、元記事も、その改良版のいずれも実装方法には問題があります。 HTML としては単なるサムネイル画像のみなので、スクリプトが無効だとなにも起こ
Progate(プロゲート) | Learn to code, learn to be creative.
プログラミング学習サービス「Progate」のログインページです。
海外のwebデザインまとめ。実用的コードスニペット35選！ | webcode(ウェブコード)
日本で使われているwebデザインの技術のほとんどは、海外の1~3年前の流行であるということがよく言われます。 今回は、今この瞬間に海外のデザイナーが開発しているコードスニペットを紹介して、より最新のトレンドを活用してもらえないかと思っています。 今のwebデザインのトレンドと、そのコードスニペット(部分的なコード)を紹介していきます。 コピペでも使えるように、主にCODEPENからの紹介になります。 ※一部、スマホでは確認できないものがあります。ご了承ください。 レスポンシブデザイン レスポンシブデザインというのは、2013年から本格的に広まり始めたデザイン手法で、表示幅に応じてデザインを変更するというものです。 このサイトもレスポンシブデザインを導入していますが、このことを日常的には「レスポンシブ対応」「スマホ対応」などとも言ったりします。 それでは、レスポンシブデザインのコードスニペッ
Swiperの使い方・解説【日本語訳 】スライダー設置方法 ｜ WEBTEQ
強力そうなスワイプ対応のjavascriptスライダーの使い方です。Jqueryオンリーでないので、フリクションしにくいのも利点です。 ※Jquery系スライダーならflexsliderも翻訳しましたよ。Jqueryでどうしてもいきたい場合にはいいかもね。 Swiperの素晴らしいところは入れ子でスライダーが組めるところですが、こんな使い方をするサイトを考えるのも難しいってほど複雑なことができます。 使い方は本サイトを見ればだいたいわかるでしょう。とにかく使ってみないと掴めないヤツですね。 【Swiper Usage and API】本サイトの使い方ページ（英語） http://www.idangero.us/sliders/swiper/api.php しかし英語じゃあ読みにくいよ。オプションを日本語訳してみました。設置のしかたは本サイトで大体わかると思いますが、どうオプションを組み合わ
【最新バージョン7.3対応】jQuery無しで動く神スライダー［Swiper］が便利すぎて。
今日紹介する［Swiper］は、レスポンシブ対応サイトなどで真価を発揮するJavaScriptベースの「コンテンツ・スライダー」です。 初見の感想は「反応速度が早く軽量でサクサク動く」という印象。 レスポンシブにも対応済み。マウスのドラッグ操作やタッチコントロールのスワイプにも反応して操作性が良く、文句ナシのクオリティでした。 機能が豊富で、ざっと紹介すると以下のとおり。 レスポンシブ対応 フルスクリーン化OK ページネーション設置 縦方向のスライド カルーセル・モード 各スライドの位置を固定しない「フリーモード」対応 複数行のスライドに対応 縦方向・横方向の「入れ子」に対応 マウスのドラッグ操作に対応 スクロールバー表示 ナビゲーションボタン表示 無限ループ対応 フェードイン・フェードアウトによるスライドの切り替え 3D キューブ・エフェクト 3D カバーフロー・エフェクト キーボード・
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML、CSS、JavaScriptの機能をシンプルに教えてくれる・「simpl.info」