CSS Flexboxで何ができるのか、どういうレイアウトができるのか、基礎知識・バグ情報をはじめ、グリッドやコンポーネントの実装など、Flexboxの有用なチュートリアルやフレームワーク、便利なオンラインツールを紹介します。
CSS Flexboxの使い方・バグ情報・グリッドやコンポーネントのフレームワークなど、有用なリソースのまとめ
CSS Flexboxで何ができるのか、どういうレイアウトができるのか、基礎知識・バグ情報をはじめ、グリッドやコンポーネントの実装など、Flexboxの有用なチュートリアルやフレームワーク、便利なオンラインツールを紹介します。
A/Bテストを成功させるためのフレームワーク【3W2H】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、株式会社アッションの小林です。 全3回の「失敗しないためのA/BテストやLPOのやり方シリーズ」第2弾です。 A/Bテスト・LPOシリーズ なぜ失敗する？A/Bテストの運用が上手くいかない企業の共通点 A/Bテストを成功させるためのフレームワーク【3W2H】 A/Bテストツール「VWO」の隠れた機能とは？使い方の実例公開 A/Bテストを成功させるために、最も重要なこと。 それは、“効果的なテストアイデアを考案すること”に他なりません。 テストのアイデア出しは勘でおこなっている 1回目のテストは好調だったが、2回、3回目となるとうまくいかない 自信を持って自分のテストアイデアに効果がある！と言い切れない など、根拠ある数字や考え方を元に効果的なテストアイデアを考案することがなかなかできないものです。 そこで今回は、そんな方のために自信を持ってテストアイデアを作成できる手順をご紹介
単なるCSSリセットではなく、レスポンシブ対応のWeb制作を見据えたテクニックがいろいろ盛りこまれたスタイルシート -Marx
CSSリセットと呼ぶべきか、もしくはフレームワークと呼ぶべきか、非常に迷うのですが、そのどちらにも利用できるスタイルシート「Marx」を紹介します。 単なるCSSリセットに留まらず、レスポンシブ対応の最近のWebサイトの制作を見据えたさまざまなテクニックが盛りこまれており、コードを一行ずつ勉強したいですね。 Marx Marx -GitHub Marxの特徴 Marxのデモ Marxの中身 Marxの特徴 JavaScriptやclass付けを使用しないraw CSS すべてのブラウザに一貫したレンダリングを提供 クリーンなタイポグラフィ ナビゲーションやボタン、フォームなど、カスタマイズ可能 レスポンシブ対応 シンプルでミニマルなデザイン ファイルサイズは、7.7kb CSSリセットとしてはスタイルが少し多く、ページ作成のフレームワークとしては足りない感じです。 Marxのデモ デモペー
AngularJS 1.2 日本語リファレンス | js STUDIO
AngularJS 1.2 API ガイド TIPS ngモジュール ディレクティブ フィルター サービス 型 グローバルAPI ngMockモジュール サービス グローバルAPI AUTOモジュール サービス ngAnimateモジュール サービス ngCookiesモジュール サービス ngMockE2Eモジュール サービス ngResourceモジュール サービス ngRouteモジュール サービス ディレクティブ ngSanitizeモジュール フィルター サービス ngTouchモジュール ディレクティブ サービス このサイトについて AngularJSの日本語リファレンスです。 AngularJSの本家サイト(英文) の内容を翻訳して作成していますが、誤訳や誤記があると思いますのでその点についてはご了承ください。 もし、誤訳などの間違いを見つけましたら、 @tomof まで教え
新しいものを制作できる予感！垂直・水平のリズムを大切にしたレイアウトを組み立てるフレームワーク -xy.css
Documentation -xy.css Step 1: ダウンロード xy.cssを下記ページからダウンロードします。 ダウンロード -xy.css Step 2: 水平のグリッド設計 HTMLは非常にシンプルで、classなど余計なものは一切ありません。 <header></header> <article></article> <aside></aside> <footer></footer> 天地にヘッダとフッタ、コンテンツとサイドバーを2カラム水平に配置します。 header, footer { width: 100%; } article { width: 66.6667%; float: left; } aside { width: 30.769231%; float: right; } Step 3: 垂直のグリッド設計 articleとaside内に、見出しとパラグラフ
シンプルなベースフレームで明快にレスポンシブデザインが実装できるフレームワーク「BASE」
最近のWEBデザインの主流の一つレスポンシブデザイン。端末の解像度に応じて、その端末に最適化したデザインを提供してくれるものですが、慣れていないとなかなか一から構築となると難しいものです。今日紹介するのはシンプルなベースフレームで明快にレスポンシブデザインが実装できるフレームワーク「BASE」です。 こちらは「Super Simple Responsive Framework」とある通り、至ってシンプルなもので、テキストリンク、リスト、テーブルなどなど、基本要素のみで構築されています。 詳しくは以下 基本だけで構築されていますので、ソースも構造も非常にシンプルでベースのフレームワークとしてはかなり使い勝手のいいものになっております。ちなみにこちらのフレームワークはIE7以上、Chrome、Firefox、Operaに対応しています。 レスポンシブデザインを自分でコーディングしたい。学びたい
クリーンなデザインのレスポンシブWebデザイン対応WordPressテーマ・Murmur
レスポンシブWebデザイン対応のWP テーマ、Murmurのご紹介です。デ ザインもクリーンで綺麗。このまま 使ってもいいかもしれません。イメ ージスライドショーも付いていま した。 レスポンシブなWPテーマです。もう珍しくない存在になってしまった印象ではありますが、作るのが大変なのはよく分かるのでこういったものをフリーで配布する方を尊敬します。僕はフリーのテーマは1つしか作れていません・・
[CSS]高性能すぎてビックリしました、レスポンシブデザイン用の超軽量フレームワーク -Kube Framework
[CSS]高性能すぎてビックリしました、レスポンシブデザイン用の超軽量フレームワーク -Kube Framework
シンプルで使いやすく、IE7にも対応可能なレスポンシブWebデザイン向けフレームワーク・BASE
結構良さそうなフレームワーク だったのでメモがてらご紹介。 シンプルなレスポンシブWeb デザイン向けフレームワーク・ BASEです。IE7にも対応可能だそ うです。 IE7でも表示が崩れず、スマフォ等の幅狭なデバイスにも対応できるレスポンシブなWebデザイン向けのフレームワークです。 個人的には好みのフレームワークでした。多分使わせてもらう事になりそう。IE7でも表示が崩れないクロスブラウザ対応との事です。 デモページのキャプチャです。 CSSはリセット込みで11KBほど。フレームワークにはMedia Queriesが使用されていませんので、必要に応じてブレークポイントを指定してCSSを書く感じです。自分好みだったので使ってみようと思います。 BASE
シンプルさを求めて作られたレスポンシブWebデザイン対応のCSSフレームワーク・TOAST
よりシンプルに、を追求したCSS フレームワークだそうです。レス ポンシブWebデザインにも対応し ています。シンプルと言う言葉に どうも弱い・・・ 「出来るだけシンプルに」ではなく「シンプルに」をモットーに作られたようです。シンプルかどうかは個人によって意見が分かれるとは思いますのでご自信でソースや機能をお確かめ頂ければと思います。 IE7を切ってるので、結構シンプルな作りではあります。確かに英語圏のWebサイトを見てると高確率でIE7で崩れてますね。見てるサイトも偏っているので偏見でしょうけど。 IE8以降はdisplay:inline-block;が使えるのでfloatやclearfixを使用せずにグリッドレイアウトをシンプルなソースで作成できる、という事みたい。 .grids [class*="grid-"] { display: inline-block; margin: 0 0
スマフォのHTML5環境向けに作られたjQueryライクな軽量フレームワーク・jQ.Mobiの日本語サンプル作った
なかなか良さそうだったので備忘録。iOSやAndroidなど、スマートフォンでのHTML5環境に合わせて作られた軽量モバイルフレームワークです。jQuery互換なので慣れてる方は使い方もすぐに覚えられると思います。特に軽量なのが嬉しいですね。 現状、jQueryを使うのであればスマートフォンにはjQuery Mobileという選択肢となりますが、やはりファイルサイズが気になります。そこで、jQueryをなんとか軽量に使おう、という動きが少し目立ってきました。 例えばzepto.js。がそうですし、jquipという、目的に合わせてjQueryを細分、モジュール化するライブラリなどもあります。 jQ.Mobiもその一つで、jQueryっぽく使えるHTML5環境のスマートフォン向け軽量ライブラリです。 用途を絞ることで軽量化できる、って事ですかね？こういう動きは個人的に歓迎ですけど、問題は派生ラ
[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ファイルをより軽量にし、速いダウンロードを提供することが良い
ke-tai.org > Blog Archive > フレームワークを使ってOpensocialのOAuth認証を通す場合のハマりどころ
フレームワークを使ってOpensocialのOAuth認証を通す場合のハマりどころ Tweet 2010/9/28 火曜日 matsui Posted in 記事紹介・リンク | No Comments » 近頃流行のOpensocialネタです。 mixiアプリやモバゲーなどでソーシャルゲームを作るにはOpensocialのOAuth認証で、署名をチェックするという処理があります。 リクエストのURLやパラメータなどから、アクセスの妥当性をチェックするというものなのですが、フレームワークを使っているとハマることがあるので、メモ代わりに書いておきます。 例えばCakePHPなどフレームワークの.htaccessではこのような形になっていることがあります。 このmod_rewriteの処理が「url」というGETパラメータを付けて署名認証をエラーにしてしまうのです。 RewriteRule
ウノウラボ Unoh Labs: symfonyを使ってみた所感
こんにちは、オマタです。 4月に入社したばかりでここに書ける小ネタがないのですが、 symfonyを使い始めてみて便利だなと思ったことを書いてみたいと思います。 jobeetが用意されているところがすごい symfony初心者は、jobeetと言われるチュートリアルを参照しつつ、 説明の通りに自分の環境で動かしながら使い方に慣れていくのが一般的です。 このjobeetがとてもよく出来ていて、これを一通りこなすだけでインストールから エンジニア求人サイトの正しい作り方までを勉強することができます。 途中、日本語訳の説明文に間違いや分かり辛いところがあったりしますが、 そのときは個人blogに書かれているjobeet正誤情報が助けてくれます。 ちなみにウノウではjobeetの14日目までが習得推奨となっています。 jobeetへのリンク symfonyコマンドがすごい sym
ウノウラボ Unoh Labs: symfonyのfunctional testを携帯のUserAgentにしよう
こんにちは市丸です。 symfony コマンドで generate:module をすると、functional test用ファイルが自動生成されます。 symfonyで携帯サービスを作る場合、frontendは携帯端末 backendではPCブラウザでアクセスすることがほとんだと思います。 frontendのfunctional testを携帯のUserAgentにする方法を紹介します。 ※試したのは、symfony 1.4です。 まずスケルトンをコピー mkdir -p data/skeleton cp -r lib/vendor/symfony/lib/task/generator/skeleton/module data/skeleton/ data/skeleton/module/test/actionsTest.phpを以下のように改変。 <?php include(dir
ウノウラボ Unoh Labs: symfony/Doctrineのキャッシュ機能
symfonyプロジェクト全体で共通で利用される設定は、ProjectConfigurationクラス（config/ProjectConfiguration.phpファイル）のconfigureDoctrine()メソッド内で行うとよいでしょう。 以下の例では、クエリーキャッシュと結果キャッシュの両方にmemcachedドライバを設定しています。また、それぞれのデフォルトの存続時間を1時間に設定しています。 class ProjectConfiguration extends sfProjectConfiguration { public function setup() { $this->enablePlugins('sfDoctrinePlugin'); } public function configureDoctrine(Doctrine_Manager $manager) {
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
最近のJavaScript開発まとめ
HTML5とCSS3を使いこなしたくなるフレームワーク15選
http://www.designwalker.com/2010/06/html5-template.html
[CSS]フォームの新規開発と既存カスタマイズ用のフレームワーク -Formee