HTML5 Security CheatsheetはHTML5のセキュリティに関するチートシートです。問題点と対象Webブラウザ、対処法が一覧になっています。 HTML5 Security CheatsheetはHTML5におけるセキュリティホールになりえる問題点をコードを通じて広めていこうというプロジェクトです。Webプログラマ必見と言えるでしょう。 トップページです。様々な項目が並んでいます。 左側は各セキュリティチェックすべき項目で、対象になるWebブラウザとそのバージョンが並んでいます。問題点の提示とともに、その回避策についても書かれていますのでとても参考になります。 まだ日本語化されていない部分もあります。 ほぼ全てのWebブラウザが対象になる部分もあるようです。 項目は非常に多いですが、セキュリティを重視するためにもチェックしておくべきです。 HTML5ではありますがIE6など
HTMLで複数の画像を読み込むとき、HTMLのimgタグだけだと不恰好となりがちですが、読み込みを管理すれば見栄えも整いますというデモとJSライブラリを作ってみました。次の2つのデモを見比べて何が違うのか確認ください。 デモ (通常のimgタグ) デモ (LoadManager.jsを使用) デモの違いとは 前者は画像がバラバラとインターレース的に読み込まれ、後者は読み込み終わるまでローディングが表示され読み込まれたものがフェードインして表示されます。 ▼前者のデモ ▼後者のデモ 後者のデモには、ローディングのパーセンテージ表示も付いています。読み込みが何%まで達しているかを確認できるのも、後述のJSライブラリのメリットです。 HTML5で作られたフルFlash的なサイトを見たときにimgタグでインターレース的に画像がバラバラとでてくることが多くて、いつも微妙な思いをしていました。Flas
2014年3月6日 Photoshop, Webデザイン 水彩画っていいですよね。なんだかほんわかした雰囲気が大好きです。ということで今回はPhotoshop CS5を使って画像を水彩画風に加工する方法と、便利なPhotoshopブラシ、水彩画風デザインのWebサイトを紹介します。デザインの参考にしてみてください! ↑私が10年以上利用している会計ソフト! 写真を水彩画風に加工する方法 また動画撮ってみました。ただでさえ時間かかってないのに、4倍速にしたら30秒くらいになっちゃいました。簡単なのでぜひ試してみてくださいね! 1. ぼかし 画像を開いて、そのレイヤーを複製します(コマンド+J)。 複製したレイヤーを「blur」にレイヤー名を変更します。 フィルター > ぼかし > ぼかし(詳細)で、「半径」を10、「しきい値」を25〜30に設定します。 2. エッジの光彩 元の画像レイヤーを
私の周りでwebデザインが出来る人ってあんまりいません。でも「webデザインってどうやるのー?」とか「私もやってみたいんだけど…」とかの声はよく聞きます。皆興味はあるのに”webデザインは難しい”と思って始められないんじゃないでしょうか。そんなこれからwebデザインを始めたいビギナーさんに向けてHTMLの基本・基礎をまとめてみます。真新しいことは特にないほんとに基礎です〜>< by:fweez まずはじめに とりあえず用意するもの2つ HTMLの基本 HTMLとは? 1.DOCTYPEの宣言 2.基本的なタグ 3.<body>の文書構造 CSSの基本 CSSとは? 1.CSSの読み込み方法 2.指定パターン 3.marginとpaddingの違い 4.ブロック要素とインライン要素 応用してwebページを作ってみる まずはじめに 一口にwebデザインといっても色々なことがあると思うのですが大
最近今あるサイトをスマートフォンに対応させるべく、コツコツがんばっているわけですが、その際に気になったことや知っておきたいポイントをまとめてみました。基本的な内容も多いと思いますが、ご参考になればと思います。 1. スマートフォンに対応させるには? ウェブサイトをスマートフォンに対応させるには2つのパターンがあると思います。 PCにもスマートフォンにも対応したページを作成するか、PC用ページとは別にスマートフォン専用ページを作成するかです。 1つ目のPCにもスマートフォンにも対応したページは、Media Queriesを使う場合が多いと思います。 Media Queriesを使うと画面のサイズの違いによって適用するCSSを変更することができます。 例えば、CSS-Tricksというサイトは画面サイズによってレイアウトが大きく変わってます。 Media Queriesについては後で簡単に紹介
turn.js - The page flip effect for HTML5 HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」 ドラッグ&ドロップでべらっとめくるあのインタフェースがHTML5で実現でき、iPadやiPhoneなどでも動作します。 電子書籍ビューアとして使えそうですね ページに立体感を出すために影なんかも描画されてます。 マークアップや初期化も超簡単です。<div>を並べて初期化するだけ。 関連エントリ HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル モバイルブラウザでのHTML5対応状況が一目瞭然の「Mobile HTML5」 HTML5/JavaScriptでテキストtoスピーチを実現できる「speak.js」
海外の有名デザインブログ「Blog.Sppon Graphics」でIllustratorのチュートリアルビデオを紹介したエントリー「30 Illustrator Video Tutorials Every Designer Should See」がありましたのでご紹介します。 新しいアプリケーションを習得しようとしている場合、様々なメニューやツールを通して、その道のエキスパートがガイドしてくれるものほど良いものはありません。この記事は最も詳しく解説された30のAdobe Illsutratorのビデオチュートリアルとスクリーンキャストを集めた記事です。それぞれの特徴を生かした明快な解説と役立つテクニックは、あなたのIllsutratorのプロへの道の手助けとなるでしょう。 Digital Inking Demonstration & Tutorial How To Setup and D
a]:flex [&>a]:flex-row [&>a]:justify-between [&>a]:py-[18px] [&>a]:border-t [&>a]:border-lightgray [&>a]:border-opacity-20 [&_li]:my-1 [&_li]:list-['-_'] [&_li]:py-[18px] [&_li]:border-t [&_li]:border-lightgray [&_li]:border-opacity-20 [&_.Label]:transition-all [&_.Label]:w-fit [&_.content]:transition-all [&_.content]:h-0 [&_.content]:pt-0 [&_.content]:px-5 [&_.content]:overflow-hidden [&_.toggle:
以前からちょいちょいブックマーク していたんですが、いつの間にか増 えてたので一覧化してみたいと思い ます。国内のiPhoneアプリサイトで Webデザインが参考になったサイトの まとめ。あんまり無いですが・・ 個人的な備忘録とメモ書きです。探し方も悪いと思いますので数はさほど網羅していません。「あそこ凄い素敵なのに載ってない」みたいなご意見ありましたらコメント欄にてご教授頂けますと幸いです。 この記事で見たいのはアプリではありませんのでWebサイトへのリンクしかありません。順不同となっています。シェア系アプリが多いです。 MogSnap 食べたものを写真で評価、共有するiPhoneアプリ。写真系なのでこういったスライドがあるとアプリの概要をイメージしやすいですね。無料であること、キャプチャ、アプリダウンロードのボタンが分かりやすく明示されています。 MogSnap 大辞林 言わずと知れた
このウェブサイトは販売用です! 2read.jp は、あなたがお探しの情報の全ての最新かつ最適なソースです。一般トピックからここから検索できる内容は、2read.jpが全てとなります。あなたがお探しの内容が見つかることを願っています!
こんにちは、イメージ担当の長谷川です。 今回は 1px にこだわったリッチな Web や UI デザインを更に立体的で奥行きのある雰囲気にする『MAX 塗り』を取り入れたグラフィック作成手法をご紹介します。 ところで『MAX 塗り』ってご存知ですか?ガンプラなどが好きな方はピンと来たと思いますが、プラモデルなどに興味がない人は全く分かりませんね。 『MAX 塗り』とはプラモデルに立体感を出すためにエッジから中央に向かってぼかしていく、昔からある「ぼかし塗り」や「グラデーション塗り」の技法です。 この技法で塗装されたプラモデルは単純に塗装したものより格段に迫力や存在感が上がります。プロモデラーの MAX 渡辺さんが良く使うプラモデルの塗装技術として通称『MAX 塗り』と呼ばれています。 Web や UI にこの『MAX 塗り』を取り入れる方法は簡単です。 作ったボタンや背景などのグラフィック
最近改めて CSS の基本、要素の配置、レイアウトについて学習しました。過去に CSS でのレイアウトなどの記事を書いた事があるんですけど、改めて勉強してみたら、いろいろ間違えて解釈していたなー ... っていうか、基本が分かってなかったんだなーと反省 ...。今回は CSS の基本中の基本、視覚整形モデルについてまとめてみました。 Webデザインをする上で、必須とも言えるのが CSS …。このブログ – Webデザインレシピでも、過去に CSS について書いた記事がいくつかあります。最近 … でもないけど、以下のふたつは CSS でのレイアウトについて、いろいろと書いた記事でした。 CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ – 2011年 6月17日 CSS:初心者の頃にハマったスタイルシートのあれこれ … IE7多め -2011年 4月21日 で
CSSのプロパティ一つに対して、値を二つ(開始と終了)変更し、さまざまなCSS3アニメーションの基本的な実装例を楽しめるデモサイトを紹介します。 LeaVerou / animatable デモページ [ad#ad-2] デモページを楽しむには、Chrome, Safariで閲覧ください。 Firefoxでは一部動作しません。 アニメーションのスタートは、2つあります。 マウスオーバーで一つ一つのアニメーションがスタート アニメーションが全部同時にスタート 全部同時にアニメーションをスタートさせるには、「Animate all」ボタンをクリックします。 全部同時にアニメーションすると、何がなにやら分からない状態にw [ad#ad-2] 下記に数多くあるデモから、いくつか紹介します。 デモの下にある「background-color」などは、そのプロパティの値を変更してアニメーションしている
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く