free nudes, naked, photos,
Gruntと同じくタスクランナーのGulp。Gruntよりもビルドファイルが読みやすく、スピードも軽快な気がします。GulpとGrunt Gruntに関しては前回の記事で(タスクランナーGrunt導入メモ)導入方法と簡単な使い方を紹介しましたが、今回はGruntと同じタスクランナーのGulpでSassのコンパイルとブラウザを自動で更新するlivereloadを使ってみたいと思います。 Gulpのいいところ Gruntと大きく違う部分は以下になります。 ・Gruntよりもビルドファイルの可読性が良く、短いコードで済む ・なるべくタスクを並列で実行しようとするので、スピードが早い Gruntもとても優秀ですが、GulpはGruntの良い部分を引き継ぎ、短所を改善したツールだそうです。そのためビルドファイルの書き方や導入方法はGruntと似ているので、Gruntを使ったことのある人は、使いや
0行〜 準備すること Modernizr.js ブラウザの機能判定プラグイン。 読み込むだけでhtmlタグにブラウザの機能クラス名がつけられる。↓ <html lang="en" class="js no-touch postmessage history multiplebgs boxshadow opacity cssanimations csscolumns cssgradients csstransforms csstransitions fontface localstorage sessionstorage svg inlinesvg no-blobbuilder blob bloburls download formdata"> クラス名の最初にno-がつくと非対応、そうでないものは対応。 no-touch: タッチイベント非対応 postmessage: postMessa
いよいよ公開されたBootstrap3。このサイトでは、Bootstrap3を徹底的に解説していきます。ついに登場した「Bootstrap 3」。このサイトでは、Bootstrap3を徹底的に解説していこうと思います。 Bootstrap 公式サイト(英語) Ver. 3.0.3 が最新版のようです(2014/01/02 現在) お問い合わせはコチラ Menu はじめに Bootstrap とは? Bootstrap3 導入の仕方 基本のHTMLコード CSS グリッドシステム タイポグラフィ(見出し、段落、文字サイズなど) コードの表示 テーブル(表) フォーム ボタン ヘルパークラス レスポンシブWebデザインで使えるコード Components アイコン ドロップダウン Coming Soon ... About どうもこんにちは、SofPyon(そふぴょん)です。最近、Bootst
メンテナンスブルな CSS の設計の話で OOCSS や SMACSS ってのがあるけど、そのうちの一つで BEM というのがある。 http://bem.info/ BEM-Methodology Definitionsの日本語訳 を見てみると XJST とか BEMHTML とかいうテンプレートエンジンに関する内容(よくわかってない)も書かれてるんだけど、日本ではこの中の BEM を CSS 用に使いやすくした MindBEMding (日本語訳はこっち )の命名規則が良いってことで流行ってるみたい。 また、今 BEM っていったら大体は MindBEMding のことを指してるみたい。 BEM-Methodology Definitions の内容全部をこれから理解しようとすると自分が知らない知識が多くてちょっとアレなので.. 、MindBEMding の内容を先に抑えておきたいと思
What's this? HTMLソースをもとに、id,class名CSS、子孫セレクタCSS、子セレクタCSS、LESS、SASS、SCSSを自動生成するオンラインサービスです。 従来のHTMLコーディグを強力にサポートします。 What's LESS/SASS/SCSS? LESS / SASS / SCSSはCSSを効率的にコーディングできるCSSメタ言語です。 従来のCSSに比べ子孫セレクタ・子セレクタを簡単に管理することができ、高速にコーディングすることができます。 LESS OFFICIAL SASS/SCSS OFFICIAL 関連サービス 高画質サムネイル生成サービス HTTPクエリデコード SQLフォーマッター Insert文フォーマッター スペースフォーマッター JSONフォーマッター HTML/XMLフォーマッター Emmet toolkit for <textare
今年ぐらいからか、BEM というキーワードが国内外のフロントエンドな人達の間で使われたり議論されているのをよく見かけるようになりました。 私自身も何度か調べたりbem-tools に触れてみたりとしていたのですが、最近になってようやくBEM が何なのかが少しずつ掴めてきたような気がします。 そこで今回はまず第一弾として、これまで私がBEM について調べてきたこと、実際に試してみた上で理解したこと等を分かりやすくまとめたいと思います。 BEM について聞き慣れない方、ゼロから始めてみようという方々のスタートガイドとなれば幸いです。 BEM とは? BEM とは、WEB サイト・アプリケーション等の開発において… ・メンテナンス性の高いものを短期間で開発すること ・チームでの作業効率を上げ、メンバーの追加・変更による影響を最小限に抑えること ・UI の質を保ち、変更に労力をかけないこと な
スマートフォン(ios、android)向けのウェブサイト・ウェブアプリを作る際に個人的によく使うhtml、css、javascriptの備忘録。 html関連 headタグ内での設定<!-- //デバイスサイズにあわせて表示領域を変更する --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- //電話番号のリンクを無効化 --> <meta name="format-detection" content="telephone=no"> <!-- //ホーム画面用アイコン --> <link rel="apple-touch-icon" href="icon.png"> <!-- //ホーム画面用アイコンの光沢を無効化する --> <link rel="apple-touch-icon
Webで文章を掲載する際、英数字は半角表記で統一するのが「常識」です。ですが、なぜ全角英数字はダメで半角英数字に統一するべきなのでしょう。改めて聞かれるとついつい「そういうものだから」と答えてしまいがちではないですか? また、検索してみても、ちゃんとまとめられた記事がなかなか見つけられません。ということで、全角英数字ではなく、半角英数字を採用する理由をまとめてみました。 ※本記事は技術的な検証が十分に行われておらず、誤った情報である可能性があります。あらかじめご了承ください。 全角英数字は再利用性できません たとえば、電話番号やURLが全角で表記されていると、Office製品やメーラーでリンクとして認識されません。ブラウザのアドレスバーにコピーアンドペーストしても開けず大変不便です。 全角英数字は禁則処理が行われません ブラウザでは英単語が途中で改行されないよう折り返しが行われます(禁則処
最適な画像の書き出しは、JPG, GIF, PNG、どれを使うべきか 2011-07-26 デザインされたものをコーディングする上で、画像はサイトのパフォーマンスにも影響する重要な要素の1つです。 画像形式には、jpg, gif, pngなど種類があり、それぞれの特性を理解した上で選定できているでしょうか? 画像形式についてまとめてみます。 画像の種類 JPEG インターネットでよく使用される画像形式で、静止画像を圧縮する方法の1つです。 ブロック単位で圧縮変換を行うため、圧縮率を上げるとブロックノイズというノイズが生じます。 特に小さくすると赤の部分でノイズが発生しやすい。 IE6~8(IE9は未確認)において#02050aというバグがあり、 JPEG画像でopacityを使用すると#02050aの部分が透過jpgになるバグがあります。 上記の点を注意する必要がありますが、1670万色ま
「CSS Sprites(CSSスプライト)」についてまとめます。 すでにいろんなサイトで紹介されてるので、検索すれば制作手順から何から何までたくさんヒットしますが、それ故、どの方法が一番ベストなのかってのがいまいち不確かだったので、個人的にまとめ直してみることにしました。 TwitterやFacebookのスプライト用画像 CSSスプライトは、サイトの読み込みを高速化する目的で使われているCSSの小技です。TwitterやFacebookなどでは、ちっこいアイコンとかマークを表示するのに使われてますね(2012.8現在)。 具体的には「サイト内で使用するたくさんの画像(パーツ)をなるべく一枚画像にまとめて、サーバへのリクエスト回数を少なくする」という事をやってます。 画像とCSSだけで高速化が実現できるので大変お手軽なのですが、CSSスプライト用の画像を用意するにはちょっとした工夫が必要
Captcha security check laquu.com is for sale Please prove you're not a robot View Price Processing
CSS3には興味深い様々なプロパティがありますが、これらを勉強するにあたって知っておきたいCSS3の基礎をまとめてみます。 過去の記事に手を加えたものや新たに書いたものなど幅広くまとめてみましたので、ぜひ抑えておいてください。 今回は結構ボリュームもあるので目次を作っています。 1. スタイルシートの構造 CSS3に限ったことではないですが、CSSの構造は下の図のように、セレクタ、プロパティ、値となっています。 もちろんプロパティと値は一対です。CSSといえば、プロパティのイメージが強いですが、セレクタも結構奥が深いです。 CSS3ではセレクタもプロパティも新たに追加されていますので、違いをちゃんと理解しておきましょう。 2. CSS3セレクタ CSSセレクタはスタイルを適用する対象を選択するものです。普段何気なく使っているclassやidなどもセレクタの1つです。 CSS3セレクタはW3
What is an IP Address? An IP (short for “Internet Protocol”) address is a unique number assigned to every machine that connects to the internet. Nowadays, you can have multiple computers behind a router that share a single IP using Network Address Transformation (NAT). If you have ever used a wifi hotspot to access the internet, you’ve shared an IP address with someone. What’s the Difference betwe
The Expressive Web is an Adobe-curated resource website for the advocacy, support, and advancement of HTML5 and CSS3 web development.Copyright © 2011 Adobe Systems incorporated. All rights reserved. Use of this website signifies your agreement to the Terms of User and Online Privacy Policy. Resources About Adobe and HTML5
かっこいいスライドやフェードのアニメーションを取り入れたポートフォリオギャラリーを実装するjQueryのチュートリアルを紹介します。 Animated Portfolio Gallery with jQuery デモページ [ad#ad-2] 左側のサムネイルをクリックすると、前のコンテンツをフェードアウトし、次のコンテンツがオーバーレイで表示し、スライドのアニメーションで表示します。 デモページ(クリック時のキャプチャ) 元記事では、HTML, CSS, JavaScriptの全コードの解説をはじめ、全ファイルのダウンロードも用意されています。 スクリプトのオプションでは、フェードやアニメーションのスピード、アニメーションの種類などが調整できます。 [ad#ad-2] また、左側のサムネイルのスクロールに使用されているのは、「jquery thumbnail scroller」です。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く