第1回 Web Developer Selection「レスポンシブWebデザインの実践ワークフロー」のスライドです。
レスポンシブWebデザインの基礎
第1回 Web Developer Selection「レスポンシブWebデザインの実践ワークフロー」のスライドです。
PHPやnode.jsで画像をbase64エンコードしてインラインイメージとしてimgタグで表示する方法
このドキュメントの内容は、以下の通りです。 はじめに インラインイメージとは base64 とは インラインイメージの指定方法 指定できる主なコンテンツタイプ インラインイメージの使用例 PHPを用いて画像をbase64する方法 PHPで画像をbase64エンコードして、imgタグに指定する方法 node.jsで画像をbase64エンコードする方法 Unixコマンドで画像ファイルをbase64エンコードする方法 はじめに ウェブページをはやく表示するテクニックはいろいろあります。たとえば、ページや画像などのリソースのサイズを小さくしたり、画面を表示するためのHTTPリクエストの数を減らす、といった手法があります。 HTTPリクエストの数を減らすためのテクニックを例に挙げます。 インラインイメージ CSSスプライト(CSS Sprite) イメージマップ 今回は、インラインイメージについて紹
overflowを使ってfloatの問題を解決するスタイルシートのテクニック | コリス
フロートした子要素を内包するコンテナが高さを拡張しない問題を解決するためのテクニックはさまざまなものがあります。 その中から、overflowを使った方法とその際に生じる問題点とその解決方法を紹介します。 CSS: Clearing Floats with Overflow [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに Demo 1: overflow:auto; Demo 2: overflow:hidden; overflowを使って生じる問題点と解決方法 はじめに フロートベースのレイアウトをする際、ラッパーとなるコンテナがフロートしている子要素に対して高さを拡張しないことは、普通によくある問題です。 デモ：１ フロートをクリアする要素を配置して解消した例 しかし、この問題を解決するために、「overflow」プロパティでもできることを知っていましたか？ これは
スマホサイト作成のコツと作業環境 | バニデザノート
スマホサイトを「デザインカンプ作成→プレビュー→コーディング→プレビュー→実環境確認」とスムーズにすすめるためのチェックポイントを書きだしてみました。
htaccessがFTPに表示されない
利用しているサーバーがUNIX、LINUX、MacintoshなどのOSの場合、先頭が「.」（ドット）のファイルを隠しファイルとして認識します。 このため、使用しているFTPソフトの設定によっては、「.htaccess」「.htpasswd」ファイルなどの隠しファイルが表示されない場合があります。 以下は「FFFTP」（代表的なFTPソフト）を使用している場合に、隠しファイルを表示させる設となります。説明画面はFFFTPのVer1.97となります。他のバージョンは画面イメージが若干異なる場合があります。 ※FFFTP以外のFTPソフトは、それそれのソフトのHELPなどでご確認ください。 ※使用環境によっては、下記設定でも表示されない場合はあります。 1.設定変更 htaccessをアップロードする（した）サーバーを選択して「設定変更(M)」をクリックしてください。 2.高度設定 「高度」タ
【jQuery】超万能スライダー FlexSlider の使い方をマスターする。 - ONZE
今日紹介するのは jQuery プラグインの［FlexSlider］です。 これ、かなり便利です。 レスポンシヴ対応、タッチコントロールのフリックスライドにも反応、カルーセルもＯＫ、画像にリンクを貼ることはもちろん、キャプションも表示可能、動画もスライドできる、コントロールボタンやナヴィゲーションも細かく設定できる…。まさに“超万能”のスライダー。 とにかく「なんでもできる」印象で、スマートフォン対応サイトなどでは特に真価を発揮するのではないでしょうか。 まずはサンプルをご覧ください。 【FlexSlider】→サンプルデモ 高機能ですが、その導入方法は比較的簡単です。 ［FlexSlider］の導入方法 まずは以下のサイトから［FlexSlider］のプラグイン本体をダウンロードします。 http://flexslider.woothemes.com 続いて <head>〜</head>
Single Element CSS Spinners
.load1 .loader, .load1 .loader:before, .load1 .loader:after { background: #ffffff; -webkit-animation: load1 1s infinite ease-in-out; animation: load1 1s infinite ease-in-out; width: 1em; height: 4em; } .load1 .loader { color: #ffffff; text-indent: -9999em; margin: 88px auto; position: relative; font-size: 11px; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0
Webデザインのスキルを磨こう！Webサイト模写のススメ
2014年8月17日 Photoshop, Webデザイン 先日、Webデザイナーになってもうすぐ2年がたつというMさんから、「どうすればデザインのスキルを磨くことができるのか？」という旨のご相談を頂きました。今回は彼女の相談メールでもふれられている、デザインのスキルアップに有効なWebサイトの模写のやり方について掘り下げてみようと思います！ ↑私が10年以上利用している会計ソフト！ 頂いたご相談メール 実は最近スランプぎみになっていて、サイトデザインを作成してもなぜかダサい、野暮ったいデザインになってしまいます。 デザインスキル向上させるために、いいデザインのサイトを模写するといいときいて模写もしてみたのですが、ぴったり一致するように作るのに意識がいってしまい、あまりデザインスキルが上がったと実感できないでいます。（模写したデザインを自分のオリジナルで活かせない） もし模写するときはどう
苦手なホームページの配色を少し得意にできる！スライドと便利なツール
色をうまく使いこなせるようになると、ウェブデザイナーとしてワンランク アップするらしい。ああ私も上級ウェブデザイナーを目指して勉強しなくちゃ。 てことで今回は配色について、初心者さんでも入りやすい学習用のスライドと配色時に役立つツールをいくつかご紹介させていただきます。 配色はホームページ作成時に欠かせないスキルです。奥が深く、身に付けるのが、なかなか難しい技術ですね。 好みだけを頼りに色を選ぶと、見た目に居心地が悪く、訪問者の反応も期待通りにいかないホームページになっちゃうことがあります。初心者さんにありがちな失敗だと思います。 著者情報：この記事を書いた人 ウェブさえ web業界14年目。フリーランスwebデザイナーとして活動後、法人化。今でも年間100件以上のウェブサイトの企画・制作に関わっています。 ウェブさえにできること【お仕事のご相談＞サービスメニュー】 Follow @web
ポンクソフト
コンテンツ PHP入門 jQuery入門 Flash Flash(ActionScript)でゲーム作成入門 Flash(ActionScript)で様々なゲームを作ろう Flash(ActionScript)とPHPの連携入門 PHP（旧コンテンツ） PHPでファイルの読み書き・掲示板 PHPで日付・時刻の計算 PHPでアクセスカウンタ＆解析 PHPでGDを使ってみよう PHPとPostgreSQLの連携入門 Java （旧コンテンツ） Javaでシューティングゲームを作ろう Perl （旧コンテンツ） CGI(Perl)の基本と掲示板作成 C/C++ C/C++言語とDXライブラリでゲーム作成入門 （旧コンテンツ）C言語とelで様々なゲームを作ろう jQuery simple plugins ひとりごと、ふたりごと（ブログパーツ） オリジナルソフトウェア その他未分類なモノ iOSアプ
svg要素の基本的な使い方まとめ
この文書ではsvgをhtml埋め込みデータとして扱う際の覚書として作成した．svgの要素と属性は実際の例を踏まえて説明したつもり． 注意事項 仕様はここを参照のこと． 本文書では実際の挙動を調べつつ自分なりの解釈が入っているため，多々間違いが入ってしまうかもしれないが，気にしない． スクリプトを使ってsvg要素の中身(ソース)を出力しているため，一部実際のコードと表示されるコードとの間に差異があるが，予めご了承いただきたい． 目標は見栄えのする図形をsvgの手入力でサラっと記述できるようになることなので，複雑な図形は素直にinkscape等専用のツールを使うと良い．ただ，ここで示したことはツールを使う上でも役に立つと思う．特にアニメーションなど． svg:ベクター画像のカンバスの定義，title:タイトル，desc:説明 html文書においてsvg画像を挿入したい場合,embed要素を用い
水交デザインオフィス
Concept制作コンセプト あなたの問題解決のために。 あなたは、あなたのウェブサイトになにを求めていますか？ ウェブデザインにかぎらず、デザインとはあなたのかかえている問題、とくに、あなたとそのお客さまのコミュニケーションの問題を解決する方法だとわたしたちは考えています。 ですから、わたしたちはあなたがウェブサイトという道具を使って、どんな問題を解決したいのかということをなによりも大切にし、おたがいの理解を深めるために最大限の努力をします。 「あなたのお客さま」のためのサイトづくりを。 ウェブサイトは、お客さまにアクセスしてもらい目的の情報を引き出してもらうという性質をもっています。 ですから見た目のよさはもちろんですが、ウェブデザインには、お客さまにとっての「使いやすさ」が要求されます。どんなに華美なデザインをほどこしていても、お客さまが必要としている情報にたどりつけなければ、そのデ
CSS(スタイルシート)の基本、小技、テクニック総まとめ
CSSの基本や使える小技テクニックなどを幅広くまとめました。以前書いて今もそこそこアクセスがある「CSSの知識をもっと深める30+2の小技テクニック集｜Webpark」という記事があるのですが、2年近く前の記事ですしパワーアップさせて作り直しました。 恐らく過去最長の記事ですので目次を作りました。クリックするとするりと移動します。基本的な内容が多いですが、お役に立つ項目があればうれしいです。 ということで順番に説明していきます。 1. 全般的なこと 1-1. CSSリセット ブラウザごとでデフォルトのスタイルは異なっています。その違いをそのままにしておくと、後でブラウザ間の表示の違いに悩むことになり、どこが原因か分からないとイライラしてしまいます。 そんなことのないように、いったんデフォルトのスタイルをリセットしてしまおうというのがリセットCSSです。 方法は色々ありますが、個人的には一番
HTML5ホームページテンプレート無料配布 [Cool Web Window]
404 Not Found お探しのファイルは見つからないようです。 お手数ですが、下記リンクからトップページへお戻りください。 CoolWebWindow Copyright (C) Cool Web Window All Rights Reserved
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Cheat Sheet
Redirecting to Animate.css
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
svg要素の基本的な使い方まとめ - 11.画像効果
9ineBB WEB×DESIGN×CREATIVE
