GMO、「ConoHa WING」と「お名前.com レンタルサーバー」にてウェブ表示高速化エンジン「WEXAL Page Speed Technology」を無償提供
2014年9月29日 便利ツール Webサイト制作や色彩感覚、タイポグラフィの知識をクイズ感覚で勉強できるサイトをまとめてみました。どれも短時間で楽しみながらできるものばかりなので、気軽に挑戦できますよ!Webデザインや制作の勉強中のあなたも、ベテランさんのあなたも、ぜひ試してみてください :) ↑私が10年以上利用している会計ソフト! 休憩時間にサクッと挑戦! 選択問題やドラッグ&ドロップでできるゲーム感覚な問題いろいろ! 1. HTML/CSS HTML5実力テスト HTML/CSSコース 「実力テスト」という名のクイズサイト。HTML/CSSコースではHTML5とCSSの基本問題がクイズ形式で出題されます。制限時間は15分。「HTMLやCSSを見てどのように表示されるか?」「smallタグは何を意味するか?」などなど、問題を解きながら勉強になります!
画像をホバーすると、小気味良いアニメーションを伴ってキャプションに替えるCSS3のテクニックを紹介します。 デモは10種類あり、CSSでここまでできるのか!って感じです。 Original Hover Effects with CSS3 [ad#ad-2] 基本となるHTML 基本となるCSS 必見の10種類のかっこいいデモ 基本となるHTML HTMLは非常にシンプルです。 キャプションはタイトルとテキストをdiv要素で内包しclassに「mask」をつけ、そのキャプションと画像をdiv要素で内包します。 <div class="view"> <img src="image.gif" /> <div class="mask"> <h2>Title</h2> <p>Your Text</p> <a href="#" class="info">Read More</a> </div> </d
Recent Blog Posts View All 10 Cool (or Hot) Mobile Weather Apps Before I started writing my own weather app, I searched high and low for something that would fit my needs. Ultimately I didn’t find exactly what I was looking for, and wrote my own, but you might like some of … Continue reading → 40 Examples of Using Circles in Web Design The circle is a powerful shape that does catch the eyes of the
~10程度っすよ ~50程度かな ~100くらい ~300程度です ~500はこなす ~1000はやってます これ以上 ( ! )
最新の記事 レスポンシブWebデザインでリニューアルいたしました 2016年12月27日その他 「独学Webデザイナーの覚書」をリニューアルいたしました。ありがたいことにかなりの間更新が滞っているサイトではありますが、毎日多くのユーザーに閲覧していただきたき大変感謝しております。 今回のリニューアルについて本記事にまとめさせていただきました。 続きを読む 設計・実装を高速化!フロントエンド開発を自動化する「gulp.js」 2014年11月15日CSS フロントエンド開発の際に今となっては不可欠である、ビルドツール「gulp.js」の導入手順についてご紹介いたします。 続きを読む 超便利!jQueryでJSONデータを解析し、HTMLに表示する/後編 2013年7月31日jQuery 前の記事でご紹介したJSONについて、以下の3パターンの実装例を元に解説していきます。 続きを読む 超便利
独学でも、実務未経験からでも、努力すれば誰でもなれる。それがWebデザイナーという職業です。 当サイトでは、Webデザイナー・Webクリエイターに興味がある方や、実際に目指しはじめている方に、役立つ情報を提供できればと思います。 最近の更新情報&お知らせ 2017年02月09日 ヒューマンアカデミーの資料を頂く機会に恵まれたのでシェアしますのページをアップしました。 →更新履歴一覧 最近のコメント 文字化けを防ぐ&解消する方法 by しんじゆみこさん(11/29)PHPのインストール for Windows by 馬場誠さん(09/30)PHPのインストール for Windows by Kiraさん(09/30) ※管理人がまだ公開設定を行っていないコメントは表示されません。
作業効率がアップする隠れた使い方教えます! WEB制作、プロの無料サービス活用術 ──デザインに使えるツール(1) クラウド隆盛の昨今、ソフトウエアと同等か、それ以上に便利な機能を持ったオンラインサービス/ツールが豊富に取りそろってきた。本記事では、オンラインサービスの中でも無料利用が可能なものを選りすぐり、Web制作を6つのシーンに分類してより快適に作業するための 82の活用術の中から、Web制作に使えるデザインに特化した無料オンラインツールの活用法を13点紹介する。デザインの幅を広げ、Webサイトの質を高める実践方法を試してほしい。 Tweet [technique 01] オンラインで本格的な画像編集をする 「pixlr」 [technique 02] 繰り返し用の背景画像を作成する 「Tiled backgrounds designer」 [technique 03] カラーパター
最近Webデザイン系のいろいろなセミナーやイベントに出ると、MacBookなんとかを持ってる方を多く見かけます。で、これからWebデザイナーになりたいなとか、これからMacに変えちゃおうかな?と思ってる皆さんに向けて、Macを使ってWeb制作とかする時にあると便利なアプリをまとめてみました。 「Web制作といえば、AdobeのCreative Suite」みたいな人も多いでしょうが、サブスクリプションプランが始まったとはいえ、いきなりウン十万もソフト含め投資できないこともありますからね(会社が買ってくれるならいいですw)。別にそれがなくても、他で代用すれば仕事はできるから大丈夫です。 いま現在MacでWeb制作をしている皆さんには定番なのも多く含まれますが、ちょうどこないだLionデビューして環境整備がてらまとめたので、最後まで流し読むと「え?何それ」みたいなのがあるかもです。 今回は各種
もはやタイトルのまんまなんですが。 僕がWEB屋を初めてから、背景やボタンのアクセントに使うようなテクスチャとかパターン素材とか、とにかく沢山見て来た物をメールから、ブックマークから、チャットから、Evernoteから引っ張り出して数ある限りご紹介させて頂きます。 僕の場合は、こういうサイトを見てテクスチャのアイデアを探すことの方が多いですね。 ちなみに数も多いので、devianaartやらeverystockphotoなどの超有名どころは外しています。では、早速見ていきましょう。 Subtle Patterns | Free textures for your next web project 種類はそこまで多くないですが、使いやすい感じのパターン素材ですね。個人的に一押し! Texture | Premium Pixels 以前の記事でご紹介した、ハイクオリティなPSDがダウンロード出
「Icones.pro」ではPNGアイコンがたくさん公開されています。 トップページでカテゴリ別に用意されており、詳細を見てみると関連したアイコンがどばーっとでてきます。 PNGは透過のものではなく、背景色が入ります。 背景色はこちらで自由に設定できるようになっています。 また、PNGファイルだけでなく、.icoファイルもダウンロード可能です。 以下に色んなアイコンを載せておきます。 Twitterのアイコンを探してみます。 まず「Icones.pro」へアクセスします。 するとこんな感じのTOP。 ほかにもたくさんあります。 アイコンはこれだけではなく、クリックするとさらに色んなアイコンが表示されます。 ラストはカテゴリ。 Twitterカテゴリを見てみます。 このようにTwitter関連のアイコンがどっさり。 Twitterだけで100個以上あります。 ダウンロードしたいものをクリック
WordPress で Webサイトを構築する時に、設計の段階で知っておきたい投稿のタイプ(ポストタイプ)について、その特徴などをまとめてみました。とても長い記事になってしまい、うまくまとめられなかったかもしれません ... WordPress ... 奥が深いんだもん ... Webサイトを作るぞーってなってから、アップロードして公開するまでには、本当にたくさんの色んな工程がありますよね。まず発信したい情報があって、誰に見てもらいたいとか考えて、設計してデザインして、コーディングして … 。 Webサイトを作るとき、いきなりデザインやらコーディングから始めるってことはありませんよね。今回は実際にデザインを始める前の段階、サイトの設計やワイヤーフレーム作りをする段階のお話。WordPress で Webサイトを作る時に、設計の段階で知っておくといいかなーと思う、ポストタイプ(’post_t
今まで気づかずにいたが、Appleはスマホ(スマートフォン)向けサイトを作っていない。それは何故か。 予算がないとか、(どこぞのメーカーと違って)ウェブデザインや自社製品についての理解度が低いとか、おそらくそういったネガティブな理由ではない。Appleのウェブサイトには、自社のプロダクトデザインに通じる主張が表現されている。 Mobile Safari のUIデザインの本質を垣間見るウェブデザイン 自社のプロダクト(ここでは特にMobile Safari)のUIデザインが、何を理想として、どう調整されてきたのか、このサイトのデザインから読み取ることができる。 Appleのウェブサイトの裏側をちょっとだけ覗いてみると、viewport に width=1024 が記述されている。これは、iPhoneの小さな画面でも1024px分の幅があるものと仮想してレンダリングされるようにする、呪文のよう
Errors (All) | (None) Beware of broken box sizing Require properties appropriate for display Disallow duplicate properties Disallow empty rules Require use of known properties Compatibility (All) | (None) Disallow adjoining classes Disallow box-sizing Require compatible vendor prefixes Require all gradient definitions Disallow negative text-indent Require standard property with vendor prefix Requi
スマートフォンサイトを本格的に作るようになってきたので、いろいろ基本的なことから調べてみました。 自分はコーディングがメインなので、HTML/CSS/JSが主になっています。 制作する前に仕様の確認 スマートフォンの仕様が載っています。一通り目を通すと、製作してる時に「これができない!」などの問題が回避できるかもしれません。 ASCII.jp:サイト制作の前に知りたいiPhone/Androidの仕様|実践!iPhone&Androidサイト制作ガイド ASCII.jp:サイト制作の前に知りたいiPhone/Androidの仕様|実践!iPhone&Androidサイト制作ガイド スマートフォンサイトの制作 – 基礎編 – – ぺーぺーエンジニアのおぼえがき スマートフォンサイトの制作 – 基礎編 – – ぺーぺーエンジニアのおぼえがき iPhone iPad向けサイトを制作するためのいろ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く