HTMLとCSSでつくる! 1文字ずつ変化するテキストのアニメーション - ICS MEDIA
前回、以下の記事でリンクテキストをホバーした際のアニメーション実装例をご紹介しました。 『HTMLとCSSでつくる！ リンクテキストのホバー時アニメーション11選』 さて、今回は少しだけ複雑になりますが、HTMLとCSSのみでより凝った表現をする方法を紹介します。 リンクテキストといえば、ヘッダーなどのメニューとして小さめのフォントサイズでデザインされていることも多いでしょう。 そんな小さいサイズのテキストでもホバー時に目を引くような、1文字ずつ区切ったテキストアニメーションのアイデアを紹介します。よりサイトの雰囲気に合う演出をしたい、またアイデアの引き出しを増やしたいデザイナーやエンジニアの参考になれば嬉しいです。 ▼ 今回紹介する実装例一覧はこちらです。 記事前半では、実装方法について基本となるアニメーションの仕組みと実装時に気をつけたいことを解説し、後半はバリエーションの実装例を掲載
Slackワークフローとスプレッドシートを連携して開発工数の内訳を簡単に可視化 - Findy Tech Blog
こんにちは！ファインディでFindy Team+開発チームのEMをしている浜田です。 Findy Team+開発チームでは、Slackワークフローとスプレッドシートを連携して開発工数の内訳を可視化しています。 開発工数の内訳を可視化することで、どの開発にどれくらい工数がかかったかや全体の工数のうちどれくらいの割合を開発に使えているかなどを定量的に把握できます。 Slackワークフローとスプレッドシートの説明 Slackワークフロー 工数の内訳と割合 トイル Slackワークフロー作成手順 まとめ Slackワークフローとスプレッドシートの説明 ここからはTeam+開発チームで実際に使っているSlackワークフローとスプレッドシートをキャプチャを交えつつ説明します。 Slackワークフローで入力した内容がスプレッドシートに連携されるので、スプレッドシートで集計して表やグラフに加工しています。
[CSS設計] 破綻しにくいz-indexの指定を考える
概要 各コンポーネントに指定するz-indexの値を定義する。 モチベーション z-indexの衝突を避けたい z-indexの指定を理由を明確にしたい コンポーネントが増えるたびにz-indexの定義を増やしたくない 前提知識 重ね合わせコンテキスト（スタッキングコンテキスト）という概念があることを前提に話を進めるため、以下のページを合わせて読むと理解がしやすい。 重ね合わせコンテキスト - CSS: カスケーディングスタイルシート | MDN （スタッキングコンテキスト） isolation - CSS: カスケーディングスタイルシート | MDN z-indexのルール 複雑さを避けるため以下のルールを設ける。 各コンポーネント内のz-index指定を極力少なくする z-indexは0から4までの値を使用する（後述のLayer Stackに基づく指定をする） -1などの負数は使用しな
![[CSS設計] 破綻しにくいz-indexの指定を考える](https://cdn-ak-scissors.b.st-hatena.com/image/square/dbce8c57ca2a432036fcfcddd4de92224e9e0010/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--ksFtzPpg--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BCSS%2525E8%2525A8%2525AD%2525E8%2525A8%252588%25255D%252520%2525E7%2525A0%2525B4%2525E7%2525B6%2525BB%2525E3%252581%252597%2525E3%252581%2525AB%2525E3%252581%25258F%2525E3%252581%252584z-index%2525E3%252581%2525AE%2525E6%25258C%252587%2525E5%2525AE%25259A%2525E3%252582%252592%2525E8%252580%252583%2525E3%252581%252588%2525E3%252582%25258B%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_34%3Ahiro%252Cx_220%252Cy_108%2Fbo_3px_solid_rgb%3Ad6e3ed%252Cg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzY0ZmQ2ZmJhZjQuanBlZw%3D%3D%252Cr_20%252Cw_90%252Cx_92%252Cy_102%2Fco_rgb%3A6e7b85%252Cg_south_west%252Cl_text%3Anotosansjp-medium.otf_30%3A%2525E6%2525A0%2525AA%2525E5%2525BC%25258F%2525E4%2525BC%25259A%2525E7%2525A4%2525BEZOZO%252Cx_220%252Cy_160%2Fbo_4px_solid_white%252Cg_south_west%252Ch_50%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2M2MzA3N2E1OTAuanBlZw%3D%3D%252Cr_max%252Cw_50%252Cx_139%252Cy_84%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
【2024年版】全SNSにオールマイティーなOGP画像サイズはこれだ！（X、Threads対応）
これからOGPの設定方法に入る。一般的なOGPの設定は、通常HTMLの<head>～</head>内に以下のように記述する。 <meta property="og:title" content="音楽特化型デザインサービス double#" /> <meta property="og:type" content="website"/> <meta property="og:url" content="https://d-sharp.com" /> <meta property="og:image" content="https://d-sharp.com/fb_thum.jpg" /> <meta property="og:site_name" content="音楽専門デザイン・サービス│double#" /> <meta property="og:description" conten
リンクの入れ子は subgrid が最適解かもしれない
はじめに リンクの入れ子とは何かというと、以下のようなデザインです。 カード全体がリンクでクリッカブルになっていて、中のタグやカテゴリーもそれぞれがリンクになっています。ニュースやブログの投稿などでよく見るデザインだと思います。 しかし、以下のようにマークアップすることはできません。 <a href="https://example.com/posts/hello-world/"> <h2>Hello, World!</h2> <p>...</p> <a href="https://example.com/tag/hello/">#hello</a> <a href="https://example.com/tag/world/">#world</a> </a> HTML のルール的に <a> の入れ子はダメだからです。 Subgrid を使った方法 Subgrid がまだない時代からいろ
劇的に変わる！プレゼンテーションの上手な作り方や話し方のコツ | ウェブライダーマガジン
まずは、プレゼンテーションが上手くなるメリットについて整理しておきましょう。 メリットは大きく分けて3つあります。 「説得力が手に入る」「仕事の成果が上がる」、そして「コミュニケーション力が高まる」です。 最後の「コミュニケーション力が高まる」についてはピンと来ないかもしれませんが、伝えたいことが伝わりやすくなると、他者とのコミュニケーションが円滑になります。 伝わらないことから生まれる人間関係のトラブルを防げるようになるからです。 そして、メリットは上記以外にもたくさんあります。 ■プレゼンスキルを身に付けることで得られるメリット 読まれる文章を書けるようになった 訴求力の高いランディングページが作れた ECサイトのコンバージョン率が上がった YouTubeで配信できるようになった YouTube動画の視聴者数が増えた セミナーやイベントの登壇回数が増えた セミナー参加者の満足度が高まっ
コピペできる！CSS吹き出しデザインのまとめ
CSSで作る吹き出しの見出しデザインを作りました。 before、after疑似要素で「border」プロパティ等を使用し吹出口を作っています。 三角の吹出口だけではなく、線を入れただけのシンプルな吹き出しや背景をストライプにしたものなど様々なパターンで作成しています。 <h2>CSSでつくる見出しデザイン</h2> h2 { position: relative; padding: 0.8rem 0; margin-bottom: 0.2rem; border-bottom: 5px solid; color: black; font-weight: bold; font-size: 26px; text-align: center; } h2:before, h2:after { position: absolute; top: 100%; left: 50%; content: ""
CSS Stock｜Web制作を楽にするCSSコピペサイト
HTML・CSSの知識は不要。全222種類のパーツから お好みのものをご自身のサイトに取り入れることができます。 CSS Stockは「Web制作を楽にする」をテーマに、HTML・CSSのデザインやパーツをご紹介するサイトです。 お好きなパーツを選び、デザインや色を調整するだけ。あとはHTMLやCSSをコピペすれば、コーディング要らずでサイトに取り入れることができます。新しいスニペットも順次追加しており、色々なパーツを網羅できるよう日々尽力しています。 掲載しているコードについて 当サイトに掲載しているソースコードは全て自由にご自身のWebサイトやブログで使用いただいて構いません。もちろんオリジナルにカスタマイズしてご使用いただいても大丈夫です。 ただし別媒体でソースコード自体を掲載される場合は該当ページへのリンクを記載の上、参照元が当サイトであることを明記してください。 また掲載している
「CSS」のみで作る タイトル・見出しのデザイン | Web制作の基本テクニック HTML・CSS・JS | WBA ウェブベーシックアーカイブ
画像を使わない「CSS」のみで作れる、ページタイトルや記事の小見出しタイトル（h1~h6）のデザインとして使えそうなアイデアを考えてみました。 各コードサンプルも掲載していますので、よろしければご参考ください。 サンプルのカラーは、グレー系を使用していますが、サイトのデザインに合わせて変更してみてください。また、タイトルは、h3で作成していますが、こちらもサイトの構成に合わせてほかのタグに変更してください。 また、思い付き次第追加していきたいと思います。 独自ドメインがずっと無料！国内シェアNo.1【ロリポップ！】 全タイプ一覧 タイプ一覧はこちらからどうぞ 下記にそれぞれのコードサンプルがあります。 罫線タイプ 左二重線 See the Pen Title design - Left double line by web-basic-archive (@web-basic-archive
コピペで簡単！CSSで作る見出しデザイン34選｜株式会社296｜ホームページ制作・動画制作・ドローン撮影｜川崎
シンプルな見出しデザイン 下線 h1 { padding-bottom: .5em; /*下の余白*/ border-bottom: solid 3px #ff5a5f; /*下線（線種 太さ 色）*/ } 二重下線 h1 { padding-bottom: .5em; /*下の余白*/ border-bottom: double 5px #ff5a5f; /*下線（線種 太さ 色）*/ } 上下線 h1 { padding: .5em 0; /*上下の余白*/ border-top: solid 3px #ff5a5f; /*上線（線種 太さ 色）*/ border-bottom: solid 3px #ff5a5f; /*下線（線種 太さ 色）*/ } 背景色 見出し文字にシンプルな背景色を重ねたスタイルです。 h1 { padding: .5em .75em; /*上下左右の余白*/
【HTML/CSS】「＼ ／」的なスラッシュ吹き出し - COPPY（コッピー）| コピペ倉庫
.service__ttl { position: relative; text-align: center; display: block; width: fit-content; line-height: 1.2; margin: 4rem auto 3rem; padding: 0 2rem; } .service__ttl__main { font-size: 1.2rem; font-weight: bold; } .service__ttl__sub { display: block; font-size: 0.9rem; font-weight: lighter; } .service__ttl::before, .service__ttl::after { content: ""; position: absolute; bottom: 0; width: 1px; hei
CSS 吹き出し(balloon)などワンポイント装飾色々
「point」「check」や「会話形式吹き出し」など、コピペで使えるデザイン集。テンプレートに含めようかなぁ、と考えていたものなども併せて放出しようと思います。つまりもうテンプレートデザインとしては使わないのでみなさんの記事で使えそうならどうぞ (ノﾟｪﾟ) 2022.1.5 記事作成時の注意点について加筆しました。 記事作成時の注意点 HTMLモードのみ利用可能です。 Markupはhtmlのことです, 記事作成画面(本文 or 追記(推奨))に記載 CSSはテンプレートスタイルシートに記載 CSSと記されているコードの記載場所は テンプレートのスタイルシート です。利用頻度が低いなど記事内だけで完結させたい場合は、以下のいずれかの方法を選択し、記事の末尾(最終)に記載します。 CSSの冒頭に <style>、末尾に </style> を付加し、html要素として扱う * この場合スタ
HTML・CSSで実装するかわいいフキダシのアイデア - ICS MEDIA
見出しなどのテキストを目立たせたいときに便利なフキダシ（吹き出し）。 この記事では、HTMLとCSSだけで簡単に実装できる、シンプルなデザインのフキダシをご紹介します。 雑誌やポスターなどで見かける可愛いあしらいをウェブサイトにも取り入れたいと思ったことが、今回のテーマを選んだきっかけです。 とくにフキダシは、少ないコードで表現でき、見出しなどのテキストに華やかな印象を与えられます。 ウェブサイトを制作する際に、ぜひ取り入れてみてください。 また、この記事のほとんどの作例で、CSSの疑似要素『::before』と『::after』を利用しています。 疑似要素を使うと、不要なHTMLタグを増やさずにCSSで装飾できます。 ::before ＝ 選択した要素の最初の子要素として疑似要素を生成 ::after ＝ 選択した要素の最後の子要素として疑似要素を生成 これらは、要素に装飾的な内容を追加
CSSとJavaScriptでWebページにローディングアニメーションを表示させる方法
CSSとJavaScriptでWebページにローディングアニメーションを表示させる方法ページやコンテンツの読込中、何も表示されない真っ白な画面が延々と続くと、なんだか不安になりますよね。本当にこのページであってるのか…今何を待ってたんだっけ…なんて。ユーザーを不安にさせないためにも、読込中だと認識できるローディングアニメーションを取り入れてみるといいですね。 ローディングアニメーションの設置手順こんな感じで、最初にローディングアニメーションを表示させ、ページを読み込んだらコンテンツを表示させるページを作ってみましょう。よく「CSS だけで実装できる！」なんてうたわれている場面もありますが、多くの場合アニメーション部分のみのおはなしで、実際にページの読み込みを認識させるには簡単な JavaScript も必要です。 1. ローディング画面の用意まずはコンテンツを用意しましょう。上部にローディ
文章に余白が付いてデザイン通りにならない時はCSSのline-heightを確認しよう - 【Long Town】仙台でホームページ制作・印刷物デザイン
結論：line-heightの指定で上下に余白ができる フォントサイズより大きい値のline-heightを指定すると、フォントサイズを超えた数値が上下に均等に配置されます。 コーディングしてもデザイン通りにならない XDやFigmaなどで作ったデザインカンプをもとにコーディングしたはいいけれど、なぜかデザイン通りの見た目にならない……そんな経験はありませんか？ 原因は複数考えられますが、今回はその原因の一つであるCSSのプロパティ、”line-height”を解説します。 line-heightとは？ line-heightとはCSSのプロパティの1つで、テキストの行間を指定するために使用されます。 XDでいうと画像の位置にある数値です。 この”line-height”プロパティですが、以下のような指定方法があります。 数値で指定する方法 数値で指定する場合は、フォントサイズに対する相対
人に優しいフォームを作ろう、特に日本人に
皆さん、フォーム作ってますか？ Webサイトやアプリを作るにあたって避けられないのがForm作成、多くの方が autocomplete を設定するなど、より使いやすいフォームを作成するために尽力されていることと思います。 一方で、悪気なく書いたコードでより使いにくいフォームになってしまっている例が世の中には多く見られます(特に銀行系) 今回は、よくあるフォームの実装を例に、(特に日本語話者にとって)より使いやすいフォームにするためのちょっとした仕様や私が考える対策を書いていこうと思います。 忙しい方のために最初に書いておくと、この記事に書いてあることの多くは autocomplete の仕様を意識した実装をしましょう の一言に集約されます。 多くの方にとっては「何を当たり前のことを」と思われる項目も多いかとは思いますが、当たり前のことがされていないフォームが世の中には多すぎるので、少しでも
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - Nutlope/logocreator: A free + OSS logo generator powered by Flux on Together AI
https://spyweb.media/2017/10/26/pure-javascript-jquery-addclass-removeclass/
HTML・CSSのみでつくるアコーディオンメニュー8選
下線を吹き出しにしたCSS見出しデザイン-HTML・CSS・アイキャッチ画像
