Web制作者が捗る！知識が増える2014年トレンドまとめ
作成：2014/06/9 Web制作 > トレンド感のある動きや、洗練された見え方を実現するために、知っておきたいことや方法など。Web制作の現場で知っておくべきことをまとめました。全部取り入れるのは無理ですが、押さえておくことで今以上に見栄えのするサイトを作れると思います。ここ最近のトレンドをおさらいしたいときに。 エンジニア速報は Twitter の@commteで配信しています。 もくじ ファーストビューで使いたいエフェクト １．ロングシャドウ ２．ポリゴン ３．ラージフォトスタイル ４．ブラーエフェクト ５．フルスクリーン動画 ６．画像シーケンス 脱ビットマップ画像 ７．SVG ８．Webフォントを円で囲む 配色・フォント ９．配色(フラットデザイン) １０．タイポグラフィ(フラットデザイン) １１．フォント(フラットデザイン) 効果 １２．Infinite Scroll(無限スク
[CSS]OS X Yosemiteのように背景が透ける美しいパネルを実装するスタイルシート
昨日発表された2014年秋リリースのOS X 10.10 Yosemiteで採用予定の背景を半透明のブラーで透けさせる美しいパネルを実装するスタイルシートを紹介します。 記事は一日遅れですが、スタイルシートは当日で、仕事が早いですｗ OS X Yosemite Style UI ※Chrome, Safari, Firefox, IE11でどうぞ。 コードは、簡略化するとこんな感じになります。 実際のコードは上記ページを参考にしてください。 HTML タイトルのバーとコンテンツをdivで実装し、articleで内包します。 <article> <div class="title"> <h1>タイトル</h1> </div> <div class="content"> <p>コンテンツ</p> </div> </article> CSS 半透明のパネルのスタイルシートです。 *, *:aft
Webサイトの作り方のまとめ！デザイン制作からコーディング手前まで。
話し合い Webサイトの制作に向けて、まず最初にする事は、依頼主についての情報を収集することです。依頼主と話し合い、どんなサイトにしたいのか、方向性を決めてゆきます。 依頼主との話し合いでは、以下の2点について、しっかりと決めておく事が大切です。 サイトにどんな情報を入れるか、どんな人に向けて発信するか、サイトをどう活用していきたいかなど、サイトを立ち上げる目的は何かを確かめる。 どんな雰囲気のサイトにしたいか、理想とするサイトや、希望・要望を聞きながら、どういうデザインにするかイメージを固める。 また、同業他社のサイトを片っ端から見まくる事。今回の場合、喫茶店やパン屋さん、ケーキ屋さんなんかが参考になるかもですね。他のサイトではどんなコンテンツがあるか、どんな見せ方をしてるかとか、この業種だとどんな色遣いのサイトが多いのかとか、たくさんみる事で、刺激になったり、イメージが掴めたりします。
プロっぽくなった！こっそり使いたい「動きのある」CSSテクニック
作成：2014/06/2 更新：2014/11/01 Web制作 > WebデザインギャラリーやWPテーマなどで「見栄えのする」サイトが使っている効果など。今回はCSSのみで実現できる、動きあるエフェクトをメモしておきます。 エンジニア速報は Twitter の@commteで配信しています。 もくじ マスク １．マスク・キャプション ２．円形キャプション ３．全画面+オーバーレイ ４．ストライプの背景 フルスクリーン系 ５．スライド＋フルスクリーン ６．全画面背景動画 ７．パララックス ８．フルスクリーンにフィット ９．背景画像をブラウザごとに最適化 １０．メガメニュー 画像可変 １１．画像で枠線を表現する １２．半透明＋フィルタ １３．文字以外を透明にしてレイヤーさせる 図形 １４．ループ＋ローディング １５．3Dボックス １６．矢印ナビ 画像切り抜き １７．六角形 １８．卵型＋星形
スクリプト無し、動画をページの背景いっぱいに表示する方法
jQueryなどスクリプトは一切使わずに、HTML5+CSSで動画をウェブページの背景いっぱいに表示する方法を紹介します。 フルサイズのデモ IE8などHTML5のvideo要素に対応していないブラウザでは、代替の背景画像が表示されます。 実装は、非常にシンプルです。 HTML 動画はbody内の一番下にvideo要素で配置し、その上には通常通りコンテンツを配置できます。 <body> ... コンテンツ ... <!-- 背景に設置する動画 --> <video autoplay loop poster="http://mattgrossdesign.com/raw-media/first-frame-screencap" id="video-background" muted> <source src="http://mattgrossdesign.com/raw-media/wood
ｊQueryでページを開いたときに画像をフェードインさせたいと思っています。調べてみて下記の方法が簡単かなと思いました。 - h... - Yahoo!知恵袋
ｊQueryでページを開いたときに画像をフェードインさせたいと思っています。 調べてみて下記の方法が簡単かなと思いました。 ｊQueryでページを開いたときに画像をフェードインさせたいと思っています。 調べてみて下記の方法が簡単かなと思いました。 http://hassinkichi.blog88.fc2.com/?mode=m&no=101 【script】 <script type="text/javascript"> $(document).ready(function() { $('#wrapper').fadeIn(4000); }); </script> ＊このスクリプトを<head>内に記述してください。 ＊赤字の箇所は、フェードインの速度です。お好みに合わせて調整してください。 【html】 <div id="wrapper"></div>でフェードインさせたい要素（ページ
メールフォームを作る - 中小企業の為の会社ホームページ作成方法
メールフォームを作る ここではお問い合わせをメールで受け付ける必要性と、メールフォームを使うべき理由を解説しています。 メールで問い合わせを受ける重要性 問い合わせは電話でやってもらうから、メールでの問い合わせなんかいらないよ！ なんて方はいらっしゃいませんか？ 今の時代はメール問い合わせは大切です。 なぜならば、多くの人はメールに慣れてしまっているからです。メールが生活に浸透しているんです。いちいち電話なんかしなくても、メールで送ればいいと思う人が多くなっています。 メールは通話料も掛かりませんし、営業時間外にでも送る事ができます。 そして別の理由もあります。 話す事が苦手な方もメールでの問い合わせを好まれます。 例えば私の自動車修理工場などの職人仕事は、頑固な怖いおやじをイメージされがちです。 ですので、電話を掛ける事に抵抗を持たれるお客様は、メールで問い合せをしてこられます。そういう
SAKURA Internet
さくらのサービス さくらのレンタルサーバ WordPress、モリサワ提供のWebフォントが使えるご利用件数56万突破の人気サーバーサービス。 さくらのVPS レンタルサーバより高い自由度が魅力。はじめて使うroot権限のある1台目に最適です。 さくらのVPS for Windows Server Windows搭載プランが登場。リモートデスクトップやOfficeのご利用も可能です。 さくらのクラウド 初期費用無料、トラフィック課金なしのクラウドサーバー。最適な環境をすぐに作成できます。 さくらの専用サーバ PHY 大容量ストレージも選べる物理サーバー。オンプレミスからの移行、ウェブシステムの最適化におすすめです。 高火力コンピューティング 機械学習、データ解析、ハイパワーマシンを必要とする全ての用途に。GPU搭載、妥協のない最高性能を提供します。 さくらのIoT デバイス、ネットワーク、
ボタンに直接ローディングアニメーションを付けられる「Ladda」:phpspot開発日誌
Ladda ボタンに直接ローディングアニメーションを付けられる「Ladda」。 ボタンを押すとボタンに回転するアニメーションが付与され、そのまま結果をまつ、というような分かりやすいUIが実現可能です 文字＋ボタンを円形のボタンにして背景をグレーにしたり、そのボタン自体をプログレスバーにしてしまうなど、面白いデモが詰まっていますので一度是非試してみて下さい 色々なUIのデザインの仕方があるなぁという関心をしてしまいますね 関連エントリ 範囲指定が可能になるUI実装jQueryプラグイン「noUiSlider」 １ページ内で複数ページに分割できるjQueryプラグイン「windows」 エレメントを立体的に回転させられるjQueryプラグイン「Vortex」 レスポンシブに使えるタブUI実装jQueryプラグイン「Easy-Responsive-Tabs-to-Accordion」 リアルなア
パララックスサイトの作り方の初歩
最近パララックス（視差効果）を取り入れたサイトが増えてきました。 仕組みや簡単なものを作れるようにしておきたかったのでいろいろ試してみました。 ちなみにもっと効率良く作れる方法とかもあるかもしれませんので、一例ということで御覧ください。プラグインはまだ試したことがないので そちらを使ったほうが楽かもしれません。 パララックス効果のjQueryプラグインまとめ あと動作はこの記事時点でのFirefoxの最新版でしか確認はしていません。 スクロール量を取得する まずはスクロールすると動くので、スクロール量を取得します。ちなみにjQueryを使ってます。 $(function(){ $(window).scroll(function(){ var y = $(this).scrollTop(); $("#num").text("スクロール量：" + y);//表示用 }); }); サンプルペー
目的を達成させるための最適なWebサイトのタイプ(種類)
先日[ホームページ成功への道はすべてここから始まる。目的・目標の明確化]を書かせて頂いたんですが、「目的が決まっても、目的を達成させるためにどんなWEBサイトを作ったらいいのかわからない」と読者の方から連絡をいただきましたので、今回は【目的を達成させるための最適なWebサイトのタイプ(種類)】を紹介したいと思います！ WEBサイトには多種多様な目的があり、その目的を叶えるためにさまざまなタイプのWEBサイトが存在します。今回はこれらをわかりやすく見比べられるように表にしてみました。新しくWEBサイトを作るときなどに参考にしてみてください。 WEBサイトの目的とタイプは生まれ続ける。 インターネット上には、さまざまなタイプのWEBサイトがあります。商品を直接販売するための「ECサイト」、会社情報を伝えるための「コーポレートサイト」、商品やサービスを認知してもらうための「プロモーションサイト」
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The Blog | Welcome to Adobe Blog
http://books.ank.co.jp/books/ehon.html
リダイレクトの警告
Webflow ー 直感操作でレスポンシブウェブをデザインできるサービス Beta版公開 【@maskin】 | TechWave（テックウェーブ）