CSS Stock｜Web制作を楽にするCSSコピペサイト
HTML・CSSの知識は不要。全222種類のパーツから お好みのものをご自身のサイトに取り入れることができます。 CSS Stockは「Web制作を楽にする」をテーマに、HTML・CSSのデザインやパーツをご紹介するサイトです。 お好きなパーツを選び、デザインや色を調整するだけ。あとはHTMLやCSSをコピペすれば、コーディング要らずでサイトに取り入れることができます。新しいスニペットも順次追加しており、色々なパーツを網羅できるよう日々尽力しています。 掲載しているコードについて 当サイトに掲載しているソースコードは全て自由にご自身のWebサイトやブログで使用いただいて構いません。もちろんオリジナルにカスタマイズしてご使用いただいても大丈夫です。 ただし別媒体でソースコード自体を掲載される場合は該当ページへのリンクを記載の上、参照元が当サイトであることを明記してください。 また掲載している
98.css
A design system for building faithful recreations of old UIs. Intro 98.css is a CSS library for building interfaces that look like Windows 98. See more on GitHub. This library relies on the usage of semantic HTML. To make a button, you'll need to use a <button>. Input elements require labels. Icon buttons rely on aria-label. This page will guide you through that process, but accessibility is a pri
チェックボックスをおしゃれにするCSSスニペット25選。アニメーションが刺さる！ | KodoCode
フォームのデザインをかっこよくするチェックボックスのCSSサンプルをまとめました。デザインが美しいウェブサイト・ブログが増えています。フォーム周りのデザインも趣向を凝らしたものが多く見受けられるようになりました。特にチェックボックスはデフォルトのデザインが地味で押しにくいことも多いですので、装飾することで改善できます。 本記事ではフォームの中でも「チェックボックス」に焦点を当て、おしゃれなCSSスニペットをまとめました。 通常のチェックボックスだけでなくトグルボタンやスイッチ形式のデザインもあります。 実用性重視。シンプルなチェックボックスでユーザビリティを向上できるCSSデザイン例。クリックしやすいシンプルなデザインのチェックボックス。See the Pen Simple CSS Checkboxes with Font Awesome by James Barnett (@jamesb
headerとfooterの使い方とデザイン例まとめ【HTML初心者必見】 - WEBCAMP MEDIA
「header」と「footer」っていつ使うの？ 「header」と「footer」は名前の通り、サイトのヘッダー部分とフッター部分を作るときに使います。 では、ヘッダーとフッターが何のためにあるのかからみていくことにしましょう。 ヘッダーを作るためのheaderタグ headerタグは、その名前の通りサイトのヘッダー部分を作るために使われるタグです。 ヘッダー部分はサイトの一番上にくる、大切な部分です。 ヘッダー部分が大切な理由は、２つあります。 １つは、「サイトのイメージを作る」ということです。 どのページを開いてもヘッダーが一番上にくるので、ユーザーにどのサイトをみているのか？を意識してもらうことができます。 もう１つの理由は、「目次をおくことができる」ということです。 サイトの一番上にくる部分に目次を置くことで、ユーザーの使いやすさをあげることができます。 この「DMM WEBC
開発・運用しやすくするHTMLコーディングのTips - NRIネットコムBlog
スパゲッティ はじめまして こんにちは、高須賀 淳と申します。中途採用で入社して8年目です。 普段は、HTML・CSS・JavaScriptを用いてWebサイトの設計・実装を中心に活動をしています。 今回のお話は 「開発・運用しやすくするHTMLコーディングのTips」と題して具体的なソースコードを交えてお話ししたいと思います。 HTMLは、なんとなく書いてなんとなく出来てしまう一見すると簡単な言語です。 それ故に闇雲にコードを書いてしまうといつの間にかスパゲッティーコードになったり、 何のコードか意味がわからなくなり、いざ修正しようとした時にどこから手をつけてよいか分からない状態になっていたりと困ることはないでしょうか。 それらを解決する第一歩として、HTMLコーディングのコツをまとめます。 HTMLコーディングを始めたばかりの方や普段アプリ開発メインでHTMLを片手間で書いている方のヒ
無料で使えるかわいい8bitデザインのファミコン風CSSフレームワーク「NES.css」
ファミコン風デザインのウェブサイトを簡単に作れる無料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
キーボード操作を意識したHTML/CSSコーディング
この記事は 「Webアクセシビリティ Advent Calendar 2020」 5日目の記事です。 アクセシビリティ Advent Calenderの記事を寄稿するにあたり、少しの工夫であらゆるユーザーに対して優しいWebサイトを作れるようなHTML/CSSコーディングの方法についてまとめました。より多くの人にとって優しい・使いやすいWebサイトを作ることは訪れてくださるユーザーの方々だけでなく、クライアントにとってもユーザーの機会損失を防ぐことができるので多大なるメリットがあります。（よくコードが適当でもデザインが見えていれば良いって意見を聞くけれどそんなことはない） ただ、アクセシビリティを意識したHTML/CSSコーディングについてのまとめだと内容量が非常に多くなりZennなら記事より本で出したほうがベターになってしまうので、今回は数あるアクセシビリティの視点から「キーボード操作で
『まず触ってみて』Vueで使えるCSSアニメーションまとめ１１０選！【完全オリジナルだからコピペOK】 - Qiita
『まず触ってみて』Vueで使えるCSSアニメーションまとめ１１０選！【完全オリジナルだからコピペOK】CSSアニメーション初心者Vue.jsフロントエンド コピペだけで作れるマテリアルデザインを個ご紹介します。 box-shadow, filter, transform,などをふんだんに使っており、transitionで滑らかな動きが表されています コードには説明もわかりやすく書いてあるのでかなり参考になります Webデザイン初心者の方はもちろんですが、バックエンドエンジニアの方にもとても助かる内容になっています １. シンプルなスライダーマテリアルデザイン３選 そのまま使えるスライダーアニメーションのマテリアルデザインとなっています transition-durationを使っていてわかりやすく説明もされているのでかなり重宝します ２. filterとopacityを使いこなすスライダー
lit - 軽量なレスポンシブWebフレームワーク
CSSフレームワークは大型なものになるほど便利な機能が追加されますが、その制約もまた大きくなります。Webデザイナーであれば、レスポンシブなどの機能だけあって、他は自由度が高いものを選びたいと思うのではないでしょうか。 今回紹介するlitはわずか395byteしかないレスポンシブWebフレームワークになります。小さいだけに余計な機能も少ないことでしょう。 litの使い方 スクリーンショット多めです。まずはグリッド機能。12等分される、よくあるものです。 タイポグラフィ。 ナビゲーションバー。 ボタンとリスト。 フォーム。 テーブル。 カード。 カードを使えば、こんなレイアウトにも。 水平線。 litではあまり多くの機能は用意されていません。別途ユーティリティとして使えるCSSも用意されており、必要に応じて組み合わせることができます。クラスも多くありませんので、習得は容易そうです。 litは
Web最新テクニックはこれ！コピペで実装できるすごいHTML/CSSスニペット68個まとめ
この記事では、Webサイトやモバイルアプリにあっと驚くエフェクトを、コピー&ペーストで実装できる最新 HTML/CSS スニペットをまとめてご紹介します。 スニペット（英: Snippet）とは、一般的に「切れ端、断片」といった意味で、ウェブサイトなどのプログラミングで簡単に切り貼り、再利用できる部品を指します。 これらのスニペットを利用すれば、他のサイトではあまり見かけない差のつくデザインエフェクトを実現できます。今後のウェブ制作に活用してみてはいかがでしょう。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次 1. イメージスライダー系 2. テキストエフェクト系 3. テキストエフェクト系スニペット 4. ページレイアウト系 5. ナビゲーションメニュー系 6. ホバーエフェクト系 7. SVGアニメーション系 8. 便利、面白系スニペット 9.
ブラウザレンダリング入門〜知ることで見える世界〜 - Qiita
はじめに 『レンダリングの仕組みなんて知らなくても、ブラウザが勝手にやってくれるじゃん！』 当時駆け出しのエンジニアだった私はそう思っていました。 実際、当時の私はレンダリングの『レ』の字も知りませんでしたが、特に業務上で問題はありませんでした。 しかし、その時は突然訪れました。 クライアントの要望でアニメーションを多彩に取り入れた案件を実装した際に、テスト段階で一部ブラウザ（S○f○ri、E○ge）でアニメーションがひどい状況になっていることが発覚しました。 (開発中はChromeで確認を行っており、Chromeでは特に問題はなかったので発覚が遅れました。) それからは、狂ったようにパフォーマンスの改善方法をググり、修正する日々が続きました。（最終的には、なんとかマルチブラウザでの動作も担保し、納品まで完了しました。） その案件が落ち着いた後、改めて自分の調べたことを振り返ると、局所的な
CSS Database
What’s next for CSS? cssdb is a comprehensive list of CSS features and their positions in the process of becoming implemented web standards. What are the stages? a { all: initial; } Supported on chrome since version 37 Supported on edge since version 79 Supported on firefox since version 27 Supported on opera since version 24 Supported on safari since version 9.1 Supported on Chrome for Android si
2016年を先取り！コピペで学ぶ HTML/CSS スニペット60個まとめ
※ このページは読み込みには時間がかかる恐れがあります。少し待ってからスクロールすることで、スムーズに表示することができます。 今年もあと少しとなりましたが、ウェブデザイン技術の進歩はまだまだ続いていくようです。今回は、最新 Web テクニックを採用した HTML/CSSスニペット60個を、カテゴリ別にまとめてご紹介します。 詳細は以下から。 コンテンツ前半 : 目次 数が多いため、前後半２ページに分けています。 ホバー・エフェクト（7） SVG関連エフェクト（6） レイアウト関連エフェクト（8） ナビゲーション・エフェクト（8） 01. ホバー・エフェクト Floating Card ホバーすることでカード状レイアウトを、立体的に動かすことができます。 See the Pen Floating Card by Fabrice Lejeune (@fabricelejeune) on Co
【2017年版】HTML/CSSで表現できる、すごいテキストエフェクト66選
ほとんどのモダンブラウザがCSS3対応となったことで、これまではPhotoshopなどのデザインアプリで再現していたようなデザインスタイルも、HMTL/CSSで表現できるようになってきており、その進化はますます加速しています。 今回は HTML と CSS、わずかな JavaScript で実装できる、表現力の高いテキストエフェクト用コードスニペットをまとめてご紹介します。コードニペットは各エフェクト別にカテゴリ分けしているので、ウェブサイト制作に活用したいエフェクトを見つけてみましょう。 ナビメニュー100連発！CSSで表現できるコピペ可能なHTMLスニペットまとめ CSS3の広がる可能性！美しいテキストエフェクト用コードスニペット24個まとめ CSSスタイリングで表現できる！すごいテキストエフェクト33個まとめ コンテンツ目次 1. アニメーション・テキストエフェクト 2. グリッチ・
コピペで実装できる！最新WebテクHTML/CSSコードスニペット66個まとめ
思わずクリックしてコンテンツを読み続けたくなるような、コピー&ペーストで利用できる最新 HTML/CSS スニペットをまとめてご紹介します。 新しいテクニックを利用した、ますます進化するWebの可能性を感じさせてくる作品ばかりで、今後のデザイン制作に活用してみてはいかがでしょう。 「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。 2018年人気だったすごいHTMLスニペットベスト100選【Codepen編】 コピペで実装できる、最新WebテクHTML/CSSコードスニペットまとめ Turbulence font – SVG マウスの動きに合わせて、
CSSセレクタのチートシート｜37パターンを一覧で解説
CSSセレクタのチートシートでは、要素セレクタ / classセレクタ / idセレクタ / 属性セレクタ / 複数セレクタ / 子孫セレクタ / 兄弟セレクタ / 隣接セレクタ / 擬似クラス / 擬似要素 / 全称セレクターから37パターンのセレクタの説明と実際のコードで使い方サンプルを紹介しています。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSリファレンス(基礎知識) - とほほのWWW入門
GitHub - tabler/tabler: Tabler is free and open-source HTML Dashboard UI Kit built on Bootstrap
https://admin-it.xyz/python/how-to-use-flask-bootstrap/
https://www.mkmkblog.site/entry/inputtag
