いずれもMITライセンスで公開されていますので、個人・商用問わず利用可能です。 Slick.js Slickスリック.jsは簡潔なコードで実装できるのが特徴のモバイルフレンドリーなカルーセルライブラリです。機能は少なめですが、ナビゲーションや表示するスライド数を変更するといった基本的な機能は備わっています。jQueryプラグインのため実装にはjQueryを読み込む必要があります。タッチ・スワイプ操作にも対応しています。ReactやVue向けのモジュール、TypeScriptのサポートは公式で提供されていませんがOSSで存在します。 このJSライブラリの基本的な実装と、アニメーションをフェードに変えた作例を用意しました。 基本の作例 サンプルを別ウインドウで開く コードを確認する <div class="slick carousel"> <div>1</div> <div>2</div> <
こんにちは。ZOZOTOWN部フロントエンドチームの菊地（@hiro0218）です。 2021年3月、ZOZOTOWNは10年ぶりのリニューアルをしました。この記事では、そのリニューアルで再考したCSS設計について紹介します。 背景 今回のリニューアルでは、ウェブとアプリが部分的に共通のデザインになりました。 アプリ ウェブ このデザイン刷新には、CSSの大規模変更が必要です。チーム内で検討を重ね、最終的に、大きく書き換えるのであればコンポーネント駆動開発1ができるようにCSS設計を見直すべきという結論に至りました。 CSS設計で特別に考慮する点 現在、ZOZOTOWNのフロントエンドは、「Classic ASP」から「React」へのリプレイスを進めています。新規開発や変更のタイミングで、Classic ASPに依存した実装をReactへ改修します。 ただ、今回のリニューアルではClas
こんにちは、フロントエンドエンジニアのぜんちゃんです。 最近はアニメーション表現を増やすために、canvasの勉強を始めました。そこで、今回はcanvasやJavaScriptの基本技術を使って、円がランダムに動くパーティクルアニメーションを実装したいと思います。 今回作るアニメーションはこちらです。 円を作成・描画する canvas要素を作成し、そのcanvas内に円を作っていきます。 まずは一つだけ作りたいと思います。 <canvas id="canvas"></canvas> // キャンバス要素を取得 const canvas = document.getElementById('canvas'); // キャンパスに描画するコンテキストを取得 const ctx = canvas.getContext('2d'); // キャンバスサイズをwindowサイズに canvas.wi
CSSのgapプロパティーは余白を指定できる新しめの手法です。余白といえば、marginプロパティーやpaddingプロパティーを思い浮かべる方が多いと思いますが、CSS GridやFlexboxでgapプロパティーを使うと柔軟にレイアウトを組めます。もともとgapプロパティーはCSS Gridでのみ利用できていましたが、macOS Safari 14.1およびSafari on iOS 14.6からFlexboxでもgapプロパティーが使えるようになりました。 この記事ではFlexbox、CSS Gridで利用できるgapプロパティーを活用したレイアウト手法とそのメリットを紹介します。今までmarginプロパティーで要素間の余白を調整していたものもgapプロパティーで柔軟に対応できる場面もあります。なお、下記サンプルでmarginプロパティーは一切使っていません。 サンプルを別ウインドウ
現場で使えるFlexboxレイアウト12選Update2023.05.12Release2021.06.24Coding HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する 現場で使えるFlexboxレイアウトを12パターン紹介します。flexboxを紹介する記事はたくさんありますが、知識のみで実例付きで紹介されているページはあまり見かけなかったので、本記事にて詳しく紹介していきます。 flexboxに慣れていない方だけではなくコードを短縮化させたい方も対象の内容となっております。ぜひご一読ください。 flexboxを使った横並び1行レイアウトflexboxを使った横並び1行レイアウトカードUIでよくある横並び1行レイアウトのFlexbox実装。同じ横幅のカードを等間隔で配置するもので、間の余白ももちろん等間隔。これを使う機会は多いので確実
margin-bottomではなくmargin-topを使う派である旨をツイートしたら理由を尋ねられたので、それに対する回答です。大きくは次の3つです。 末尾の要素の存在が任意である場合が多いため Stackレイアウトとの取り合わせやすさのため 隣接セレクターを使った場合分けができるようにするため CSS、基本コンポーネントの上にマージン取る派と、下にマージン取る派がいると思うですけど、自分は今までずっと下で。というのは、その方が直感的だと感じるからなんですけど、見出しの下って結構縮めるよね？それを上マージンでやると結構頭こんがらがらない？って思うんだけどどうなんだろう — Takazudo (@Takazudo) January 12, 2021 上です — 全部入りHTML太郎 (@_yuheiy) January 12, 2021 なぜですか? — u (@uknmr) Januar
/************************************ ** 比較表 ************************************/ /* 比較表全体 */ .compare-box { display:-webkit-box;/* 配置 */ display:-ms-flexbox;/* 配置 */ display:flex;/* 配置 */ max-width:600px;/* 横幅 */ margin: 0 auto 2rem;/* 余白 */ border-radius:4px;/* 角丸 */ box-shadow: 0 1px 3px rgba(0, 0, 0, .2); /* 影 */ background: #fef9ed; /* 背景色 */ } /* 左のボックス、右のボックス */ .compare-box .compare-left-
こんにちは。エンジニアの小椋です。 最近になって初めてTypeScriptを使う機会があり、TypeScriptもっと使おう！😠😠😠と思ったので、今回はVue.jsでTypeScriptを使う方法を紹介したいと思います！
昨今、機械学習の流行とともに、Webサイトからデータを収集するスクレイピングの技術が必要とされています。 しかし、スクレイピングといっても、「どのフレームワークで開発すべきか」や「スクレイピングの注意事項」といった部分がわかりにくく、困っている人もいるでしょう。 そこで今回は、初心者の方に向けたPythonを使用したスクレイピングの方法と応用方法について紹介していきます。 AIやデータサイエンスを学びたくてPythonを学び始めたけど 「独学ではやっぱり限界がある」 と不安を感じた方にオススメしたいのが、Aidemy Premium Plan。 AIに関する幅広い種類の講座や徹底したコーチング指導が特徴です！ 実務を見据えてPythonをがっつり学習していきたい方は、まずは無料の「オンライン相談」に参加してみてください。 また、Aidemy Premium Planのメリットやデメリットな
<div class="menu cross menu--1"> <label> <input type="checkbox"> <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <circle cx="50" cy="50" r="30" /> <path class="line--1" d="M0 40h62c13 0 6 28-4 18L35 35" /> <path class="line--2" d="M0 50h70" /> <path class="line--3" d="M0 60h62c13 0 6-28-4-18L35 65" /> </svg> </label> </div>
最近新しく追加された position の新しい値 sticky が場合によってはすごく便利なので記事を書いてみます。 対応ブラウザがまだあまり多くないので実用性は乏しいかもしれませんが、今まで JavaScript の力を借りなきゃ出来なかったことがたったの2行の CSS で出来てしまう魔法みたいな position の値です。 position: stickyMDN が説明が詳しいので貼っておきます。 参考：position - CSS｜MDN 簡単に言うと「スクロールでその位置まで来たらそれ以降は fixed する」みたいな感じです。 サンプルこの記事内で「position: sticky」や「サンプル」など h2 要素に position: sticky をかけています。対応ブラウザであれば h2 要素が fixed しているはずです。 HTML<h2 class="h2-stic
position:sticky;とは 一般的にスクロールに応じた要素の固定といえばposition:fixed;を使ったり、jQuery（JavaScript）などを使用してスクロール位置を取得してアレコレするイメージですよね。 そんなときはposition:sticky;を使ってみましょう。CSSのみでスクロールに応じて固定・固定解除ができるようになります。relativeとfixedの中間のような値です。 ブラウザ対応状況 残念ながらIE・Edge・Operaは非対応 ブラウザ対応状況はCan I useから確認すると、IEとEdgeとOpera Miniは全滅、Chromeはバージョン56から、Androidは5.0から対応。モダンブラウザに絞れる案件なら普通に使えそうなCSSですね。 デモ・ソースコード 言葉で説明しづらいのでサンプルページを作成してみました。まずはこちらをご確認く
少し前の記事ですが、JQuery Advent Calendar 2017 に寄稿させていただきます。 なにがしたい？ たとえばサイドバーに置いたローカルメニューや広告エリアなどの特定のエリアをスクロールしてもずっと表示しておく、というのをよく見かけます。 基本は「スクロールがその要素の位置を超えたら position を fixed に変更する」だけで考え方はとてもカンタンなのですが、これをそのままそれだけ実装するとどうなるか。1つは、fixed にしたことで親要素からの束縛から解放されてとても伸び伸びとした要素になってしまうことがあります。もう1つは、前後関係というしがらみからも開放されるため後続要素が詰められて位置が変わってしまうことがあります。 1つ目の問題には、予めCSSでフローティングした後のサイズを書いておく、という手法がメジャーですが……、これ、ちょとめんどくさい。というよ
はじめに モーダルウィンドウを実装する際に便利な「Pure CSS modal」をご紹介します。 気になっていたので制作で使ってみたところ、かなり使いやすいと感じました。 JavaScriptを使用せずCSSのみで作られているので、実装もかなり楽にできるはずです。 公式DEMOはこちら 使ってみる まずダウンロード こちらから 設置する CSSの読み込み パスは適宜変えて下さい。 <link rel="stylesheet" href="css/modal.css"> モーダル部分 <div class="modal"> <input id="modal-trigger" class="checkbox" type="checkbox"> <div class="modal-overlay"> <label for="modal-trigger" class="o-close"></lab
<!-- テキストの場合 --> <p class="tel">00-1234-5678</p> <!-- 画像の場合は、alt属性に電話番号を入れておきます。 --> <p class="tel"> <img src="https://placehold.jp/150x150.png" alt="01-1234-5678"> </p> $(function() { $('.tel').each(function() { //.tel内のHTMLを取得 var str = $(this).html(); //子要素がimgだった場合、alt属性を取得して電話番号リンクを追加 if ($(this).children().is('img')) { $(this).html($('<a>').attr('href', 'tel:' + $(this).children().attr('alt'
マッサージ店でマッサージを受けるよりも浜松町出張マッサージの方が魅力がある理由をこれから2つほど挙げます。1つ目の魅力は、自宅に居ながら電話かインターネットで簡単に予約をすることができる点です。この自宅に居ながらというのがポイントです。マッサージ店を利用するとなればそこまで行く必要がありますが、浜松町出張マッサージならばそれが無くなります。マッサージ師の方が依頼主の元までやって来てくれます。つまり、自宅にマッサージ師を呼ぶことができるわけです。そのためわざわざ外出する必要もないため、外出する際の支度の準備も必要なくなります。 浜松町出張マッサージはマッサージ師の方が自宅にやって来てもらえますので、寝間着のままでいられます。マッサージ師が自宅にやって来たらお布団かベッドでマッサージの施術をすぐに受けられます。そしてマッサージの施術が終わった後は、寝間着なのですぐに眠ることができます。これが2
Result メディアサイト等でまだ見かけるやつ。 :hoverで一時停止するようにしています。 css @keyframes ticker {/*アニメーション設定。右から左に流す、を繰り返す*/ 0% { transform: translate(0, 0); visibility: visible; } 100% { transform: translate(-100%, 0); } } .ticker-wrap {/*ティッカーを包括している親要素*/ position: fixed; bottom: 0; width: 100%; overflow: hidden; height: 2rem; background-color: rgba(0, 0, 0, 0.9); padding-left: 100%; box-sizing: content-box; } .ticker-w
シンプルなHTMLで、レスポンシブ対応の六角形のヘキサゴン レイアウトを簡単に実装できるスタイルシートを紹介します。 JavaScriptは完全に不要で、CSS Gridを使用してdiv要素にclassを付与するだけで実装できます。 Hexi-Flexi Grid Hexi-Flexi Grid -GitHub Hexi-Flexi Gridの特徴 Hexi-Flexi Gridのデモ Hexi-Flexi Gridの使い方 Hexi-Flexi Gridの特徴 JavaScriptは必要なし、CSSのみで実装。 六角形のアイテムの高さ・幅、列・行は自由に設定。 セル、列、行のモジュラー形式。 背景画像を自動入力する機能をサポート。 サポートブラウザ CSS Gridで実装するため、サポートブラウザは下記の通りです。 Firefox 56+ Chrome 61+ Safari 10.1+
WEBサイト制作でコーディングを行う際、フォントサイズを一般的な単位「px」や、「em」「rem」「%」等で指定することが多いと思います。 レスポンシブWEBデザインの案件でコーディングを行うときは、基本的にメディアクエリを使用してブレークポイント毎にフォントサイズを振り分けて記述するのが基本になっていると思います。 「メディアクエリの記述で振り分けを行わずに、ビューポートの幅に応じてフォントサイズを可変に対応する方法はないのか？」という疑問をもっていましたが、意外と知らないフォントサイズの単位、「vw」「vh」という書き方でビューポートの可変に柔軟に対応できるので、簡単に説明させていただきます。 vw・vhって何？？ vw・・・viewport width。ビューポートの幅に対する割合です。 vh・・・viewport height。ビューポートの高さに対する割合です。 画面の横幅全体を
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
