中小企業や個人経営規模相手のWebディレクションで気をつけている１５のこと。 | 笑顔を創りたいＷｅｂ屋の日常
笑顔を創りたいＷｅｂ屋の日常 Ｗｅｂ業界からひょんなことで専門学校の先生に。そしてまたＷｅｂ現場に戻ったＷｅｄディレクターのブログ。情報デザインやＷｅｂの勉強をしています。 あくまで”僕が”です。そこ大変重要ですｗ 僕もまだまだ勉強中で、これが全て正しいと思えるほど見極めていません。 他にもあるだろうし、もっと大事なものもあるかもしれません。 それは各々考えてもらって（もしよろしければ教えていただいてｗ）、とりあえず同タイプの仕事している人の叩き台にでもになればなと思って挙げてみた次第です。 というのもですね、僕はWeb屋としてみるとなんか物凄く変な経歴・経験をしている人なのですねｗ まあ、Web業界って割と他業界から来る人たくさんいますけどね。僕は印刷会社→大手Weｂ制作会社→専門学校教員（正規職員）→弱小ITベンチャーなので、なかなかこういう奴はいないと思いますｗ 教員とか普通はできま
[CSS]スタイルシートに「if」を使った条件式が利用できる -Conditional-CSS | コリス
ブラウザごとのスタイルシートの記述に、ifを使った条件式が利用できる「Conditional-CSS」を紹介します。 Conditional-CSS デモ デモ画面にIE, Fx, Op, Safariの各ブラウザでアクセスすると、それぞれ用の画像が表示されます。 条件式に利用できるものは、下記のようになっています。 browser IE - Internet Explorer Gecko - Gecko based browsers (Firefox, Camino etc) Webkit - Webkit based browsers (Safari, Shiira etc) Opera - Opera's browser IEMac - Internet Explorer for the Mac Konq - Konqueror IEmob - IE mobile PSP - Pla
[CSS]高性能すぎてビックリしました、レスポンシブデザイン用の超軽量フレームワーク -Kube Framework
[CSS]高性能すぎてビックリしました、レスポンシブデザイン用の超軽量フレームワーク -Kube Framework
スタッフ紹介ページをうまく活用している企業サイト
2017年6月29日 Webデザイン みなさんが今働いている会社に就職する前、その会社のどのページを参考にしましたか？多くの方が企業紹介のページを参考にしたはずです。その中でも実際に働いている人の紹介ページもあったら、その会社についてもっとイメージが湧きますよね。今回はそんなスタッフ紹介ページに注目してみようと思います！ ↑私が10年以上利用している会計ソフト！ スタッフ紹介ページの必要性 企業サイトが一番伝えたいのは「この会社はどんな事をしているのか」という点だと思います。そのためほとんどの企業サイトに「この会社について」などの企業紹介ページを設置しています。しかし企業の経歴や代表者の挨拶だけで、本当にその会社の説明ができるでしょうか？ 最近デザイン系のWebサイトをはじめ、企業サイトでもスタッフの紹介を掲載するページが増えてきました。どんな人がこの会社をつくっているのか？どのように製品
[JS]画像をホバー時にさまざまなアニメーションで目立たせるスクリプト -Adipoli
シンプルなものからちょっと面白いものまで、20種類以上のアニメーションのエフェクトを備えた画像を目立たせるjQueryのプラグインを紹介します。 デモ 用意されているエフェクトは20種類以上で、ホバー時のエフェクトは下記のものが揃っています。 normal popout sliceDown sliceDownLeft sliceUp sliceUpLeft sliceUpRandom sliceUpDown sliceUpDownLeft fold foldLeft boxRandom boxRain boxRainReverse boxRainGrow boxRainGrowReverse 画像のデフォルト時のエフェクト（オーバーレイ・半透明）も用意されており、組み合わせて利用できます。 [ad#ad-2] 以下、デモページのエフェクトを紹介します。
Bootswatch
Easy to Install Simply download a CSS file and replace the one in Bootstrap. No messing around with hex values. Customizable Changes are contained in just two SASS files, enabling further customization and ensuring forward compatibility. Tuned for 5.3.3 Themes are built for the latest version of Bootstrap. Version 4, version 3, version 2, and other releases are also available to download.
IE8以前に救済。HTML5のタグを利用可能に·html5shiv MOONGIFT
html5shivはIEをはじめとするHTML5非対応WebブラウザでHTML5のタグとスタイルを使えるようにするソフトウェアです。 HTML5のWebサイトを作りたいと思いつつ、IE向けのデザイン適用について心配する声は多数あります。そこで使ってみたいのがhtml5shivです。HTML5非対応のIEでもHTML5の要素を使ったデザインをサポートします。 例えばこんなデザイン。HTML5を使っていますがちゃんとスタイルシートが当たっています。 ソースコード。sectionタグなどを使っています。 まだ開発中ということもあって全てのテストが通る訳ではなさそうです。 別なソース。markタグを使ったり、jQueryも使えています。 こんな感じのグラフも描けています。 グラフのソース。おそらくCanvasタグで描かれているはず。 html5shivを使えばHTML5非対応のWebブラウザであっ
HTML5でテキストのシャッフル演出ができるJSライブラリ「ShuffleText.js」 | ClockMaker Blog
Flashでよく見かけるテキストシャッフル演出(文字列がランダムで切り替わる演出、正しい呼び名はわかりませんｗ)をHTML5で作ってみました。HTMLのタグ(pタグとか)に使うバージョンと、HTML5の新要素Canvasを使うバージョンの二種類を用意しました。 【2017年4月26日 追記】 【重要】JSライブラリーはGitHubで更新しています。使用したい方は次のGitHubのリポジトリを御覧ください。 Canvas版はCreateJS 2015年版でも動作するよう更新しました。 デモ demo (HTMLエレメント版) demo (Canvas版) ソースコードはMITライセンスで公開してしますので、個人・商用問わずご自由にお使いください。 ShuffleText.js (HTMLエレメント版) ShuffleEaselText.js (Canvas版) それでは以下で使い方を紹介して
最新のWebデザイントレンドを取り入れたWebサイトを紹介するデザインギャラリー・stylesinspiration - かちびと.net
最新のWebデザイントレンドを取り入れた Webデザインに特化したギャラリーサイト、 stylesinspirationのご紹介です。少し前 から購読しているんですが、他のWebデザ インギャラリーと一味違っていてなかなか 素敵です。 最近はWebデザインギャラリーもすっかり減ってしまいましたけどね・・・良いデザインを見る事はインスピレーション向上だけでなく、美的感覚を視覚刺激として脳に送る事でセンスが養われる側面もありますので割と大事です。 シンプルで見やすいレイアウトですのでストレス無く探索出来るかと思います。Awwwards同様、最新のデザイントレンドを取り入れたWebデザインを紹介していますが、Awwwardsとは別の路線、っていう感じなのでこれはこれで。 カテゴリはタイポグラフィ、シングルページ、クリーン、などなどちょっと一貫性は無いですけど、コンテンツが最新トレンド、というサイ
どんな要素でも全画面表示に出来るFullscreen APIをブログの記事に使ってみる ※動作サンプル有 - かちびと.net
どんな要素でも全画面表示に出来る Fullscreen APIというものがありま して、主に動画で使われている事が 多いですが、今回はブログコンテン ツのリーダビリティに貢献させる 目的で使って見ます。 動画コンテンツに主に使われている印象のAPIなので目にする機会が多くはありませんが、動画だけでなく、どんな要素にも使えますので、ブログやドキュメントなどのテキストコンテンツに使ってみたらリーダビリティの高い状態にユーザー側でスイッチできるので素敵かな、と思った次第です。 さっさとサンプル見せろ、という方は下にスクロールしてください。 W3Cでの仕様はまだEditors’ Draft状態ですけど、最近ちょくちょく使っているところを見かけるようになりました。 HTML5と同時に動きが若干活発化してる印象でしたので、少し触ってみました。このAPIの詳細はWWW WATCHさんで詳しく書かれていま
連続した要素を分割してページネーションを実装、移動時にエフェクトを加えるjQueryプラグイン・jPages - かちびと.net
ちょっと珍しいタイプでしたので備忘録。 連続した要素を、指定した数に達したら 分割して、ページネーションを自動で 生成し、移動時にエフェクトが加わえる、 というもの。大量のリストをコンパクト に、という方に向いてそうですね。 連続した要素になら基本的になんでも使えるっぽいので何かしら応用できるかもしれません。コンパクトにまとめられるのは素敵ですね。 例えばli要素が100個くらいあったとして、これを10個ごと、10ページに分割し、ページ移動時にエフェクトも実装する、というもの。少々カスタマイズ性には欠けますがこれはこれで手軽に大量の要素をコンパクト化出来るので覚えておいて損はないかなと思います。 以下動作サンプルです。 Sample ページネーションの数字が小さすｇ コード <script src="http://ajax.googleapis.com/ajax/libs/jquery/1
SIE0.93betaの公開 - プラグインレスでSVGを表示する「SIE」開発ブログ
SVGのsymbol要素をサポートしてみました 本日、SIE0.93betaを公開しましたが、新しく、SVGのsymbol要素がサポートされています。ベータ版ですので、不安定かもしれませんので、ご注意ください。 ダウンロード http://sourceforge.jp/projects/sie/downloads/54706/sie-093beta.zip/ 更新履歴 version 0.92からの変更点 dur属性がindefiniteの場合に対応 endElementメソッドとbeginElementメソッドのリスト更新バグを修正 dur属性の規定値を、indefiniteから変更 NAIBU.stop関数をgetCurrentTimeメソッドを中心に修正 set要素に関するバグの修正 set要素のendEventが発火しないバグを修正 チケット #27038「symbol要素が未実装
ie-css3.js ( :nth-childなどのCSS3擬似クラスをIEでも使えるようにするjs ) で失敗した事。 « 乱雑モックアップ
sakurachiro.com 2024 著作権. 不許複製 プライバシーポリシー
Webサイトの制作スピードを、より向上させる目的で作られたスターターキット・99lime - かちびと.net
結構参考になったので備忘録がてら ご紹介。Webサイトの制作スピードを より向上させるために、汎用的なUI を集めて、マークアップも綺麗な状態 で済むように設計されたスターター キット、というかフレームワークです。 制作スピードを向上させる目的で作られたHTML5フレームワークです。レイアウトだけでなく、汎用的なUIも備わっていて、class名1つ付けるだけでタブやスライドショーを実装出来るようになっています。 そういった仕様にする事で、シンプルで綺麗で可読性の高いソースを保てるように設計されていたりと、結構参考になるスターターキットですよ。フレームワークは自作してるので良い部分を組み込んでみようかなと思いました。 タブやドロップダウン、スライドショーなどを備えているだけでなく、class名1つで実装出来るようになっているので、綺麗なソースを保持する事が出来るようになっています。 いろいろ
「ノンプログラマーのためのjQuery入門」のスライドが凄く分かりやすいですね - かちびと.net
Twitterに流れてきたスライドがとっても 分かりやすかったのでブログでより多く の方に拡散。ノンプログラマー向けの jQueryの基本講座。これからjQuery を使おう、という方は読んでおくと良さ そうですね。 ノンプログラマー向けにjQueryの基礎をスライド化してくれています。 @pocotan001さん作のスライドです。 このスライドを見ながらコーディングする、というより、基礎知識を頭に入れるのに適したスライドだと思いますので気軽にご覧になってみて下さい。ハードルがかなり下がると思います。 また、当ブログでもjQueryプラグイン等の情報を取りあえげていますので合わせてどうぞ。 jQueryのリファレンスサイトと入門書籍 [2011.09.21アップデート] よくアクセスいただくのでハブ的な役割くらいは果たそうと思います。 jquery / jQueryの本家です。 jQuer
スマートフォンサイト作成の参考になるギャラリーサイトのまとめ
このブログではないですが、Google Analyticsを見るとスマートフォンからのアクセスが結構あったので、スマートフォン向けのサイトを作ってみようと思いました。 ただ、スマホ向けのサイトは作ったことがないので、まず実際に色んなサイトを見て参考にしようと思い、ギャラリーサイトを調べてみました。 国内ギャラリー まずは国内サイトです。iPhoneが中心になっています。この3つのほかにも色々ありましたが、内容的には似ているので、更新頻度や使いやすさなどを基準に選びました。 iPhoneデザインボックス 画像が大きく見やすいです。個別ページでは画像も多くPCサイトとの比較もあってとても使いやすいです。カテゴリもしっかりしています。 iPhoneデザインアーカイブ 掲載サイト数が多く、更新頻度もかなり高いです。 スマートフォンサイト集めました。 すっきりしたデザインで見やすいです。カテゴリも業
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
クローラーダウンロード、ソフトウェアのダウンロードは無料クローラー - downv.com
Red Team Design
sakurachiro.com
Webpark 
