このブログがフロントに関する記事が多いもんだから、たまにデザイナーと呼ばれることがあるんですが、僕は業務としてはデザインよか制作ディレクションの方がどちらかと言えばメインなんですよね。 そんなディレクターとしての役割の一つに、周りにいる優れたデザイナーやプログラマー、デベロッパーの業務効率を考えることが挙げられます。 何を取るわけでもなく中途半端な僕ですが、ディレクターとして周りの各プロフェッショナルの役に少しでも立てればと、そして制作する上での効率を向上させるべく色々情報収集をする中で、よくチートシートの存在を目にします。(チートシートってどれだけ普及してるのかわかりませんが、つまりカンニングペーパーのことらしいです。) WEB屋にとってのチートシートって、どれだけ優れた技術力やデザイン力を持っていても、何かしら新しい発見がある物ですよね。以前書かせてもらった時間の価値は人によって違う!
最近スマートフォンサイトの案件が増えてきました。そこで、個人的によく使いそうなコードをEvernoteにまとめたりしていたのですが、 まだまだスマフォサイト構築のノウハウ記事も少ないですし、共有しておこうと思います。…最近スマートフォンサイトの案件が増えてきました。 そこで、個人的によく使いそうなコードをEvernoteにまとめたりしていたのですが、 まだまだスマフォサイト構築のノウハウ記事も少ないですし、共有しておこうと思います。 すべてのデモ(chromeなどのwebkit系ブラウザまたはスマートフォン実機でご覧ください) download ヘッダーの右にメニュー <h3>ヘッダーの右にメニュー</h3> <!--ヘッダーの右にメニュー--> <header class="header1"> <h1><a href="#"><img src="title.png" alt="SIT
Create a page flip effect with HTML5 canvas | Tutorial | .net magazine HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル。 canvasなんかも活用しつつ次のようにリアルに実現できちゃってます。Chromeなんかでは超なめらかでした。 Flashじゃなくてもできちゃうんですね。 ライブデモ 実装のためのコードがチュートリアル形式で解説されていますが、このテクニックは色々と使えそうですね。 関連エントリ CSS3を使った驚きのデモいろいろ25種類 画面をスワイプさせてページ送りができるWordPressプラグイン「iPad Swipe」 iPadのブラウザ上で電子書籍風のめくる操作を可能にするJavaScript
2011年 07月 11日 HTML5、CSS3に関する情報まとめ。リファレンス情報、辞典サイト、CSSジェネレーター、Validatorなど知識~活用まで カテゴリ: CSS3 HTML HTMLとCSS タグ:CodingCSS3ジェネレーター作成支援ツール 現状HTML5とCSS3を利用したサイトの構築は自分の仕事上では出てきそうにないのですが、そうは言っても何も情報を収集しないわけにも行かないのでブックマークは当然しています。しかし、ただ単に貯めてるだけだといざという時活用出来ないので、一度ブログに書き留めておこうと思います。 html5 現状深く調べておらずリファレンスやタグ辞典的なものを収集しています。最近友人のクロ(@CROO1379)が色々情報を収集してサイトを構築しており、リファレンス的な意味ではかなり拾えそうな感じになっています。
結構便利だったのでシェア。Web制作 に関する日本語スライドを集約している フォロワーさん作のWebサービスです。 話題のHTML5やCSS、iPhoneの事や jQueryからPHPやRubyと幅広くサポート してあります。 人気のスライド共有サイト、SlideShareで日本語のスライドのみを集めています。スライドはその場でLightbox風にポップアップして見れます。英語が苦手な方も探す手間が省けるのでは。 @deeekiさん作のWebサービスです。クックパッドのエンジニア向け「第2回 開発コンテスト24」に応募する予定だったようで、数時間で作成されたみたいで見た目はシンプルですね。 カテゴリもHTML5やjQuery、PHPやiPhone、WordPressなど多岐にわたりサポートされていますので全Web屋さん向けと言えそうです。 日本語のスライドのみを集約 集められたスライドは全
レイアウトの調整を簡略化したり、通常 は難しいレイアウトを可能にしたり、とい った補助的なjQueryプラグインのまとめ です。最近探す機会が増えたので今後 の為に備忘録的に記事にしておきます。 この手のプラグインは数多にあるので 好みで端折っています。 レイアウトの調整や補助などに使えるjQueryプラグインのまとめ。と、言っても大抵は既出だと思います。順不同。 Supersized 画面に合わせて自動的に背景画像を伸縮してくれるだけでなく、スライドショーにもなってくれます。いつか仕事で使いたい。最近FlickrのAPIにも対応しました。 Supersized jQuery UI.Layout Plug-in ブラウザごとの差異を考えずに自由にレイアウトを組めます。 jQuery UI.Layout Plug-in JQUERY CUSTOM CONTENT SCROLLER スクロール
Windows OS に PHPとApacheサーバーのインストール ~ php.iniの設定まで、 パソコンでPHPを使えるようになるまでの手順を図解。 .htaccessの指定方法、使用頻度の高いPHP関数をサンプル付きで解説。 Tipsでは実用的な自作関数を紹介。 JavaScriptの基本~実用的な関数までサンプル付きで解説。 ロールオーバー、ウィンドウ操作、連動プルダウン、入力チェック(正規表現含む)など、 サイト制作に使える実用的なスクリプトを紹介。コピペで使えます。 JavaScriptでDOM(Document Object Model)のメソッド・プロパティを使ってページ上のノードにアクセスするサンプルも追加しました。 Ajax ブログやサイトで使える実用的なAjaxをサンプル付きで解説。 HTML5 次世代HTML標準となるHTML5を使ってみよう!HTML5のタグリフ
株価のように流れるティッカー サンプル ニュース1 ニュース2 ニュース3 ニュース4 ニュース5 設置方法 01) jQuery liScrollから「jquery.li-scroller.1.0.js」と「li-scroller.css」をダウンロード 02) ヘッダに以下のソースを記述する <link rel="stylesheet" href="css/li-scroller.css" type="text/css" /> <script src="js/jquery.js" type="text/javascript"></script> <script src="js/jquery.li-scroller.1.0.js" type="text/javascript"></script> <script type="text/javascript"> $(function
ホバー時のエフェクトを実際にホバーされているエレメント以外にも適用するスタイルシートのチュートリアルを紹介します。 下記キャプチャのデモでは、ホバー時に不透明度を3種類適用しています。 Hover on "Everything But" デモページ [ad#ad-2] 下記は各ポイントを意訳したものです。 エレメントにホバー時のエフェクトを与えることは簡単です。 ここでは、ホバー時に不透明度が変化するものを例にしてみます。 div { opacity: 1.0; } div:hover { opacity: 0.5; } これで、ホバー時に不透明度が0.5になるようになりました。 ここまでは簡単ですが、ホバー時のエフェクトを実際にホバーされているエレメント以外にも適用するには、どうしたらよいでしょうか? 例えば隣接した兄弟のdiv要素などに。 まずは、HTMLの基本的な例を見てください。
今日のエントリもSMX West 2011のセッションからのレポートです。 text-indentによる画像置き換えの代替手段をGoogleが提示してくれました。 CSSのtext-indentで-999pxを指定し、文字テキストと画像を置き換えるテクニックは昔からあるごくありふれたテクニックです。 ところがGoogleは、現在この方法を推奨していません。 推奨していないというよりも使うべきでないと明言しています。 使ってもいいのか悪いのかは以前はGoogle社員によって答えがマチマチでした。 しかしここ1年ほどは画像置き換えに対するGoogleのスタンスは一貫して“NG”です。 今回のSMXでも、GoogleのMaile Ohye(マイリー・オイェ)さんが使用すべきでないことをあらためてクリアにしました。 理由は、画像置き換えはスパマーがよく使う手法だからです。 画像置き換えがすぐさまス
Dedicated to serving the athlete and making a better world through sport.Close One shoe does good, the other shoe kicks ass. Nike Free TR Fit The Free TR Fit is designed with a lower environmental impact using environmentally preferred rubber, water-based cementing and recycled polyester. That means every step in the multi-directional flex groove outsole replicates the foot's natural movement and
css3の情報がかなり増えてきたので 一旦まとめておきます。基本的にはIE が非対応なので、実用はまだまだこれ からという印象でしたが、iPhoneやiPad の普及や、IEにも対応させることが可能 なライブラリの出現でかなり実用性が 上がったように思います。 そういうわけで、ブックマークしておいたcss3関連の情報をまとめて整理してみることにしました。重複した情報は出来る限り削いだつもりです。 ※jQueryなどのJavascriptや、HTML5と組み合わせたTips等の情報は出来る限り割愛しました。 リファレンス / 専門サイトまずは基本と教科書になりそうなサイトを抑える W3C / 公式です。セレクタ一覧CSS3リファレンス / 日本語のリファレンスサイトWebkit CSS Properties / Webkit対応プロパティの一覧。iOSも有りCSS Infos / css1~
「プロが作ったWebサイトのあの“技”をウチのサイトでも(それもタダで)マネしたい!」――。そんな欲求に応えてくれる JavaScriptライブラリ/フレームワークが、ネット上にはたくさん公開されています。この連載では、国内外の商用サイトの優れたUIをお手本にして、なるべくカンタンに、手間をかけずに自分のWebサイトをブラッシュアップしていく方法を紹介します。
2017年7月25日 Webサイト制作, 便利ツール 今より少しでもコーディングを早くできれば、細かいデザインや機能にも時間をかけて取り組めそう…という事で今回はコーディングのスピードを上げるためにできる事を紹介します。便利なツールを使ったり、ちょっとやり方を変えるだけでより早くコーディングができるようになると思います! ↑私が10年以上利用している会計ソフト! 1. コーディング手順を簡略化する これは自分のコーディング能力を高めて手順を省く、便利なツールを使って手間を省くという事です。例えば私は昔このような手順でコーディングを進めていました。 CSSのレイアウトをノートに書き出す レイアウト部分(ヘッダー・メイン・サイド・フッター)のHTMLマークアップ CSSでレイアウト部分のスタイリング 表示確認 うまく表示できない箇所の修正 ヘッダー内のHTMLマークアップ CSSでヘッダー内の
Sencha Animatorを使えば、これまでのリッチメディア広告に匹敵するCSS3広告を作成することができます。文字や画像をスムーズに遷移させるアニメーションを作成したり、グラデーションがかかったボタンをデザインしたり、さらに分析用のトラッキングコードを埋め込んだりすることがSencha Animatorの中で行えます。また、これらは全てWeb標準技術を使ってできることです。 これらの標準技術を使えば、現在デスクトップ用のブラウザ向けのリッチメディア広告で使われているほぼ全ての機能は、Apple iOS、BlackBerry Torch、そしてGoogle Android向けに移植・再現することが可能です。 CSS3広告について企画・検討されている広告代理店、広告制作会社の皆様、Sencha Animatorの広告作成者向けオプションについてお問い合わせください。 広告作成者向けオプシ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く