CSS3の擬似クラスを使った柔軟な要素の指定パターン - Qiita
CSS3では:first-childや:nth-child、:not()のような擬似クラスで柔軟にセレクタを指定することができます。OOCSSのようなある種のデザインパターンでも、シングルクラスでコンテンツに依存する書き方の場合でも活用することができると思います。 サンプルはCodepenにまとめています。照らし合わせながら読んでいくと理解しやすいです。 See the Pen pseudo-class-test by ManabuYasuda (@gaku) on CodePen. HTMLは以下のようにしています。.sectionという親要素に.section__itemという子要素が8つ入っています。最初の2つのサンプルには見出しが、後半のサンプルではクラス名を変えていたり、子要素の数を7つにしているものもあります。 <div class="section section1"> <h
作業効率が10倍UP！Googleスプレッドシートの活用方法3選 - 株式会社G-gen（ジージェン）
Googleが提供する表計算ツール「Googleスプレッドシート」。 タスク管理や工数管理などのビジネスで役立つツールを多数備えているのが特徴で、重宝されるツールの一つです。また、Web上のアプリケーションでインストールは不要なため、スムーズに導入することができます。 それが故に愛用ユーザーが多く、ある意味では必須ビジネススキルと言っても良いかもしれませんね。 ただ、初めて利用する場合、どのような機能があるのか気になりますよね？ そこでこの記事では、作業効率を高める機能や使い方、活用法などをご紹介していきます。 本記事は、活用法に特化した内容になっておりますので、Googleスプレッドシートの基本的なことを知りたい方は以下の記事がおすすめです。 今更聞けないGoogleスプレッドシートの6つ活用法！Excel（エクセル）でできない機能まで解説！ Googleが提供する表計算ツール「Goog
リマインダーを設定する
Slack の使い方チャンネルから検索に至るまで、基本操作から高度なテクニックまでをまとめてご紹介！ アクション,アクティビティ,アクセスログ,アクセシビリティ,追加する,アプリを連携させる,メンバーを追加する,Slack に追加する,管理者すべてのパスワード,アナリティクスandroid,社内通知,社内お知らせ,App ディレクトリ,アプリのアイコン,Apple Watch,アプリの承認,アーカイブする,Asana,Atlassian,オートメーション化アプリ,バッジ,お支払い情報,請求,Bitbucket,ボットユーザー,box,ブラウズする,通話,通話：、キャンセル,変更,チャンネル,簡単にチャンネルを作成,チャンネルの管理,チャンネルの通知,チャンネルのおすすめ,ドメインを申請する,閉じる,企業文化,プラスデータエクスポート,作成する,コンピューター,会話,変換する,接続する,連携
レスポンシブな背景画像にコンテンツを重ねて表示させる３つの方法 - ECサイト構築運営に役立つ情報発信｜モバイルファーストマーケティングラボ
ここしばらくの間フルスクリーン画像を使ったサイトデザインの人気が高まっています。 実は「背景画像の上にボタンを設置するデザイン」というのは少し厄介で、レスポンシブ化する際に幾分かの調整が必要になります。 今回はこの「背景画像の上にボタンなどのコンテンツを、『中央寄せ』で配置する」方法を３パターンご紹介します。 それぞれメリット・デメリットがありますので、使用したい場面にあわせてお使いください。 この方法では画像をimgタグで記述し、上に表示されるコンテンツをposition:absoluteで移動させます。 おそらく最もシンプルで用いられることが多いパターンではないかなと思います。 画像を中心に配置することができますので、比較的シンプルに実装させることが可能です。 デメリットとしては、absoluteさせたコンテンツをセンタリングさせるために若干HTMLとCSSが複雑になることがあります。
UI改善にキラリと役立つ！ SVGアニメーションの作り方まとめ - ICS MEDIA
SVGアニメーションを用いると、さまざまなサイズのディスプレイで印象的なマイクロインタラクションを実現できます。マイクロインタラクションの導入によってUI改善に役立てているケースもあるでしょう（参考「SVGで始めるマイクロインタラクション入門」）。SVGでアニメーションを実装するには、CSSを使う方法、JavaScriptを使う方法、動画作成ソフトを使う方法等、さまざまなアプローチがあります。 今回は、コーダー、フロントエンドエンジニア、デザイナーの分野別のSVGアニメーションのアプローチ方法を挙げ、その特徴と具体的な実装方法について紹介します。 CSSでSVGアニメーションを実現する方法（コーダー向け） コーダーにオススメするSVGアニメーション実現方法の1つは、CSSプロパティを使う方法です。 SVGはCSSプロパティによってグラフィックの形状を変更できます。たとえば、次のコードでは、
フロントエンドから始めるアニメーション 最強のライブラリGSAP3を手に入れよう - ICS MEDIA
今日では、ほぼすべてのウェブサイトにアニメーションが使われていると言っても過言ではないでしょう。派手な3Dアニメーションから、UIのマイクロインタラクションまで、その物量や時間のスケールはさまざまです。 アニメーション技術もCSSやSVG、Canvasと多岐に渡り、こんな表現まで！？ と驚くようなものも増えました。 しかし、複雑なアニメーションになるほどコードは煩雑になり人間の手には負えなくなります。イメージはあるのに具現化できない！ そんな悔しい思いを抱えたまま諦めるしかないのでしょうか？ いえ、道具です。道具を使うのです。本記事ではイメージをダイレクトに表現する手段としてのアニメーションライブラリGSAP 3について紹介します。 本記事を読むことで、以下の知識が手に入ります ウェブにおけるアニメーションの重要性 アニメーションライブラリとは？ 強力なアニメーションライブラリGSAP 3
トレンドウェブサイトから学べ！ JavaScriptで作る本格スクロール演出 - ICS MEDIA
「かっこいいウェブサイト」とはどのようなものでしょう？ ICS MEDIAを見てくださるみなさんであれば、ダイナミックなアニメーションや3次元的な動きがあるウェブサイトに「おっ」と惹きつけられた経験は一度や二度ではないかと思います。たとえば、スクロールに連動したインタラクティブな動きは冒険するようなワクワクした気持ち、没入感を与えてくれます。 『ポーラ2029年ビジョン』 本記事の前半では、話題になったウェブサイトからかっこいいスクロール演出の事例を取り上げ、それらを分析します。 さらに記事の後半では、「自分でも作ってみたいなぁ、でもどうやって実装しているんだろう？」と悩むみなさんに向け、オリジナルのデモを用いて実装を紹介します。 本記事を読んだ後には、「どうやって実装しているんだろう？」と未知の技術に感じていたスクロールアニメーションも、「こうやっていたのか！」と身近に感じられるようにな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
