こんばんは、最近 Notion ラボというメディアを立ち上げました、Notion アンバサダーの円谷 です。 先日、動画編集者のためのスクールであるデジハク様のイベントに登壇してきました。タスク管理をテーマに、 なぜタスク管理をするのか タスクとプロジェクトの違い Notion のデータベース機能を使ったタスク管理の方法 などについて1時間みっちりお話させていただきました。100名以上の方の前でお話するのは久しぶりで少し緊張したのですが、事前準備通りいい感じに話せたような気がします。聞いてくださった方ありがとうございました。 🔥 昨日はデジハクさまのイベントにて Notion を活用したタスク管理術についてお話させていただきました！ Notion のデータベースの使い方から、普段動画では発信しないような考え方の部分までがっつりお伝えしてきました！… https://t.co/J9fffj
こんにちは、「トリセツ」担当のマルです。 今回は、Acrobat Proの「アクションウィザード」機能を使って、PDFの設定作業を簡略化する方法についてご紹介します。 なお、今回使用するソフトはAcrobat Pro DCです。 アクションウィザードの設定方法 僕が個人的によく行う操作を例にして説明します。 新規に作成したPDFを開いたときに、デフォルトの設定だと「幅に合わせる」状態になっているため、ページ上部しか見えません。これを、ファイルを開いたときページ全体が見える状態にする操作を行います。 PDFファイル単独で行う場合は、「プロパティ」（ショートカット「Ctrl」（Windows）or「Command」（Mac）＋「D」）の設定を行いますが、今回ご紹介する「アクションウィザード」の機能を使うことによって、この一連の操作をまとめて記憶し、ワンクリックで実行することが可能になります。
Swiperスライダーの実行関数外でスライド位置を動的に変更したい。 本記事ではこのような悩みを解決。 実装例を元に解説します。 実装サンプル See the Pen Untitled by Kohei (@kouk05) on CodePen. 実装サンプルです。 スライダー上のボタンを押すと、任意のスライド位置へ動的に変更されます。 実装コードは以下の通りです。 slideToメソッドを使おう const swiper = new Swiper(".swiper", {}); function click01() { swiper.slideTo(0); } function click02() { swiper.slideTo(1); } function click03() { swiper.slideTo(2); } 動的にスライドを変更するコード例です。 slideToメソッド
コーディングする中で、「都道府県の形に沿ってリンクを設定したい」「リンク範囲をひし形にしたい」など、複雑な形のリンクが出てきて困ったことはありませんか？ aタグで普通にリンクを付けるだけだと、リンク範囲が長方形になるので意図しないエリアまでクリックできてしまい、思うようにいかないことも多いですよね。 そこで本記事では、自由な形でリンク範囲を設定する方法をご紹介したいと思います。 お手元のデザインデータがビットマップデータの場合と、ベクターデータの場合で対応方針が変わります。 ビットマップデータ（jpgやpng）の場合 ⇒クリッカブルマップで作成する ベクターデータ（リンク範囲ごとのパスを取得できるもの）の場合 ⇒SVGで作成する 対応方法2つを、メリット・デメリットも交えてご説明していきます。 実装サンプルもご用意しましたのでぜひご覧ください。 「Image Map Generator」で
写真が並んでいてクリックすると写真が拡大され、前後の矢印でスライドを切り替えられるタイプのフォトギャラリーで有名なライブラリには『Lightbox』などがありますが、スマホでのスワイプには対応していません。 そしてスワイプ対応のフォトギャラリーが実装できるのが『PhotoSwipe』になります。 今回は『PhotoSwipe』の使い方について解説していきます。
ちょうどいいモーダルってなかなか見つからないんだよな、と探している人は要チェックです。シンプルで操作性もよく、アクセシブルに実装する超軽量の単体で動作するJavaScriptのライブラリを紹介します。 WAI-ARIAガイドラインに準拠したモーダルダイアログを実装。 1.9kbの超軽量のJavaScriptライブラリ。 aria属性でモーダルの開閉を切り替える。 オーバーレイをクリックすると、モーダルを閉じる。 escボタンを押すと、モーダルを閉じる。 モーダル内のタブをフォーカス。 モーダル内の最初のフォーカス可能な要素にフォーカスを合わせる。 モーダルを閉じた後、フォーカスされた要素の状態を保持。 Micromodal.jsのデモ デモでは実際の動作を楽しめます。 モーダルを閉じるトリガーは、Closeボタン、Xボタン、オーバーレイのクリック、escボタンが用意されています。
エヴァンゲリオンと同じ1995年10月生まれの中田です。 早いもので今回で3回目のブログになります。 前回までのブログではthree.jsやシェーダー等、WebGLのことばかり書いていた私ですが、もう少しマニアックではないといいますか、多くの方に読んでいただけるようなブログを書こう！と思い、今回はMicromodal.jsを使ったモーダルの作り方についてまとめることにしました。 Micromodal.jsとは Micromodal.jsは、a11y(Webアクセビリティ)に対応したモーダルライブラリです。 このa11yは、W3C(World Wide Web Consortium)という非営利団体が行っているWAI(Web Accessibility Initiative)という取り組みの中で、日々標準化と議論がされています。 Micromodal.jsはa11yに対応しているということで
モーダルウィンドウを実装したい、でもライブラリ使うほどの要件ではない。といった時に使える自前でパパっとモーダルウィンドウの実装。##やりたいこと- 要素（ボタンやaタグ）をクリックしたらモーダルウィンドウが表示される- モー... でも、デモページが無い（シャレじゃないです）。なら作るしかない! 作ってみた 順を追って解説されているので勉強しつつ、デモページで実装したのは一番最後の例の、 モーダルウィンドウ下のコンテンツをスクロールさせたくない場合 若干デザイン調整しましたが、基本的にそのまんまです。 HTML、CSS(SCSS）、JavaScriptの記述は元記事を参照してください。 デモページ PCのIE、Safari、Firefox、Edge、Chromeでも問題なし！ iPhoneのSafariでもモーダルの背景が動かない。すごい！ もちろんAndroidのChromeでも問題なし
display: flex; を使用したレイアウトを作成したとき、「flexアイテムの配置を変更したい」と思うことはありませんか？ そのようなときは order プロパティを使用しましょう。数値を指定することで簡単にflexアイテムの配置を決定できます。 この記事では order の使い方を解説します。 プログラミング学習でこのような経験はありませんか？ 目標に向けて何を学べば良いかわからない調べても解決策が見つからない現場レベルのスキルが身につくのか不安これらの悩みは、学習環境を整えることで全て解決することができます。 ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。 なんでも相談できる専属メンターいつでも技術相談ができるプロ講師元IT企業CTO監修のカリキュラム条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。 ただし、
こんにちは、ユアサです。 以前、長文テキスト対策についての記事を書いたことがありました。その記事では紹介し忘れていましたが（というより最近知ったのですが）、テキストが改行・分割された時、テキストの改行位置にある文字のパディングや装飾を補間するプロパティbox-decoration-breakについて、今回の記事で具体的な使い方を交えて紹介したいと思います。 長文テキスト改行時に起こる現象について 以前の記事で紹介した長文テキスト対策について、親要素をはみ出さないように改行させる方法がありました。対策ができたのはいいですが、まだ解決できていない問題があります。「背景のついたテキスト」です。 テキストの背景に色や画像を実装させる際、テキストの背後にのみうまく表示したい時はブロック要素であるpタグではなくインライン要素のspanタグを使ったりするかと思います。しかしこれを実装しようとしたことのあ
見出し周りでたまに見かけるんですが、行（幅100%）ではなく、テキストの後ろにだけ背景色を敷きたい場合、どうしたらいいのか？ HTMLは？ CSSは？ 調査してみました！ とちょっとふざけてスタートしましたが、改行が入った場合も崩れない方法を模索します。 その1：デフォルト（pタグにbackground-color指定） 普通の普通にpタグにbackground-colorを指定してみます。 <p class="text-background-test01">1行だけのテキスト</p> <p class="text-background-test01">複数行のテキストの場合はどうかな？改行してもちゃんとなっていてほしいな？どうかな？</p> .text-background-test01 { font-size: 2.5rem; font-weight: 600; line-height
cms更新が入るページ では、LPや静的ページに比べ、考慮することが多々あります。 コーディングをお願いする人への確認用としてその辺のtipsをまとめました。 毎回、個別にお願いするより記事にした方が早いなと。 こんなケースをカバーしましょう、という記事です。 想定されたテキスト量より大幅に多かった デザインより要素が少なかった 間違ったサイズの画像が登録された エラーの時の対応 CMS化出来ないマークアップ なお本記事のhtmlとcssはほとんど、AI Code Editorの「Cursor」に書いてもらいました。 VSCodeを使ってる方なら、インターフェースはほぼ同じなので、移行もすんなり行けてお勧めです。 画像編 デザインと違い、サムネが登録されない可能性がある newsページや商品ページで、画像が登録されないパターンもあります。 「必ず登録してください！」という運用にするのもアリ
Updated 2015.01.13 / Published 2015.01.13 word-break:break-all;は一切の禁則処理を解除し、どの文字の間でも改行するため、単語の途中や括弧の直前・直後で折り返したり、句読点が行頭にきてしまうことなどがあることから折り返しの制御には好ましくないとされています。望ましい折り返しの制御をしてくれるword-wrap:break-word;(overflow-wrap:break-word;)の用法について紹介します。 折り返しを制御する2つのCSSプロパティ 幅の狭い領域で長い英単語や長いURLの途中で折り返しを制御できるCSSプロパティは、特にスマートフォンなどの小さなディスプレイサイズ向けへの対応を考慮してよく用いられるようになってきています。ただし、CSS3には折り返しを制御できるCSSプロパティが2つ存在し、とてもややこしいので
Swiper Full HTML Layout <!-- Slider main container --> <div class="swiper"> <!-- Additional required wrapper --> <div class="swiper-wrapper"> <!-- Slides --> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> ... </div> <!-- If we need pagination --> <div class="swiper-pagination"></div> <!-- If we need navigation buttons --> <di
Splideとは？ Splide.jsは、日本発の軽量かつ高機能なJavaScriptスライダープラグインです。シンプルなコードで美しいスライダーを実装できるため、多くの開発者に愛用されています。 ファイルサイズが29KBとかなり軽く、ドキュメントも日本語のため便利です。 また、jQueryではなくjavascriptで開発されているため、例えば既存のプロジェクトにスライダーを追加する場合など、jQueryの有無やバージョンを気にする必要が無いため導入しやすいと思います。 オプションやAPIに関しても、他のスライダープラグインにできることは大体Splideでもできる、という印象です。 Splide.jsの基本的な使い方 まずは、Splide.jsを導入する方法を紹介します。公式サイトから最新のライブラリをダウンロードするか、CDNを利用して簡単にセットアップできます。 <div id="s
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く