JavaScriptはなし、プレーンなHTMLとCSSで実装されたランディングページ用のテンプレートを紹介します。 テンプレートはスマホ・タブレット・デスクトップのレスポンシブ対応。ワイヤーフレームのような白黒のシンプルなデザインなので、カスタマイズも簡単です。 Uisual -Free Landing Page Templates Uisual -GitHub UisualはプレーンなHTMLとCSSで実装された、ランディングページ用のテンプレートです。他のCSSフレームワークやJavaScriptなどは一切必要ありません。 MITライセンスで、商用プロジェクトでも無料で利用できます。

現在のレスポンシブデザインは、ビューポートにもとづいてレイアウトを最適化しています。しかし、新しいレスポンシブデザインでは、アニメーションが不要なユーザーには動きを少なくしたり（無くしたり）、親コンテナの幅にもとづいてコンポーネントを最適化したり、スコープ付きスタイルやフォームファクターなど、ユーザーの好みや環境に合わせて最適なコンテンツを提供できるようになります。 これらの新しいレスポンシブデザインのコンセプト・実装方法を紹介します。CSSがこれまで以上に進化します。 The new responsive: Web design in a component-driven world by Una Kravets 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 レスポンシブデザインの現状 ユーザーでレスポンシブ コンテナでレス

「かっこいいウェブサイト」とはどのようなものでしょう？　ICS MEDIAを見てくださるみなさんであれば、ダイナミックなアニメーションや3次元的な動きがあるウェブサイトに「おっ」と惹きつけられた経験は一度や二度ではないかと思います。たとえば、スクロールに連動したインタラクティブな動きは冒険するようなワクワクした気持ち、没入感を与えてくれます。 『ポーラ2029年ビジョン』 本記事の前半では、話題になったウェブサイトからかっこいいスクロール演出の事例を取り上げ、それらを分析します。 さらに記事の後半では、「自分でも作ってみたいなぁ、でもどうやって実装しているんだろう？」と悩むみなさんに向け、オリジナルのデモを用いて実装を紹介します。 本記事を読んだ後には、「どうやって実装しているんだろう？」と未知の技術に感じていたスクロールアニメーションも、「こうやっていたのか！」と身近に感じられるようにな

CSS Flexboxで実装するWebページでよく見かけるレスポンシブ対応のレイアウト、カードレイアウト、ナビゲーションバー、サイドバー、聖杯レイアウトなどのHTMLとCSSのコードを紹介します。 コードは非常にシンプルなので、テンプレートやスニペットとして再利用できます。 Master CSS Flexbox 2021 🔥- Build 5 Responsive Layouts🎖️|| CSS 2021 by Joy Shaheb 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Flexboxの構造・各プロパティと値 実装の準備 Level 1: シンプルなカードレイアウト Level 2: ナビゲーションバー Level 3: サイドバー Level 4: 少し複雑なカードレイアウト Level 5: Holy Grai

棒グラフや折れ線グラフ、どうやって実装していますか？ Charts.cssなら簡単です。データをtableタグで実装し、CSSのクラスをtableに加えるだけで横棒グラフ、棒線グラフ、折れ線グラフ、エリアグラフなどを簡単に実装できるCSSのフレームワークを紹介します。 HTMLは普通の表組みなのでアクセシブル、グラフやチャートはレスポンシブにも完全対応した優れものです。 Charts.css Charts.css -GitHub Charts.cssの特徴 Charts.cssのデモ Charts.cssの使い方 Charts.cssの特徴 Charts.cssはtableで実装した表組みにシンプルなCSSのクラスを加えるだけで、さまざまなグラフやチャートを実装できるフレームワークです。カスタマイズも簡単で、ユーティリティのクラスも豊富に用意されています。 HTMLとCSSだけで実装 セマ

ブログ記事一覧だけでなくサービス紹介の一覧など、カード型レイアウトで使えるhoverデザインをご紹介します。安易に半透明にすることなく、クリックできることを伝えるようにしましょう。 背景色の変更 See the Pen LYbapbN by Kobayashi (@Pulp_Kobayashi) on CodePen. 11行目のbackground-colorで背景色を変更、12行目のbox-shadowで影の色を薄くしています。 カードの移動 See the Pen Card Hover Style by Kobayashi (@Pulp_Kobayashi) on CodePen. 11行目のtransformでtranslateY(-5px)を指定することでY軸に対し-5px移動します。 画像の回転と拡大 See the Pen XWNGmgW by Kobayashi (@Pul

2021年3月4日 CSS CSS小技集シリーズの第4弾！「【第3弾】少しのコードで実装可能な15のCSS小技集」から約2年。またまた便利でサクッと使えるコードが続々登場しています！初心者さんからベテランさんまで要チェック！ ↑私が10年以上利用している会計ソフト！ 目次 要素の上下左右中央配置 画面幅いっぱいに画像を配置 リストマーカーの色を変える 言語にあわせて引用符を変更 クリックで文字列を選択 背景画像を見切れないよう繰り返し表示 入力時の縦線の色を変更 ドラッグで要素のサイズを変更できるようにする floatは flow-root で解除 文章をカラム分けしてラインを入れる HTML・CSSの全コードは各サンプルの「HTML」や「CSS」タブを、別タブでのサンプル表示は右上の「EDIT ON CODEPEN」をクリックしてご覧ください！ 1. 要素の上下左右中央配置 ボックスを要

CSSは使いようによっては様々な表現が可能な奥深い言語です。しかし、アニメーションなど凝った動きをするものに関してはコードは見れても実装方法を詳しく解説している記事は多くないように思えます。 この記事では、私（さかっちょ）がTwitterで過去にツイートしたCSSの技術をCodePenで改めて実装し、Twitterでは解説しきれなかった実装方法をより詳しく説明しています。CSS初学者の方にもわかりやすいように解説していますので、ぜひ参考にしてみてください。 その1. 一文字ずつ登場するテキストアニメーション See the Pen [CSS Tips] Text Show-up Motion by Takuro Sakai (@sakaccho) on CodePen. 一文字ずつtransformで移動させています。文字が途切れることなく流れるようにtransition-delayを調整

ファミコン風デザインのウェブサイトを簡単に作れる無料CSSフレームワークが「NES.css」です。NES.cssはさくらインターネットのダーシノ氏が開発を行っており、ボタンや入力フォームといった基本的な要素から、SNSやキャラクターのアイコンまで用意されています。 NES.css - NES-style CSS Framework https://nostalgic-css.github.io/NES.css/# nostalgic-css/NES.css: NES-style CSS Framework | ファミコン風CSSフレームワーク https://github.com/nostalgic-css/NES.css ファミコン風CSSフレームワーク「NES.css」をリリースしました | Black Everyday Company https://kuroeveryday.blo

Result CSS Gridを使ってカレンダーを作ろう、みたいなやつです。需要はあるのか分かりませんが個人的にちょっと必要になったのでメモ。 以前書いた凝ったものではなく、非常にシンプルなコードで作るシンプルなカレンダーです。 css .calendar {/*css gridで7列レイアウトを作る*/ display: grid; grid-template-columns: repeat(7, 1fr); } .calendar-wrapper {/*カレンダーの幅*/ width: 280px; } .weekday {/*曜日部分*/ background: #eee; } ul {/*全体*/ list-style: none; margin: 0; padding: 0; text-align: center; } .first-day {/*月の最初の日の始まり。日曜なら1

まずはこちらのカード型リンクのHoverアニメーションを作っていきます。 Hoverしたときに、 ピンク背景のブロックを上から重ねる 「READ MORE」というテキストをFadeInする 以上の2つの動きを実装しています。 ピンク背景のブロックを上から重ねる ピンクの背景をtransformを使って位置移動をしており、初期位置を、すべてカードの外に出るように指定しています。 カードの外に出ていても、カード要素に overflow: hidden; を指定しておくことによって、要素外の部分は隠れています。 「READ MORE」というテキストをFadeInする READ MOREのテキストは、通常時に opacity: 0; を指定して透明にし、Hoverした際に opacity: 1; にアニメーションをしています。 カード型リンク～左から右へ～ 次にカード型リンクのHoverアニメーシ

今回はWebサイト制作・コーディングについて学習し始めて間もない方向けの基礎まとめです。 よく使う基本のHTMLタグやCSSプロパティについてざっとまとめてるので、初心者の方はもちろん 、久々のコーディングでブランクがあるという方にもご参考頂ければ幸いです。 模写コーディングなどする際にコーディングが捗るよう、いつでも見返せるようブックマークなどして是非活用してください。 HTMLタグ ＜タグ名 属性名="属性値">タグ内の要素＜/タグ名＞ 基本的なhtmlの書き方です。 「<>」小なり大なりの三角かっこの中にタグの名前を記述します。 「<タグ名>」を開始タグとして、「</タグ名>」を終了タグ、閉じタグとします。 開始タグと終了タグの間に文字など表示させたい要素を入れていきます。 また、タグの名前以外に半角スペースを空けて属性と属性値というものが入ります。 属性は主にclassやidなどで

どうも！LSSです！！ 昨日の記事、 に関する、余談なんですが…。 なんとなく…ハンバーガーメニューについて考えているうちに、 【CSS】丸から四角に変形するボックス - Little Strange Software は、「ビッグマックにしようか、てりやきバーガーにしようか」って考えてたわけじゃなくて、あれです。（ちなみにビッグマックが好きですｗ） スマホアプリなんかでたまに見かける、「≡」みたいなのが右上にあって、それをタップするとメニューが出てくる機能ですｗ 余談の余談ですが、≡って「ごうどう」で変換すると出てくるんですね！ 詳しくは、 note.com こんなノートを見つけました^^ あと、ついでにサンプルにちょっと手を加えてみました。 ここに適当に文章を書きます。 brタグによる改行もできます。 この部分の文章は好きに変更できます！ 左に配置するとこうなります borderでちょ

更新履歴 追加 2024/04/01 「Epic Easing」を掲載しました 2024/03/07 「Filter Blend」を掲載しました 2024/03/04 「Tooltips & Speech Bubbles」を掲載しました 2023 2023/07/04 「CSS Box Shadows Generator」を掲載しました 2023/06/29 「Regulex」を掲載しました 2023/04/05 「Colorable」を掲載しました 2023/03/09 「Scrollbar.app」を掲載しました 2022 2022/10/04 「CSS Shadow Palette Generator」を掲載しました 2022/09/07 「Wayback Machine」を掲載しました 2022/05/31 「Min-Max-Value Interpolation」を掲載しました

Flexboxでよく使用するプロパティと値をまとめたチートシートを紹介します。 コンテナ内にアイテムがどのように配置されるかを図やイラストで掲載しており、楽しく直感的にFlexboxの使い方を学べます。 FlexBox Cheat Sheets in 2021 by Joy Shaheb 同じ作者のCSS Gridのチートシートも翻訳しました。 CSS Gridでどのように配置されるかをまとめたチートシート 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Flexboxの構造 Flexboxの各プロパティと値 flex-directionプロパティ justify-contentプロパティ align-contentプロパティ align-itemsプロパティ align-selfプロパティ flex-grow | shrink

どうも！LSSです！！ 今回はHTMLのフォームパーツで、今まで使った事がなかった「スライダー」を使ってみます。 こんなのです 呼び名はたくさんありますね フォームパーツなもので 横幅を広くする CSSでこのスライダーの値を利用したかった…けど無理っぽい^^; JavaScriptなら余裕！ というわけで「スライダー」の紹介でした こんなのです コード <input type="range" /> 最低限のコードでいうとこうなります。 めっちゃシンプルですねｗ 呼び名はたくさんありますね Androidにも、このコントロールはありました！ かなーり懐かしい記事ですが、Androidアプリ開発では「SeekBar」という名前がついていましたね。 HTMLタグ上では「range(レンジ)」という名前になっています。 Excelのセル範囲みたいな名前ですねｗ（VBA触ってる人にしか分からない話）

CSSにおけるマージンの相殺は何か、どういう条件で起こり、どのように相殺されるのか、また相殺を回避する方法などを紹介します。 下と上のマージンの相殺は単純ですが、マージン値が異なる場合、入れ子の場合、複数の場合、同方向の場合、負のマージンの場合、パディングやボーダーがある場合など、実装に伴うさまざまな例を解説します。 この記事を読むと、マージンの相殺がどのように機能するかがよく分かるようになり、悩むことはなくなります。 The Rules of Margin Collapse by Josh W. Comeau 下記は各ポイントを意訳したものです。 デモは元記事ではインタラクティブですが、Gifアニメにしています。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 垂直マージンのみが相殺される 隣接する要素のみが相殺される より大きなマージンが勝つ 入れ子は

どうも！LSSです！！ 先日の記事、 を早速使ってくださった、421miyakoさん(id:m421miyako)から問い合わせがありました。 421miyako(id:m421miyako) このスライダーを何の意味もなく上下の仕切り線みたいに使って、数字を出しておくと読者が、なんじゃこれの感じで混乱して面白そうです。先日のタブですが同じページに二か所入れると干渉しますか？二つ目がうまくいかなかったのでどうかなって。 （ちなみに、使っていただいた記事はこちら） そういえば…IDを多用しているため、バリバリ干渉します！ 同ページ内で複数置く事を考えていなかったんですね^^; ラジオボタン・ラベル・中身の３種 × タブ数 のIDを使っていて、その全てを別名に変えるのと、ラジオボタンをグループ化している name="rdb" の名前も変えてあげると、複数でも動作します。 が、なかなか大変ですよ

CSSは進化が早く、中央揃えのテクニックも一昔前のものよりも確実に使いやすくなっています。天地左右の中央に要素を配置する際に、要素の幅や高さが可変だったり、要素の数が増えても対応する最新の実装テクニックを紹介します。 現在主流の5つのテクニックからそれぞれの特徴と最も万能で信頼できるテクニックを評価します。 Centering in CSS by Adam Argyle 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. Content Center 2. Gentle Flex 3. Autobot 4. Fluffy Center 5. Pop & Plop 中央揃えに最適なテクニック はじめに CSSの中央揃えは、ジョークの対象にもなる悪名高い課題でした。しかし今日ではCSSはすべて進化し、素直にこれらのジョー