オシャレなノート風ブログレイアウト作成Photoshopチュートリアル:phpspot開発日誌
Web 2.0 Professional Blog Layout Tutorial | hv-designs オシャレなノート風ブログレイアウト作成Photoshopチュートリアルのご紹介。 次のようにノートに付箋をはさんだような素敵なデザインのブログレイアウト作成チュートリアルです。 右の付箋がオシャレなデザインですね。 ブログ以外にも使えそうなデザインですね。 関連エントリ チュートリアルでここまでやる？というプロレベルのWEBレイアウト作成チュートリアル PhotoshopによるフレッシュなWEBサイトレイアウト作成チュートリアル集８０ クールなWEBホスティングサイトのレイアウトを作成するPhotoshopチュートリアル ブルーが美しいWEBサイトレイアウト作成Photoshopチュートリアル３０
[CSS]今、そして近い将来に使用するであろうスタイルシートのテクニック集
CSS3のテクニックはさまざまなものがありますが、その中からまさに今、そして次のプロジェクトに使用したくなるテクニックを紹介します。 The Bright (Near) Future of CSS [ad#ad-2] 下記は各ポイントをピックアップして意訳したものです。 はじめに Styling HTML5 Classing like HTML5 Media Queries Styling Occasional Children Styling Occasional Columns RGB Alpha Color HSL and HSL Alpha Color Shadowy Styles Multiple Backgrounds 2D Transforms はじめに ここでフォーカスするのは、今、そして近い将来に使用するであろうスタイリングのテクニックです。HTML5の要素のスタイリング
CSS3 関連情報・総まとめ
css3の情報がかなり増えてきたので 一旦まとめておきます。基本的にはIE が非対応なので、実用はまだまだこれ からという印象でしたが、iPhoneやiPad の普及や、IEにも対応させることが可能 なライブラリの出現でかなり実用性が 上がったように思います。 そういうわけで、ブックマークしておいたcss3関連の情報をまとめて整理してみることにしました。重複した情報は出来る限り削いだつもりです。 ※jQueryなどのJavascriptや、HTML5と組み合わせたTips等の情報は出来る限り割愛しました。 リファレンス / 専門サイトまずは基本と教科書になりそうなサイトを抑える W3C / 公式です。セレクタ一覧CSS3リファレンス / 日本語のリファレンスサイトWebkit CSS Properties / Webkit対応プロパティの一覧。iOSも有りCSS Infos / css1～
10 Useful Typography Tips For Adobe Illustrator — Smashing Magazine
Typography is not only an all-important aspect of design, it is also an art form in and of itself. Choosing the right font, the perfect spacing and even the correct shape of text can be an important factor as to whether a project fails or succeeds. Although Illustrator is not really used for multiple-paged projects, many would agree that it is one of the most powerful applications for creating vec
The No-Pressure Introduction to CSS3
It’s difficult to escape the hype surrounding CSS3 at the moment, yet it has created a divide in the community. If you read any blog post on the subject and it is flooded with comments by developers who feel they still cannot use CSS3 in their work. Rather than being encouraging the responses from the experts in our community can appear as aggressive and superior. Although they are correct in sayi
30 of the Best CSS3 Navigation and Button Tutorials | Web Design Tutorials and Inspiration | Learn Photoshop Online | Creative Inspiration | Web Resources
With CSS3 you can create great navigation bars and menu items with having to learn/hack JavaScript and images to create nice looking website elements with cool functionality. Today lets take a look at 30 of the best (and current) CSS3 navigation and button tutorials.In a daily basis, CSS3 is changing how we envision, layout and build websites. While it is true that many designers and developers ar
Pythonドキュメントの日本語訳のPDFがすごい - 偏った言語信者の垂れ流し
先日公開されたPythonドキュメントの日本語訳のPDFがすごい。なにがすごいって、ページ数が合わせて3000ページぐらいあるところが。 ダウンロードファイル一覧 - Python Japanese Environment - OSDN いつもお世話になってます。ドキュメントの著者、翻訳者の方々に感謝。 追記 このPDFはSphinxというドキュメンテーションシステムを使って出力されてます。 オリジナルはreStructuredTextという形式のテキストファイルです。 Overview — Sphinx 1.4.3 documentation Sphinx-Users.jp — Python製ドキュメンテーションビルダー、Sphinxの日本ユーザ会 Google Project Hosting
JavaScriptでDOMに挑戦
HTMLをドキュメントオブジェクトとして扱うための約束事「DOM」を、JavaScriptを通して使うことで、HTMLの好きな部分を読み書きすることができます。 連載の前回、「第6回 配列とオブジェクトでデータをまとめる」では、配列とオブジェクトの基本的な扱い方を説明しました。扱うデータの量が少ないうちは、普通の変数だけでなんとかなってしまいますが、データの量が増えれば増えるほど、配列やオブジェクトのありがたみが分かります。 特に、配列に入れたデータを、ループで一気に処理する快感が分かるようになれば、初心者卒業といってもいいでしょう。 それでは、前回の課題の答え合わせをしてみましょう。平均点の求め方は、配列のサンプルでやっていたので簡単すぎたでしょうか。解答サンプルでは、成績の一覧と平均点を同時に表示するようにしてみました。 <html> <body> <script type="text
Thumbnails Preview Slider with jQuery | Codrops
In this tutorial we will show you how to create and use a thumbnails preview slider with jQuery. Since we got a lot of requests to show how to make […] In this tutorial we will show you how to create and use a thumbnails preview slider with jQuery. Since we got a lot of requests to show how to make the preview slider work separately from the full image view, we decided to make a tutorial on how to
結局どうすればいいの？ - Dive Into HTML5
Translation of: What Does It All Mean? - Dive Into HTML5 Diving In The Doctype The Root Element The <head> Element Character Encoding Friends & (Link) Relations rel = stylesheet rel = alternate Other Link Relations in HTML5 New Semantic Elements in HTML5 A long digression into how browsers handle unknown elements Headers Articles Dates and Times Navigation Footers Further Reading 訳注 Diving In この章で
WebプログラマのためのIPv6入門（1/2） － ＠IT
IPv4アドレス枯渇の日を前に WebプログラマのためのIPv6入門 おがわ あきみち 2011/1/31 IPv4アドレスが枯渇の日を迎えます。この記事では、これまでこの問題にあまり縁のなかったWebプログラマ向けに、IPv4アドレス枯渇とIPv6移行にともない生じる課題について説明します。 迫るIPv4枯渇の日 間もなく、IPv4アドレスが枯渇の日を迎えようとしています。これまで拡大を続けてきたインターネットも、1つの節目を迎えます。 IPv4アドレス枯渇とIPv6への移行は、ネットワークとしてのインターネットに直接関わっているインフラ系エンジニアには非常に身近な話題でしょう。しかし、その他のIT系エンジニアにとっては、あまり実感が持てない問題だと思います。 そこで今回は、Webプログラマの皆さん向けに、IPv4アドレス枯渇とIPv6への移行とは何なのか、どんな課題が生じるのかを紹介し
PythonでWebアプリ開発入門のススメ Flask/MongoDB - mizchi log
TwitBlogin! http://twitblogin.com/ とか作ったことだし、そこそこ開発環境整って、今なら思いつく限りのサービスはさっくり実装できそうだったのでPython初心者向けに書いておく。 少しでもPythonユーザが増えれば幸い。 対象は Python の基本的な構文程度はわかるけど、具体的に何から手をつけていいかわからない人 目次 Apache/WSGI/MongoDBの環境構築 flask [ Sinatra風ウェブアプリケーションフレームワーク] pymongo [ MongoDBラッパー ] werkzeug [Web Application デバッガ] jinja2 [ HTMLテンプレートビルダー ] pyquery [ jQuery風HTMLパーサ ] nose [ TDD ] 細かいライブラリの使い方とかPython本体の言語仕様とかは適当にぐぐって
フレッシュな50のPhotoshopテキストエフェクトチュートリアル集:phpspot開発日誌
50 Best Photoshop Text Effect Tutorials | CreativeFan フレッシュな50のPhotoshopテキストエフェクトチュートリアル集。 新しめなテキストエフェクト作成用チュートリアルが沢山で参考になります。 次のようなかなり壮大なものから汎用的に使えるものまで揃っています。 これは覚えておくとよさそうですね。 関連エントリ 最近公開されたNewなPhotoshopロゴデザイン70のチュートリアル集 あの有名プロダクトのロゴを作るPhotoshopチュートリアルいろいろ クールなネオン風ロゴを作成するPhotoshopビデオチュートリアル クールな惑星っぽいテキストロゴ作成Photoshopチュートリアル
(新人向け) Unixオペレーションの注意点 - Magical Diary
主に新人向けとして、Unixサーバで作業をする際の注意点を書いておく。 ここに書いてある内容は絶対的なものではないし、会社や現場ごとにルールがあるので、適宜ルールに合わせて実践すれば良い。 ログを取れ 何をやったか、何をやらなかったか、というエビデンスのためにログは必ず残しておく。SSHクライアントによっては毎回自動的にログ取得する設定が可能なので、設定しておくと良いだろう。 作業後に問題が発生した場合に作業内容を確認するためにも使うため、必ずログは取得しておくこと。 (追記) 当たり前だが、コマンドとその出力をペアで取ることに意味がある。 set -x (set verbose) しろ ログを取得しても、コマンドラインを編集した際には以下のように非常に見づらいものとなってしまう。(がんばれば解析することは出来るが…) ESC[0mESC[27mESC[24mESC[JESC[1myasu
jQueryコードリーディング:初期化まわりを詳しく、およびextend - <s>gnarl,</s>技術メモ”’<marquee><textarea>￥
前回は配列およびeachについて読んでいきました。 今回は、前回軽く触れたjQueryの初期化について詳しく見ていきたいと思います(クエリセレクタ/エレメント操作まわりの話はまた今度)。 対象 jQuery 1.5.0 よんでみよう jQueryのソースは、外側をfunctionで囲まれています。 (function( window, undefined ) { // さまざまな初期化 // ... })(window); このfunctionはwindowとundefinedという二つの引数を取っています。 javascriptのundefinedというのは未定義の値を表現するのに使われていますが、有名な話として、これは定数や予約語ではありません。 var undefined="hello"; alert(undefined); // "hello" このように、ユーザが同名の変数を定義
既存のフォームをユーザーに使いやすくする10のポイント
10 Tips for Optimizing Web Form Submission Usability [ad#ad-2] 下記は各ポイントを意訳したものです。 1. 必須入力欄は強調する 2. エラーメッセージは分かりやすく 3. クライアントサイドのバリデーション 4. 入力している欄を明示 5. 進捗を明示 6. データの保存やキャッシュ 7. 送信ボタンの文言 8. キャンセルボタン 9. 入力例の記載 10. 垂直に配置 1. 必須入力欄は強調する ユーザーはフォームに入力した後に入力ミス・エラー表示があると、不安を感じたりイライラを募らせるでしょう。まずは、入力欄に「必須」「任意」などを記載して、入力欄が必須なのか任意なのかを明示的にユーザーに伝えるのは安全な方法となります。 2. エラーメッセージは分かりやすく フォームのエラーメッセージは、「あなたが下に必要とさせるフィー
写真画像をかっこいいモノクロにするPhotoshopのテクニック集 | コリス
Photoshop, Photoshop Elementsを使用してカラーの写真画像をモノクロにするテクニックはさまざまなものがあります。その代表的なテクニックとそれぞれの利点・欠点を紹介します。 元にした画像：Chase the sun 下記は各ポイントを意訳したものです。 はじめに 1. 調整レイヤー：白黒 2. モード：グレースケール 3. 調整レイヤー：色相・彩度 4. モード：Labカラー 5. 調整レイヤー：グラデーションマップ 6. 調整レイヤー：チャンネルミキサー 7. Photoshop Elements：モノクロバリエーション 8. 調整レイヤー：色相・彩度x2 9. 調整レイヤー：白黒（カラースライダー） はじめに モノクロの写真は、ファッション雑誌をはじめ、Flickrのようなソーシャルウェブサイトでも非常に人気の高いジャンルです。デジタルが到来したことで、一つ重要
[CSS]クロスブラウザ対応、CSSグラデーションを使ったボタンの実用的な実装方法
IE6, 7, 8を含めたクロスブラウザに対応した、画像を使用せずにCSSでグラデーションを適用したボタンを実装する実用的なチュートリアルを紹介します。 Cross-browser CSS gradient buttons デモページ [ad#ad-2] ボタンにはborder-radius, box-shadow, text-shadowなどCSS3がふんだんに使用されていますが、グラデーションはIEでも適用されます。 ホバー時のキャプチャ 実装のポイント スケラｰビリティ 文字のサイズを変更するとボタンのサイズもそれに合わせて拡大・縮小 アジャスタビリティ padding, font-sizeを変更することでサイズ調整可能 フレキシビリティ あらゆるHTML要素に適用可能 コンパチビリティ 主要ブラウザに優雅なグラデーションを提供 ユーザビリティ ノーマル時、ホバー時、アクティブ時を用
HTML5をはじめる人、勉強したい人用のテンプレートファイル -Easy HTML5 Template
HTML5 Templateのデモページ Easy HTML5 Templateの特徴 汎用性の高いシンプルなつくり HTML5の新しい要素に重点をおいて設計 HTML5対応ブラウザはもちろん、IE6, IE7, IE8も考慮 モバイルデバイスも考慮 jQuery, Google Analyticsなどよく使用されるものを配置済み [ad#ad-2] Easy HTML5 Templateの外部ファイル Easy HTML5 Templateで使用している外部ファイルです。 screen.css Reset CSSには「Eric Meyer's reset」が使用されています。 modernizr-1.6.min.js 「Modernizr」。HTML5やCSS3をサポートしているか調べ、CSSの場合はエレメントにclassを加えます。 html5.js 「html5.js」。IE9未満（
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://e0166nt.com/blog-entry-850.html
