CSSフレームワーク「Compass」の基礎
Compassのメリット CSSスプライトが簡単に作成できる Compassでは、フォルダに配置するだけで、CSSスプライトで記載された一枚画像が簡単に作れます。CSSスプライトを利用すれば、1ページ辺りの画像の読み込みを何度も実行せずにすむため、ページの高速化につながります。 独自のmixinが利用できる グラデーションやベンダープレフィックスを自動で付与してくれる機能があります。 独自の関数が利用できる 画像のサイズを取得したり、三角関数の計算をしたりできる関数があります。 mixinや関数はCompassの公式リファレンスで紹介されています。ここでは記載できないほどのmixinや関数がありますので、一度見てみると面白いかと思います。 上記に加え、第1回目に記載したこちらのSassのメリットももちろん享受できます。 読みやすい 変数や繰り返し処理が使える 成果物の品質を統一できる 高速
SimpleHTTPServerの次の一歩としてFlaskを使う - Qiita
手元で実験のためにWebアプリのちょこっとしたプロトタイプを作るって時に、HTMLやCSSやJSなどを静的に配信したいだけだったら が楽ちんだということはだいぶ知名度が上がってきたみたいだけど、「あ、ちょっとデータを保存したい」とか思った時には静的配信だけだと力不足なんだよね。(GETパラメータに積んでログに残すという力技は除く) で、そういうシチュエーションになったので僕はFlaskで1ポモドーロ(25分)くらいで実装したんだけど、ふとFacebookを見たら似たようなシチュエーションでSocket使うとか言ってる人が居たのでこれはブログに書いておくべきことかーと思ったのです。 フレームワーク習得にかかる時間を大きく見積もり過ぎだよ。とりあえず25分間Quickstartをやってはどうか。Socketでサーバを実装するのに比べたら学習に掛かった時間はすぐにペイする。 http://fla
構造化データとは？非エンジニアでもよく分かる！初心者向け徹底解説！ | ナイルのマーケティング相談室
これだけは押さえてほしい構造化データ2つのポイント 難しいイメージのある構造化データですが、ざっくりまとめるとこの2つがポイントになります。 検索エンジンがページの内容を理解しやすくなる 検索結果に様々な要素が表示されるようになる(場合がある) 検索エンジンは人間と同じようにサイトのテキストを理解することができません。もちろんある程度はわかるはずなのですが、完璧とはいきません。そこで、テキストに”意味”のマークアップを行い、検索エンジンがテキストを理解できるようにするというのが、構造化データの基本的な考えになります。 そして、検索エンジンがテキストを理解できるようになると、その情報を使って検索結果に様々な要素を表示できるようになるのです。例えば、「コンビニ アルバイト」などで表示されるGoogleしごと検索(Google for jobs)も構造化データを参考にして、検索結果に表示していま
絵心が無い人が簡単なグラフィック素材を作るのに役立つ記事8選
連載第1回の「初心者でもPhotoshopの基本的な使い方が分かる入門記事9選」、連載第2回の「HTML・CSS・WordPress初心者のためのDreamweaverの基本的な使い方が分かる記事10選」でWebサイトを作れるようになり、さらに前回の「HTML5初心者でもWebアニメーションの簡単な作り方が分かる記事11選」でWebサイトにさまざまな動きを加えられるようにもなった。しかし、Web制作現場では、まだまだ必要とされることは多い。 例えば、Web制作を生業としていると、個々のパーツ／グラフィック素材をデザインする機会に遭遇することがよくある。絵心があるとか無いとかは別として、ワークフローに組み込まれている以上、ボタンを作るとか、背景のテクスチャを作るとか、できないと作業が前に進んでくれないことだってあるのだ。 そこで、今回はWeb制作で必要となるパーツ／グラフィック素材を簡単に作
Java による Web アプリケーションのプロトタイプのために最近使っている構成
2014 年 5 月 3 日に開催された 「Kyoto.なんか」 で喋った内容です。Read less
黄金律を使ってデザイン性の高いウェブサイトを作る方法
by arnoKath 美しいウェブサイトを作ることは単純にユーザーの気分をよくするだけではなく、パフォーマンスを上げると言われています。ウェブサイトのデザイン性を上げるには使用するフォントも大切ですが、フォントの大きさも重要な要素。そこで、黄金律を使ってフォントサイズを決めることの重要さや方法をAdditive AnalyticsのCEOであるLaura Diane Hamiltonさんがまとめています。 The Golden Ratio and Typography - Laura Diane Hamilton http://www.lauradhamilton.com/the-golden-ratio-and-typography ウェブサイトに情報を記載する上で、フォントのサイズに階層を設けるとユーザーを情報へ正しく導くことが可能であるため、ウェブサイト上のフォントサイズは複数のも
HTMLの設計思想と、2014年に最適な学び方 ーー「非エンジニアの起業家が知っておくべきプログラミングの知識 #03」【ゲスト寄稿】 - BRIDGE（ブリッジ）テクノロジー＆スタートアップ情報
編集部注：本稿は初心者向けにプログラミングやWebデザインの講座を開催している TechAcademy（テックアカデミー）による連載企画。「非エンジニアの起業家が知っておくべきプログラミングの知識」というテーマで数回に分けて極めて基礎的なプログラミングの基礎知識をお伝えする。全連載はこちらから Image by Flickr 「非エンジニアが知っておくべきプログラミングの知識」というテーマで、10回に分けてお届けする連載企画。第3回目のテーマは「HTML」です。 前回は「インターネットとブラウザ」というテーマでお送りしました。今回は「HTMLの基礎と、現代的な学び方」について考察・ご紹介します。本連載は、インターネット業界で、これまで技術的なバックグラウンドを持たないまま起業した方や、これから独立・起業しようと思い立った方をサポートするための、連載記事です。 はじめに プログラミングはでき
Firebugだけじゃないぞ、Firefoxの開発ツール入門
上記の機能の中から、今回は代表的なもの4つを取り上げ、簡単にご紹介します。 ページインスペクタ 開発ツールで必要とされる機能といえば、まずDOMのインスペクタです。「インスペクタ」と書かれたタブをクリックすることで、表示できます。 DOMツリーの表示、適用されているCSSの表示、計算済みの値の一覧といった基本的なことはもちろんできます。ボックスの幅や高さ、マージンといったサイズに関する情報は「ボックスモデル」として確認できます。ボックスモデルは開発ツールの中で見ることもできます。また描画されたページにオーバレイする形でも表示されます（2014年5月の時点ではベータ版で利用可能）。 使用されているフォントや、色が実際に目で見て確認できるというのも、細かいことながら便利な機能です。色サンプルをクリックすることで、カラーピッカーが表示されます。カラーピッカーで選んだ色が、ページの描画結果へ動的に
jQuery Flash Plugin
A jQuery plugin for embedding Flash movies. Features Simple, but powerful. Specify what you need, and nothing more -- sensible defaults take care of the rest. $('#hello').flash({ src: 'hello.swf', width: 320, height: 240 }); Perform sophisticated replacements by passing a custom callback. $('.custom').flash(null, null, function(htmlOptions){ // do stuff }); Overwrite the defaults to always to meet
jQueryのプラグインでFLASHの埋め込み。 | Almondlab
jQueryのプラグインを利用して、HTMLにFLASHを簡単に埋め込む方法です。短いコードで記述できるので、ソースコードがすっきりとして見やすくなります。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery FLASH</title> <script type="text/javascript" src="jquery-1.3.2.m
quusookagaku.com - quusookagaku リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
Adblockで広告を非表示にしている人にはページを見せないようにする「Anti Adblock」
By neonihil Googleはその収入の大部分を検索結果ページに表示される広告「Google AdWords」から得ており、一方で広告を見たくないユーザーは「Adblock Plus」などを使って広告を非表示にしているわけですが、3月13日にGoogleは突如としてGoogle PlayからAdBlock・AdAway・AdFreeなどの広告を見ないようにできるアプリを一斉に削除しました。理由としては「Android マーケット デベロッパー販売/配布契約書」違反であるとしており、要するに広告収益で生計を立てているアプリ開発者やGoogleを妨害しているからアウト、というわけ。 そして、同じような発想でウェブサイト上の広告を非表示にしている各種アドオンや拡張機能に対抗するために作られたスクリプトが「Anti Adblock」です。 Antiblock.org - Anti Adbl
時事ドットコム：ドイツ下院「グーグル法」可決＝ニュース使用に課金
ドイツ下院「グーグル法」可決＝ニュース使用に課金 ドイツ下院「グーグル法」可決＝ニュース使用に課金 【フランクフルト時事】ドイツ連邦議会（下院）は１日、検索サイトが新聞社など報道機関のニュースを使用する場合、サイト運営会社が報道機関側に使用料金を支払うことを実質的に義務付ける、「グーグル法」と呼ばれる法案を賛成多数で可決した。連邦参議院（上院）でも可決されれば、同法が成立する。 検索サイト側が多額の使用料支払いを迫られる可能性もあり、検索最大手の米グーグルは大々的な反対キャンペーンを展開。一方、新聞社などは法案を強力に後押ししている。 法案は、報道機関に対し、ニュース公開から１年間は「ニュースを営利目的でウェブ上に公開することを決める独占的権利」を認めると規定。検索サイトがニュースを使用する場合、料金を支払うなどして許可を得る必要があるという。ただ、引用が最小限の短文である場合は例外で
Opera、レンダリングエンジンにWebkit採用をブログで発表。まずはスマートフォン向け、その後デスクトップ版も
Operaは今後同社が開発するWebブラウザのレンダリングエンジンにWebKitを採用することをブログで発表しました。最初にWebkitベースになるのはスマートフォン向けの製品で、その後デスクトップ向けやその他の製品にも適用されるとのこと。 ブログ「300 million users and move to WebKit」の冒頭で同社のBruce Lawsonは次のように書いています。 On the same day as announcing that Opera has 300 million users, we're also announcing that for all new products Opera will use WebKit as its rendering engine and V8 as its JavaScript engine. 3億ユーザーに到達した発表と
アドレスバーの時代は終わった！ 最新版「Sleipnir 4 for Mac」リリース | ライフハッカー・ジャパン
フェンリルは本日1月24日より、ウェブブラウザ「Sleipnir」の最新版となる「Sleipnir 4 for Mac （4.0）」をリリースしました。本バージョンはSlepnir for Macにおいて初のメジャーバージョンアップとなります。 今回、Sleipnirが目指したものは「究極の先端的ウェブブラウザ」。デザイナーは「人々にとってのウェブを、もっと人間的でストレスのないものにするため」に、まったくの白紙からウェブブラウザを作り上げたといいます。早速触ってみると、たしかにMacに似合いそうな洗練された印象を受けます。MacBookをはじめ、画面が小型の人には特にオススメできる機能もありました。 以下、3つの機能にしぼって紹介します。■アドレスバーがない！ 「検索フィールド」からスムーズにアクセス 「現代において、アドレス（URL）を直接入力する機会は減り、ユーザーは検索やブックマー
io.js - JavaScript I/O
Run JavaScript EverywhereNode.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts. Download Node.js (LTS)Download Node.js (LTS)Downloads Node.js v20.15.11 with long-term support. Node.js can also be installed via package managers.Want new features sooner? Get Node.js v22.5.11 instead. // server.mjs
[JS]jQueryのプラグイン100選 -2012年総集編
2012年に紹介したものを中心としたjQueryのプラグイン100+α選です。 今年目立ったのは、やはりレスポンシブ、そしてCSS3アニメーションでしょうか。 スライダーやギャラリー系もレスポンシブ・アニメーション対応、ナビゲーションやPinterst風のレイアウトなど、多くのプラグインにそれら二つの要素が組み合わさっています。 動画関連 画像ギャラリー関連 画像拡大関連 画像配置・キャプション関連 背景画像関連 コンテンツスライダー・カルーセル関連 ナビゲーション関連 レイアウト関連 レスポンシブ関連 パネル・ボックス関連 ツールチップ・ティッカー関連 アニメーション関連 エフェクト関連 スクロール操作・スクロールコンテンツ関連 リスト関連 テーブル関連 フォーム関連 テキスト関連 見出し抽出関連 ローディング関連 エレメント・コンテンツ生成 その他 動画関連
XSSを防ぐために不可欠なサニタイジング（無害化）
前回「XSS脆弱性により起こる被害とその対策」は、XSS対策の重要なことの1つとして見落としがちな「入力チェック」があると解説した。今回は、その入力チェックとして特殊文字のサニタイジング（無害化）を中心に、セキュリティホールの対策について解説する。 特殊文字のサニタイジング（無害化） 前回までの入力チェックを確実に行っていれば、かなりセキュリティレベルの高いアプリケーションが出来上がっているはずである。しかしまだ完全ではないので、最後まで気を抜かないでいただきたい。ここでは、XSSを防ぐために不可欠なサニタイジングについて説明する。 XSSは、入力値をHTTPやHTMLの一部として出力する際に生まれるセキュリティホールである。これは入力値に含まれるいくつかの文字がHTTPやHTMLで特殊文字として定義されていて、それらの文字をそのまま出力してしまうことにより起こる。 XSSとは関係ないが、
XSS脆弱性により起こる被害とその対策
前編では、Webアプリケーションに潜むセキュリティホール、「クロスサイトスクリプティング（XSS）」とはどのような脆弱性であるのかについて述べた。中・後編では起こり得る被害についてと、どのように対策をすればよいのかを解説していく。 XSSセキュリティホールによる起こり得る被害 XSSのセキュリティホールがあると、攻撃者はそこを狙った攻撃をするだろう。しかし攻撃といっても、セキュリティホールがあるWebサイトに対する攻撃ではなく、そのWebサイトの利用者に対する攻撃となる。 またユーザーに対する攻撃というといままでにも、悪意のあるスクリプトが仕掛けられた（攻撃者の）Webサイトにアクセスしたユーザーが被害を受けるというものもあった。XSSを利用した攻撃も、攻撃者のWebサイトにユーザーがアクセスして被害が起こるという点は変わらないが、仕込まれているスクリプトがどこから送られてくるのかが違うた
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Firefox 22のCookieに関するポリシー変更(予定)についての意見書
