CSSスプライトを生成する「grunt-spritesmith」
CSSスプライトを生成する「grunt-spritesmith」 grunt-spritesmithはCSSスプライトを生成するGruntモジュールです。 Gruntの基本的な使い方は「Gruntで始めるWeb制作の自動化 - to-R」を参照に。 grunt-spritesmithのインストールは以下のコマンドです。 npm install grunt-spritesmith --save-dev Gruntfile.jsの内容は以下のようにします。srcで個別の画像を置くディレクトリを、destCSSで関連するCSSを書き出すファイル名(SassやLess、StylusでもOK)を、destImgで結合したスプライト画像のファイル名を指定します。 module.exports = function(grunt) { //グラントタスクの設定 grunt.initConfig({ spr
note ――つくる、つながる、とどける。
クリエイターが文章やマンガ、写真、音声を投稿することができ、ユーザーはそのコンテンツを楽しんで応援できるメディアプラットフォームです。だれもが創作を楽しんで続けられるよう、安心できる雰囲気や、多様性を大切にしています。
プログラミング勉強中の人にオブジェクト指向とは何なのかを何となく伝えたい話 - かまずにまるのみ。
この文章について OOP（オブジェクト指向プログラミング、オブジェクト指向パラダイム）について プログラミング勉強中の大学生さんに説明する機会が何度かあったので、 自分の中で整理するために書きました。 中には適切でない説明もあります。ばっさり省いているところもあります。 詳細より イメージを掴んでもらうことを優先しているためです。 「それにしてもあんまりだなー」という表現がありましたらご連絡いただけると嬉しいです。 大学生さん 大学生さんたちはいろんな背景を持っています。 プログラミングを始めたばかりの人 独学で Objective-C や JavaScript を書いた経験がある人 Web やコンピュータの仕組みについてもこれから勉強する予定の人 使用言語 大学生さんたちはプログラミングの第一歩として JavaScript と PHP を使っています。ここでは説明に PHP のコードを使
知っておくと効率的！コーポレートサイト制作が捗るjQuery プラグインや使い方まとめ
作成：2014/04/7 更新：2014/11/01 Web制作 > あの企業サイトで使われている効果やテクニックをまた探さないといけない、そもそもどういったキーワードで探したらいいのか分からない。そんなこんなで、今回は奇抜なものではなく、「企業サイトで見たことある！」というような、コーポレートサイトに使えそうな定番のプラグインや作り方をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スライドショー １．カルーセル（横） ２．フェードアウト ３．画像と文字をスライド ４．文字が遅れて移動する効果 ５．異なるタイミングを設定できる ナビゲーション・メニュー ６．多階層 ドロップダウンメニュー ７．多階層 効果つき ８．スマホではドロップダウン ９．スマホではセレクトメニューに １０．Amazon風 メガドロップダウンメニュー １１．横スライド １
「LINEビジネスコネクト」が企業CRMを変える――ワンタッチでピザを注文、位置情報でタクシーを配車 | Web担当者Forum
2014年2月、LINEが発表した、「LINEビジネスコネクト」は、LINEと企業システムとの連携を可能にすることで、企業CRMの形を劇的に変えるものとして業界を震撼させた。今や、LINEを知らないというマーケターはいないだろう。登場から数年で、LINEのユーザーは世界で3億7000万、国内で5000万を超え、老若男女のコミュニケーションに欠かせない生活インフラへと成長した。企業からの広告が無視される時代に、LINEはいかにして顧客とのコミュニケーションを実現しているのだろうか。 ソフトバンク・テクノロジーユーザー会の基調講演で、LINE株式会社 広告事業部 グループ長 執行役員の田端信太郎氏は、「LINEが変えるマーケティングの未来 ～広告が無視される時代になぜLINEの企業スタンプは無視されないのか？～」と題して登壇した。 LINEのユーザー数は急速に増え続けており、講演の2日前の時点
スマートフォン時代のCSS Frameworkあれこれ : 構想雑文
構想雑文 WEBデザインとmacに関すること中心の自分向けメモ主体のブログ。 DREAMWEAVER、Illustrator、Photoshopなどのアプリケーションの設定や使い方。HTML、CSS、JavaScript、PHPのコーディングのことをあれこれ書いています。 ここ最近のサイトへのアクセスログを見ていると、スマートフォンからのアクセスが増加傾向にあるので、ウェブサイトつくるときもスマートフォンに考慮したサイトにせねば、とようやく思い始めています。 スマートフォン向けのレイアウトをつくるのは苦手だし、特に、レスポンシブウェブデザインのレイアウトって面倒としか思えないし、どうするかなぁ、と思うもすぐにCSS Frameworkを使えば解決するかなぁ、と思って調べてみました。 CSS Frameworkの数あり過ぎです。 昔は、グリッドレイアウトをきれいに作成するぐらいのものでしたが
これからPhotoshopに乗り換えるFireworksユーザーへ。注意が必要なポイントとその解決策
2013年5月、Fireworks開発終了ニュースを受け、多くのFireworksユーザーたちがAdobe許すまじと誓ったあの事件から早いものでもうすぐ1年経とうとしています。 私は今でもFireworksが大好きですし未だによく使っていますが、最近ではPhotoshopでデザインすることが多くなってきました。PhotoshopはCCになってからだいぶ使いやすくなり、いい感じです。 ただ、Fireworksユーザーからすると、Photoshopでデザインする上で不便だなーと思った点がいくつかあったので、今更ですがまとめてみました。ものすごーく地味なことばっかりですが、FireworksからPhotoshopに移行する方ならば一度は困るんじゃないかと思うことなので、参考になれば幸いです。 2016/7/5 追記 CSSHatで表示して見る を今更追記しました。サンキュー@sou_lab 20
HTML5 | MDN
HTML5 は HTML で定義されている最新の標準仕様の名称です。この用語は、 2 つの異なる概念を表しています。これは HTML 言語の新しいバージョンであり、新しい要素、属性、動作、およびより多彩でパワフルなウェブサイトやアプリケーションを構築することができるより大きな一連の技術でもあります。このセットは HTML5 & friends と呼ばれることがあり、よく HTML5 と短縮されます。 このリファレンスは、すべてのオープンウェブ開発者に便利になるように設計されており、機能に基づいていくつかのグループに分類された数多くの HTML5 の技術についてのリソースにリンクしています。 Semantics: そのコンテンツが何であるかをよりはっきりと表現することを可能にします。 Connectivity: 新しい革新的な方法でサーバーと通信することができます。 Offline and
知らなきゃ損！CSSフレームワーク「HTML KickStart」の便利さを試してみた！ | 波乗りスタッフ日記/Web制作会社サーフボード
こんにちは、デザイナーの瀬戸です。 最近、子供の足蹴と夜泣きの二重苦であまり眠れてません。 ところで、CSSフレームワークという言葉を聞いたことはありますか？ フレームワークとは（wikipedia引用）・・・ 開発・運用・意思決定を行う際に、その基礎となる規則・構造・アイデア・思想などの集合のこと。日本語では「枠組み」などと訳されることが多い。 簡単に説明すると、HTML・CSS・JSの知識があんまりなくてもきれいなページがつくれるよ！という便利ツールのようなものです。 世に出回っているCSSフレームワークは数多くあるのですが、今回「HTML KickStart」というオサレな名前のCSSフレームワークを試してみました。 使い方は非常に簡単です。 以下のURLより、HTML KickStartをダウンロード →HTML KickStartを全力ダウンロード blank.htmlを直接編集
Adobe製超軽量！！レスポンシブCSS フレームワークTopcoat
Adobe製超軽量レスポンシブフレームワークTopcoat デザインしたくないシリーズ、第二弾！最近とっても気に入っているレスポンシブフレームワークTopcoatを紹介します。 Topcoatとは TopcoatはAdobe製のレスポンシブフレームワークで、最大の特徴がとにかくめっさ早い！ってこと。 jQueryMobileを使ってよくスマートフォンサイトを作っていたのですが、「いかにもjQuerymobile」感があったり、重い、デザイン上のカスタマイズがしずらいというものがありました。 ところがどっこい、Topcoatはとにかく軽く、さくさく。フレームワーク元のデザインも「今風」なフラットでシンプルなデザイン。 シンプルだから、後からカスタマイズも非常にしやすいのが特徴です。 流行りのフラットなデザイン ボタンやフォームの一つ一つがフラットで洗練されたデザインというのも特徴で、シンプル
CSSフレームワーク Bootstrapの簡単な使い方
CSSフレームワークの一つであるBootstrapの簡単な使い方を紹介します。CSSを書いてて良く思うのですが、決まった挙動やレイアウトにする場合に毎回書くのがめんどくさくなるんですよね。 そういうときに役立つのがフレームワーク。このBootstrapもフレームワークの一つで既にCSSが記述されているファイルを読み込んで、HTMLにクラス属性を書くだけで簡単に使うことができます。 このブログでもBootstrapに切り替え、簡単にレスポンシブデザインを構築することができました。また、レイアウトだけでなくjQueryを使ってドロップダウンメニューやタブナビ、ツールチップなど一般的なWebアプリで使えるようなライブラリが入っています。 この記事はBootstrap2の使い方についての内容です。Bootstrap3についてはこちらをご覧ください。 Bootstrapのダウンロード では早速使って
レスポンシブWebデザインに使えるCSSフレームワーク&グリッドシステム
レスポンシブWebデザイン使えるCSSフレームワークとグリッドシステムをまとめました。※随時更新中です Bootstrap 様々なコンポーネントも揃った高機能フレームワーク。Customizeから必要なファイルのみ選択してダウンロードもできますが、gitからはless形式で提供されてるのでこちらを使用したほうがよりカスタマイズがしやすいです。 Foundation 様々なコンポーネントも用意された高機能フレームワーク。必要なCSSのみ選択してダウンロードもできますが、gemでSass形式のものをダウンロードしたほうがカスタマイズしやすいです。 Gumby 様々なコンポーネントも用意された高機能フレームワーク。必要なCSSのみ選択してダウンロードもできますが、gitでcloneするとSass形式が入手できるので、そちらのほうがカスタマイズしやすいです。 GroundworkCSS 様々なコン
レスポンシブ対応CSSベースの軽量フレームワークのまとめ | コリス
そのままサイト制作に使ってももちろん便利、自分用のテンプレートを作るための勉強にも役立つCSSベースのフロントエンド用フレームワークを紹介します。 一部のフレームワークで古いIE用にmodernizr.jsやrespond.jsなどを使用しています。 Kube Kube -GitHub レスポンシブ対応、プロ仕様のシンプルでミニマルなフレームワーク。 ファイルサイズ 15.6KB 対応ブラウザ Chrome, Safari, Firefox, Opera, IE8+, and スマフォ用ブラウザ ライセンス 個人・商用ともに無料利用可 Base Base -GitHub レスポンシブ対応、ベーシックなUIエレメントやグリッド揃ったフレームワーク。LESS, Sassだけでなく、.htaccessを含むサイト制作用のフォルダやグリッドのPSDもセットになっています。 ファイルサイズ 3KB(
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
YahooのCSSフレームワーク「Pure」 – ウェブアラカルト
ちょっと前に知った、Yahooが公開しているjavascript不要で軽量なCSSフレームワーク「Pure」関連のメモ。 Pureという、他でもわんさか使われてるような単語が名前になってるので、検索に引っかかりにくいということもあり、このページにメモっておくことにしました。 Pure(公式) Pure自体が欲しい方は、ここにいけばOKです。 Pureを使うには、 <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.2.0/pure-min.css"> と1行書くだけで大丈夫です。これに全機能が入ってます。 ※2013年6月11日に0.2.0が公開されました。 全機能入ったもの(pure-min.css)で20KB程度です。 Bootstrap2.x系は100KB位なので、ずいぶん軽いですね。もちろんその分シンプル(出来る
Pure を使って 5分でレスポンシブな Blog テンプレートを作る
Pure は Yahoo! が公開した CSS フレームワークですが、試しに使ってみましょうということで、自分で書くスタイルは極力少なくして、簡単に Blog のテンプレートっぽいものを作ってみました。 さすがに 5分はウソです すいません。でも簡単でしたよ。 Pure ： A set of small, responsive CSS modules that you can use in every web project. Pure とは Pure は、簡単に言ってしまえば Twitter が公開している Bootstrap などと同じ、CSS のフレームワークですが、CSS のみに絞ることで、その容量は最大で 5.7KB とかなり軽量。Yahoo! の CDN から読み込めば、gzip された状態で読み込めます。 また、各機能を個別に読み込むことも可能ですので、必要な機能だけを選択す
Pure
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
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
レスポンシブWEBデザインなら導入したいレスポンシブ対応CSSフレームワーク35（〜2013年9月まで） | co-jin
レスポンシブWEBデザインにますます注目が集まっているようです。 つい最近では、カラーミーショップでもレスポンシブWEBデザインに対応したテンプレートが発売されていました。 またECサイトを制作・運営する勉強会でも、話題はレスポンシブ。 スマホ向けのサイトからの売上が、ここ最近急激に伸びてきていることから、いかにスマホ向けにするかということが課題に。 メンテナンス性を考えると、レスポンシブにしたいという方も多くいらっしゃいました。 レスポンシブというと、難しいように感じますが、レスポンシブWEBデザインに対応したフレームワークを利用すれば、比較的に簡単に導入することが可能です。 個人商店さんなんかで、予算がかけられないという方は、フレームワークの利用を考えるといいかもしれませんね。 そこで今回は、昨年から2013年9月までに発表されたレスポンシブWEBデザイン対応のCSSフレームワークをご
Bootstrapの使い方超入門 (1/4) - ＠IT
話題のレスポンシブWebデザインも簡単にできる、CSSフレームワーク「Bootstrap」の概要と基本的な使い方をサンプルとコードを交えて紹介します。 最近はやりのHTML5、JavaScriptライブラリ、CSS3、APIの紹介、またそれらを組み合わせたサンプルアプリケーションの紹介と解説を厳選して紹介、解説していく本連載「HTML5アプリ作ろうぜ！」。今回紹介するフレームワークは「Bootstrap」です。 話題のレスポンシブWebデザインも簡単にできる、CSSフレームワーク「Bootstrap」とは 現在のWeb制作、開発では、ともにスピードが重視されています。「Bootstrap」を使用すると、既に用意されているスタイルを適用するだけで、格段に速く見栄えを整えられます。事実、Webシステムの管理画面などでBootstrapを使用するケースも増えてきました。 Bootstrapは最近
これからTwitter Bootstrapをはじめる人のためのエントリまとめ - 小さい頃はエラ呼吸
はじめに 今、Twitter Bootstrapが一部のエンジニアで人気です。 Twitter BootstrapはWebデザインが得意ではないエンジニア向けにTwitter社が開発／提供するCSSフレームワークです。このTwitter Bootstrapを利用すると、簡単にTwitterっぽいデザインのWebサイトを作成できます。 そこで、これからTwitter Bootstrapをはじめてみようと思うエンジニアの人たち向けに、役立つ記事の数々をまとめてみました。 このエントリを書こうと思ったきっかけは、以下のスライドでした。とても分かりやすく、はじめて知るようなサービスなども網羅されており、とても参考になりました。 Twitter bootstrap入門 #twtr_hack jQueryプラグイン徹底活用 プロのデザインアイデアとテクニックposted with amazlet at
[JS]jQueryのプラグイン100選 -2013年総集編
今年も数多くの素晴らしいjQueryのプラグインがリリースされました。当ブログで紹介したものをはじめ、未紹介のものまで、jQueryのプラグイン100+α選です。 今年目立ったのは、アニメーションを使ったスクロール関連のスクリプト。 スクロール前提の1ページサイト、パララックスなど、コンテンツをより大きなサイズで楽しむものが増えました。また、スマフォ・タブレットに大きく影響を受けたインタラクションも目立ちましたね。 1ページコンテンツ用のスクロール関連 パララックス スクロール関連 スクロールで定位置関連 その他スクロール操作・補助関連 スクロールバー関連 レスポンシブ関連 エフェクト関連 ナビゲーション関連 レイアウト関連 画像ギャラリー関連 画像拡大・配置・キャプション関連 コンテンツスライダー関連 カルーセル関連 アニメーション関連 フォーム関連 コンテンツのツアー関連 テキスト関連
MdN Design｜総合情報サイト
フレームワーク＆API 5-01 Twitter Bootstrapを使ったサイト構築の流れ（前編） レスポンシブWebデザインとグリッドレイアウト、そしてメディアクエリに対応したCSSフレームワークであるTwitter Bootstrapについて、CSSメタ言語のLESSとともに解説する。 制作・文／酒井能克（有限会社ブルームーン） BROWSER IE…7over Firefox…3.6over Safari…3.1over Chrome…10over Twitter Bootstrap とは Twitter Bootstrapとは、CSSフレームワークの一つだ。Webサイトを見てTwitterと似たデザインを見かけたら、Twitter Bootstrap が使われていると考えていい。また、Apache License v2.0 というオープンソースのライセンスなので、誰でも自由に使う
いまさら聞けない「Twitter Bootstrap」とは？ (1/2)
スマートフォンやタブレットの普及によって、いつでもどこでもインターネットにつながるようになり、さまざまなWebサービスをたくさんの人に提供できる環境が整ってきました。それに伴い、中小企業や個人のスタートアップが活発になり、新しいWebサービスが次々と生まれています。 そこでエンジニアの間で関心が高まっているのが、「いかに効率よく開発・制作」し、「アイデアをいかに早く形にして世の中にローンチする」か、ということです。 この連載では、特にスタートアップで注目を浴びているフロントエンドツール「Twitter Bootstrap」について、基本的な使い方から実際のWebアプリ開発での導入方法までを紹介します。まずはTwitter Bootstrapが何なのか、どのような場面で使われているのか、確認しましょう。 Twitter Bootstrapの特徴 Twitter Bootstrapは、米ツイッ
ノンデザイナーも必見！Twitter BootStrapの特徴と導入前に確認すべき事 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちわ。アートディレクター兼2児のパパ、長岡です。 毎回子どもネタですが、最近アンパンマンを指さして「パンパーンパン」とそれっぽい発音をしている息子を見て「こいつ可愛いな」と癒されています（笑） 屈託のない笑顔と持ち前のあどけない仕草で、保育園のマダムたちをイチコロ（表現が古い？）にしているそうです。将来がちょっと心配です・・・。 さて今回は、HTML5・CSS3・jQueryを使用したフロントエンドツールの王道「Twitter Bootstrap（※ver2.3.1）」のお話。 ※この記事を書いている最中にver3.0がリリースされました！（汗）後でゆっくり触ってみたいと思います。 ▲Twitter BootStrap ver2.3.1 Web制作者なら、一度は触れたことがあることと思います。 そのまま使ってみたり、カスタマイズして使ってみたり・・・。 使い方を間違えなければ、とても
ひと味ちがうTwitter Bootstrapの9個の無料テンプレート&有料まとめサイト - 酒と泪とRubyとRailsと
ひと味ちがうTwitter Bootstrapの9個の無料テンプレート&有料まとめサイト Jan 28th, 2013 Tweet Twitter Bootstrapはデザインが苦手なプログラマのための必須ツールです。今回は、一味違ったBootstrapサイトを作るときにきっと参考になるテンプレートをまとめてみました！ (03/05 追記) FlatUI、Bootstrap Expoを追加しました (03/24 追記) Flatstrapを追加しました (04/03 追記) MagicSuggestを追加しました (04/04 追記) Bootstrapのリソースネタを別の記事にしました 無料のテンプレート 無料のBootstrapテンプレートの紹介です。BootswachのようにCSSだけで適用できるものと、HTML/CSS/JSなどいろいろ追加しないと実現できないものがあります
FINDJOB!終了のお知らせ | FINDJOB!
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
Owl Carousel
How To Use 1. Load jQuery and include Owl Carousel plugin files To use Owl Carousel, you’ll need to make sure both the Owl and jQuery 1.7 or higher scripts are included. <!-- Important Owl stylesheet --> <link rel="stylesheet" href="owl-carousel/owl.carousel.css"> <!-- Default Theme --> <link rel="stylesheet" href="owl-carousel/owl.theme.css"> <!-- jQuery 1.7+ --> <script src="jquery-1.9.1.min.js"
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://jp.techcrunch.com/2014/04/07/jp20140407-piece-of-cake-note/
新着記事
gumbyframework.com
Home Page | Cntlog
morinkey.net
最近のレスポンシブ対応フロントエンドCSSフレームワークまとめ
Bootstrapだけじゃない！マッハでフラットや美しいデザインのUIが導入できそうなワイヤーフレームやUIキット等色々！ | バンクーバーのうぇぶ屋
Components · Twitter Bootstrap
Bs3 Document
http://cosao.net/archives/4331
http://wedesignpixel.com/free-responsive-jquery-carousel-slider-plugins/
DesignsCrazed.com is for sale | HugeDomains