[CSS]モバイルデバイス用のスタイルを初期化するフレームワーク -CSS Mobile Reset
iPhoneなどのモバイルデバイスを対象とした、スタイルを初期化するCSSのフレームワークを紹介します。 CSS Mobile Reset キャプチャ：Demo 2（Demo 1もあります） [ad#ad-2] 下記は各ポイントを意訳したものです。 CSS Mobile Resetの指針 CSS Mobile Resetのスタイルシート Media Queriesを併用 CSS Mobile Resetの指針 このフレームワークは下記を指針として、現在もプロジェクトとして進行中のものです。 軽量にすること。 必要なHTML要素のみリセットすること。 必要なHTML要素のみを用意すること。 より良いタイポグラフィを提供すること。 軽量にすること モバイルデバイスでのインターネット接続はスピードが遅く、そして高価です。そのため、CSSファイルをより軽量にし、速いダウンロードを提供することが良い
Pure.css
CSS with a minimal footprint.Pure is ridiculously tiny. The entire set of modules clocks in at 3.5KB* minified and gzipped. Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered. If you decide to only use a subset of these modules, you'll save even more bytes. * We can add correctly :) the numbers above are individu
2015年、Web制作者が押さえておきたいCSSの各種リセット、アニメーション、フレームワーク、アイコンのまとめ
制作時に欠かせないリセット用のCSS、ページのグリッドやレイアウト・コンポーネントが用意されたフレームワーク、クリック・タップやホバーやスクロールを楽しませるアニメーション、モバイルにもフレンドリーなCSSでつくられたアイコンなど、ゼロから用意するのはかなり大変なCSSの便利なフレームワークを紹介します。 リセット用のCSSはこの3種類 レスポンシブ対応の定番フレームワーク Material Designに対応したフレームワーク さまざまなアニメーションが簡単に実装できるCSS かわいいアニメーションを使ったローダー 使いやすいアイコンフォント・Pure CSSのアイコン リセット用のCSSはこの3種類 HTMLの各要素のブラウザごとに異なる差異をなくし、意図した通りに実装できるようスタイルをリセットするスタイルシート。 Reset CSS 2.0 HTMLの各要素のmarginやpadd
[CSS]スタイルのリセットだけでなく、再構築にも便利なスタイルシートのフレームワーク -.toucan-css-reset
HTMLの各要素のデフォルトのスタイルをリセットするだけでなく、見出しやパラグラフ、リスト、フォームなどの新しいスタイルの再構築も想定されたスタイルシートのフレームワークを紹介します。
第4回 Progression3でWebサイトを作る（前編） | gihyo.jp
お待たせしました！ いよいよ今回よりProgression3を利用してWebサイトの作成を行っていきます。 今回は非常に簡単なサンプルサイトの作成となりますが、それでも非常に少ない労力でフルFlashのWebサイトが作成できるということを実感していただければ幸いです。 冗長となってしまうのを避けるため、既に用意してある素材を元に制作します。 以下より、元素材となるプロジェクトファイル一式をダウンロードしてください。 プロジェクトファイル それでは始めてみましょう。 まず、サイト全体をどのような構成にするかを考えます。 この作業は、Progressionのシーン機能をどのような構造にするかを決定するために必要な作業です。 今回は以下のような構造で作成することとします。1項目を1つのシーンとし、前編では子シーンまでを作成します。 図1 今回作成するWEBサイトの構造 キャストクラスの準備 キャ
Flexbox Grid
ResponsiveResponsive modifiers enable specifying different column sizes, offsets, alignment and distribution at xs, sm, md & lg viewport widths. <div class="row"> <div class="col-xs-12 col-sm-8 col-md-6 col-lg-4"> <div class="box">Responsive</div> </div> </div> FluidPercent based widths allow fluid resizing of columns and rows. .col-xs-6 { flex-basis: 50%; }Simple SyntaxAll you need to remember is
シンプルなHTMLで実装することにこだわったレスポンシブ対応の汎用性に優れたフレームワーク -Turret
シンプルなHTMLでセマンティックに実装することにこだわった、アクセシブルでレスポンシブ対応のサイトをより簡単に制作するためのフレームワークを紹介します。 MIT Licensesで、個人でも商用でも無料で利用できます。 Turret Turret -GitHub Turretの特徴 Turretはアクセシブルで、セマンティックで、レスポンシブ対応のサイトをより簡単に制作するためのフレームワークです。 レスポンシブ対応 読みやすいマークアップを使い、レスポンシブ対応のグリッドやエレメントを汎用性に優れたclassを使って実装しています。 Design First 直感的なユーザインターフェイスのために、文字の定義とカラーパレットにフォーカスしています。 No JavaScript スクリプトは使用せず、LESSベースでネイティブのWeb要素を採用しています。 セマンティック マークアップは
iPadなどのタブレットデバイスで読みやすいコンテンツを作成するためのフレームワーク -Bibliotype
iPadなどのタブレットデバイスでコンテンツを見る際に、さまざまなシーンを想定して読みやすいコンテンツを提供するためのフレームワークを紹介します。
新規サイトを構築するリソースがパッケージになった -Easy front-end framework
HTMLをはじめ、CSSやJavaScriptなどで実装するフロントエンドの主要な機能が一つのパッケージになった「Easy front-end framework」を紹介します。
px指定の次はコレ！フォントサイズやブレイクポイントに「rem」を使ったレスポンシブ対応のフレームワーク -Schema UI Framework | コリス
Webページでよく使用するさまざまなコンポーネントが簡単に利用できるフロントエンド用のフレームワークを紹介します。 最近は、フォントサイズやMedia Queriesのブレイクポイントなどの単位に「rem」を使用しているサイトが増えてきましたね。 Schema UI Framework Schema UI Framework -GitHub 「rem」の詳しい説明は、以前の記事をご覧ください。 フォントのサイズ指定はpx？ em？ 既存の再検討とこれからのテクニック Schemaの特徴 Schemaのデモ Schemaの特徴 Schema UI Frameworkの特徴 SchemaはMITライセンスのオープンソースのプロジェクトで、軽量でクリーンなフロントエンド用のフレームワークです。 セマンティックなマークアップ Web標準で、きれいなマークアップが使用されています。 LESSベース
[CSS]一つの要素にデスクトップ、タブレット横・縦、スマホ横・縦用の各レイアウトを実装できる簡単便利なスタイルシート -flexible.gs
一つの要素に、デスクトップ、タブレット横、タブレット縦、スマホ横、スマホ縦の5種類用のclassを定義し、レスポンシブ対応のフレキシブルなレイアウトを実装できるスタイルシートを紹介します。 flexible.gs flexible.gs -GitHub flexible.gsのデモ flexible.gsの使い方 flexible.gsのデモ 対応ブラウザは、デスクトップがChrome, Safari, Opera, Firefox, IEは7+対応で、モバイルもiOS Safari, Opera Mini, Android Browser, Opera Mobile, Chrome for Android, Firefox for Android, IE Mobileと現在主流のブラウザに対応しています。 デフォルトでは、デスクトップ、タブレット横、タブレット縦、スマホ横、スマホ縦の5種
![[CSS]一つの要素にデスクトップ、タブレット横・縦、スマホ横・縦用の各レイアウトを実装できる簡単便利なスタイルシート -flexible.gs](https://cdn-ak-scissors.b.st-hatena.com/image/square/f5d222ae06cf2d58d2b7bc17660d161a7352606d/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014102201-01.png)
モバゲータウンのノウハウ満載！ フレームワークMobaSiFを使おう！：第1回 ケータイ向けWebアプリケーション開発特有の技術要素｜gihyo.jp … 技術評論社
はじめに iモード／EZweb／Yahoo!ケータイなどで利用されるケータイブラウザは、極端な言い方をするとPCブラウザやフルブラウザとは「まったくの別物」です。今回はまず、ケータイブラウザ向けWebアプリケーションを開発する際に考慮すべき技術要素の説明を行います。次回以降は、そういった技術要素を共通的に処理できるフレームワークとして、筆者たちの所属する株式会社ディー・エヌ・エー（DeNA）がオープンソースソフトウェアとして2008年5月に公開したMobaSiF（Moba Simple Framework）を解説していきます。 本特集は、WEB+DB PRESS Vol.45の特集1「[イマドキ]ケータイ開発実践入門」の第2章、第3章を再構成したものです。なお、紙面の都合上で省略した説明も補っています。 各キャリア端末の世代分類 NTTドコモのiモードが開始されたのは1999年2月で、すで
第1回 Hello, Wicket | gihyo.jp
Wicketとは WicketはApache Software Foundationで開発されている、Webアプリケーション開発用のフレームワークです。フレームワークにもさまざまなものがあり、それぞれ用途が異なります。Wicketの行うことは、ブラウザからのリクエストを受け付け、処理を振り分け、ページを生成してブラウザにレスポンスを返すことです。位置づけとしては、Apache Strutsと同じと考えれば良いでしょう。 Wicketの特徴 Wicketには他の多くのWebフレームワークとは異なる、大きな特徴があります。多くのWebフレームワークが、リクエストからレスポンスまでのフロー（流れ）をどのようにコントロールするか、という方針で作られているのに対して、Wicketは「Webページをページというオブジェクトとして扱い、オブジェクトを組み立てることでアプリケーションを構築する」という考え
WSGIとPythonでスマートなWebアプリケーション開発を 記事一覧 | gihyo.jp
運営元のロゴ Copyright © 2007-2024 All Rights Reserved by Gijutsu-Hyoron Co., Ltd. ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。
Front-end CSS Frameworks
UI is the vocabulary of the web. Semantic empowers designers and developers by creating a language for sharing UI. Lose the Hieroglyphics: Semantic is structured around natural language conventions to make development more intuitive. Have a conversation with your components: Semantic gives you a variety of UI components with real-time debug output, letting your code tell you what its doing.
ASCII.jp：シングルページをデザインする3つのポイントとワークフロー (1/3)｜イシジマミキの実践！「シングルページ」デザイン塾
最近よく見かけるシングルページを作るデザイン塾。今回から、CSSフレームワークを使って実際にシングルページを作成していきます。第2回は、デザインツールを使ってページをデザインし、ベースとなるHTMLを作成します。 シングルページをデザインしよう 最初に、デザインソフトを使ってざっくりと全体のデザインを作成します。今回は、自分自身の経験やスキルを活用してボランティア活動をする人の意思表示やコンタクト方法がわかるWebサービス「PROBONO PAPRIKA」のサービス紹介ページをシングルページで作ろうと思います。 自分自身の経験やスキルを活用するボランティア活動はプロボノ（Pro bono）と呼ばれます。このサイトは、メインビジュアル、サイトの内容を説明する「アバウト」、サイトの使い方、の3つのブロックに分け、最後に何かを足そうかなぁ、と宙ぶらりんのままにしています。 シングルページのデザイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Normalize.css: Make browsers render all elements more consistently.
TECH PROjin
[CSS]フォームの新規開発と既存カスタマイズ用のフレームワーク -Formee
treesaverjs.com