JavaScript を使わず HTML と CSS だけで Todo アプリを書く方法 - Frasco
HTML と CSS だけで Todo アプリを作りました。TodoMVC（今回デザインを使用使わせてもらいました）と違って JavaScript は使っておらず、すべてのインタラクションが CSS で動いています。 どういう仕組みなのでしょう？簡単に説明すると、HTML、CSS の一般兄弟セレクタ（~）、CSS カウンタ、それから :checked 、:target、:required 疑似セレクタを組み合わせてできています。詳細についてはこれから説明していきます。 アプリを試してみる ソースを見る できること： Todo の追加（最大50件） Todo の完了 Todo の削除 フィルタリング（完了・未完了） 残りのアイテム数をカウントする 空文字の追加を許可しない できないこと： ページリロード後の永続性の維持 「すべての Todo を完了にする（Mark all as done）」
CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する
2021年12月28日 CSS 大きさの異なる複数のボックスを隙間なく並べてタイル状に表示したい！そんな時もありますよね。モザイクレイアウト、Masonryレイアウト、Windows 8 Metroスタイルレイアウト…などなど、さまざまな呼び方のあるこのレイアウト。今回は display: grid という新しい配置方法を使ってレイアウトを組んでみますよ！もちろんレスポンシブにも対応させたいと思います！ ↑私が10年以上利用している会計ソフト！ CSSグリッドの基本の書き方は動画で確認！ 基本的な記述方法は動画でも紹介しています。初めてCSSグリッドに挑戦するよという方はまずはこちらで基礎を覚えておきましょう！ 1. どんなレイアウトにするか書き出す グリッドレイアウトは少し複雑で、何も考えず組んでいくとどこの要素がどうなっているのか…こんがらがってきちゃいます。ご利用は計画的に！慣れるま
テキストボックス/パスワードボックス内のボタンを非表示にする方法 Blogs - Japan IE Support Team Blog - Site Home - TechNet Blogs
テキストボックス/パスワードボックス内のボタンを非表示にする方法 08/13/2015 2 minutes to read こんにちは。Internet Explorer サポートの 杉谷です。 Internet Explorer 10 以降、input type ="text" や "password" で指定されたボックス内に以下のようなボタンが表示されるようになりました。 ・input type ="text" ：テキスト消去ボタン（クリアボタン） ・input type ="password"：パスワード表示ボタン（revealボタン） この表示はCSSの擬似要素（HTML 上に明示的な定義をしなくても、ブラウザーにより提供される要素）により表示されています。 ※IE10 から対応できる擬似要素の CSS 定義の一覧は以下のページにてご確認頂けます。 ◇Pseudo-element
Hologram | Generate a Styleguide right in your CSS
Hologram is a Ruby gem that parses comments in your CSS and turns them into a beautiful styleguide. Quick start: gem install hologram And then: hologram init View on Github Why would I use it? Hologram makes building a styleguide as easy as maintaining your CSS. It is similar to Kneath Style Sheets and Styledocco. Your documentation is written in your production CSS using a combination of YAML and
BEM スタートガイド ― これからのWEB フロントエンド開発に必要な方法論に触れてみる | zerokara web
今年ぐらいからか、BEM というキーワードが国内外のフロントエンドな人達の間で使われたり議論されているのをよく見かけるようになりました。 私自身も何度か調べたりbem-tools に触れてみたりとしていたのですが、最近になってようやくBEM が何なのかが少しずつ掴めてきたような気がします。 そこで今回はまず第一弾として、これまで私がBEM について調べてきたこと、実際に試してみた上で理解したこと等を分かりやすくまとめたいと思います。 BEM について聞き慣れない方、ゼロから始めてみようという方々のスタートガイドとなれば幸いです。 BEM とは？ BEM とは、WEB サイト・アプリケーション等の開発において… ・メンテナンス性の高いものを短期間で開発すること ・チームでの作業効率を上げ、メンバーの追加・変更による影響を最小限に抑えること ・UI の質を保ち、変更に労力をかけないこと な
GitHubのエラー・ページ
GitHubのStyleguideにエラー・ページのセクションがあるのを知った。それによると外部ファイルに依存しないように書いているらしい。CSSはstyle要素で、JavaScriptはscript要素で、画像ファイルはBase64エンコードしてData URIで、それぞれHTMLに直接埋め込むというスタイル。 実際に404のテンプレートでもちゃんとそうなっていた。フロントエンド脳なので、HTTPリクエストを減らして、エラー・ページのコストを下げたいのかなと単純に考えてしまったけど、Not Foundの連鎖を避けることとか外部ファイルがCDN経由の場合の確実性を上げることとかの方が強い理由のようだ。エラー・ページを単独で機能するようにしておき、エラー時に余計な負荷を与えないようにすることにより、より速やかに復帰できるように、ということになりそう。 HTTPエラー・ページの意味も重要だけど
Grid Forms · Data entry made beautiful
This project has moved to https://formkeep.com/gridforms. Redirecting you in 10 seconds... Data entry can be beautiful Grid forms are dense forms designed for use in applications that require lots of data to be entered regularly. A tiny Javascript/CSS framework that helps you make forms on grids with ease. Download on Github Tweet
Semantic UI
Design Beautiful Websites Quickly Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML. Concise HTML Semantic UI treats words and classes as exchangeable concepts. Classes use syntax from natural languages like noun/modifier relationships, word order, and plurality to link concepts intuitively. Get the same benefits as BEM or SMACSS, but wit
Free HTML5 Bootstrap Admin Template
Charisma free, premium quality, responsive, multiple skin admin template. It's a live demo of the template. I have created Charisma to ease the repeat work I have to do on my projects. Now I re-use Charisma as a base for my admin panel work and I am sharing it with you :) All pages in the menu are functional, take a look at all, please share this with your followers. Back to article Download Page
reveal.js - The HTML Presentation Framework
Hello Therereveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do. Vertical SlidesSlides can be nested inside of each other. Use the Space key to navigate through all slides. Basement Level 1Nested slides are useful for adding additional detail underneath a high level horizontal slide. Basement Level 2That's it, time
Firefox 23 より text-decoration: blink; による点滅効果が削除
4月のはじめに、Gecko レンダリングエンジンにおける blink 要素と CSS の text-decoration: blink; による点滅エフェクトのサポートをもうやめようぜっていう提案が承認されて、今後リリースされるバージョンに反映されることが確定したようですと書いたのですが、今、Firefox 23 のサイト互換性情報を見ていたら、実際に削除されたようです。 text-decoration: blink; と blink 要素終了のお知らせ Firefox 23 サイト互換性情報 ： MDN Firefox は従来、CSS text-decoration プロパティの blink キーワードを用いた Netscape 由来の点滅効果に対応していました。HTML blink 要素や DOM String.blink メソッドでも同様の効果が得られました。Firefox 23 以
今すぐ使いたくなる！個性的でわくわくする動きのスライダー12選（Javascript・CSS3） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、サリーです。 最近は無料のスライダーでも良質のものがたくさん溢れていて、どれを使っていいか悩みすぎてしまう。。ということがよくありまして。 「これだ！」という決め手があればなあ。ということで、今回は他との違いを見せつける個性的なスライダーばかりを集めてみました。 今すぐ使いたくなるような、わくわくする動きでいっぱいです。デモページと共に紹介していきます。 【最新スライダーはこちら！】 ☞ 高機能なJavaScriptの人気スライダープラグイン4つを実際に使ってレビューしてみた Slit Slider Revised http://tympanus.net/codrops/2012/10/24/slit-slider-revised/ DEMO： http://tympanus.net/Tutorials/FullscreenSlitSlider/ 絵が真ん中から横にバカッと、時
Sublime Text
Effortlessly Split Panes and Navigate Between Code With the new Tab Multi-Select functionality, tabs become first-class citizens in the interface. A simple modifier when performing actions will split the interface to show multiple tabs at once. Works with the side bar, tab bar, Goto Anything and more! What’s New Sublime Text 4 is packed with new features and enhancements, including: GPU Rendering
iframe 要素の seamless 属性を試してみた
WebKit Nightly Buildsが iframe 要素に追加された seamless 属性に対応したとのことなので、早速どんな感じになるのか確認してみました。 Last week in WebKit: Inspector's sources panel and private names ： Surfin' Safari Add seamless layout code (and pass most of the remaining seamless tests) ： Changeset 118291 WebKit 現在公開されている WebKit Nightly Builds の最新版、及び Google Chrome も、開発者向けビルド （Dev channel） の最新版 「21.0.1155.2」 で動作しているのが確認できました。インストール済みの方は下記にデモページ
Bootswatch
Easy to Install Simply download a CSS file and replace the one in Bootstrap. No messing around with hex values. Customizable Changes are contained in just two SASS files, enabling further customization and ensuring forward compatibility. Tuned for 5.3.2 Themes are built for the latest version of Bootstrap. Version 4, version 3, version 2, and other releases are also available to download.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - PuerkitoBio/goquery: A little like that j-thing, only in Go.
html5-memo.com
BEM
UIkit
New Content Available soon!
