CSSデザイン - Naifixコピペで使える CSS デザイン集はこちらをご覧ください。WordPress 以外のブログでも使えますが、ご利用中のテーマ・テンプレートに合わせて微調整が必要になることもあります。
英語も学べて一石二鳥！webデザインやコーディングが学べる良質な海外サイト10選
日本のみなさん、こんにちはぁ！バンクーバーでWebを修行をしているのび太です。 Web制作を学ぼうと思ったらいろいろな方法があると思います。専門学校に通う（王道）、オンラインの通信講座を受ける、プロのWebデザイナーにレッスンをお願いするetc。 Webを勉強する1つの方法として、ネット上のWeb制作に関するサイトを利用するというのがあると思います。スクールに通ったり、通信講座を受けたりするのはお金の面で負担がかかりますからね… ありがたいことに今の世の中わかりやすいWebを学べるLIGのようなサイトが仰山あります。強い勉強意欲と気合さえあればオンラインのソースや教材をフル活用することで独学でも十分学べると思います。 その際に日本語サイトだけでも十分学べますが、あえて英語サイトを使うことで以下のようなメリットがあると思います。 Webと同時に英語が学べる。 日本語サイトより詳しく学べる。
html/css 参考サイト総まとめ
作成：2013/10/15 更新：2014/11/01 Web制作 > 先週、WordPressとEC-CUBEのレイアウトを変更しなければいけなくて、久しぶりにいじっておりましたが、忘れていたり知らなかったことが沢山ありました。レイアウトはSEOやUIにも深く関係しているのもあり、ここらへんでCSSやHTML５を触るときに参考にすると捗る記事を一回まとめようと思います。今回はCMSやオリジナルサイトを作るうえで「知っておくと必ず役立つ」ものをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 定番まとめ １．勉強になるテクニック／サンプルまとめ 基本知識 ２．セレクタ ３．メディア クエリ ４．コーディング規約 ５．フォント ６．CSSスプライト ７．アニメーション ８．正確なHTML使用方法 ９．CSSハック １０．書き方／読み方 定番まとめ
グーグル 無料のウェブ制作ツール Web Designerを公開
Googleからものすごそうなツールが登場。Adobeのツールがすべて合体したようなツールです。Illustratorのようなパス描画を可能とし、3Dビューで編集まで可能、さらにAdMobの設定までできてしまい、タイムラインでHTML5のアニメーションまでできてしまうようです。 直感的ツールで作ったデザインをマルチデバイスに対応したウェブページとして吐き出してくれるようです。又、デザインツールで作られたコードをコードビューに切り替えて直接編集することまでできてしまい、まさにかゆいところの手が届く感じの機能が網羅されているようです。 新規ファイル作成画面 3Dビューを備えたイラストレーター的ツール チュートリアルがこちらで用意されています。 Google Web Designer Help これは使い込んで見て損はなさそうですね。恐ろしいツールが出てきてしまいました。Adobeはどう出る？
【わずか3ステップ】初めてのWordPressでホームページの作り方
WordPressの「これが困った！」 WordPressで困っていることはありませんか？ サーバー移転／エラー解消／カスタマイズなど、WordPressの「これが困った」を解決します。 WordPressの便利屋 WordPressなら簡単にホームページを作れるという噂は本当か？ 確かに、WordPressを利用すれば以下のような3ステップでホームページを自作できます。 でも、注意したいのがWordPressならではの危険性。 WordPressでホームページを作ると、以下の3つのリスクがあるのを知ってましたか？ ハッキングされやすい ページ表示が遅くなりやすい 定期的なメンテナンスが面倒 こういうリスクを知らないまま、WordPressを利用するのはオススメできません。 事業の売上や顧客の信頼を大きく損なう失敗へとつながる恐れがあるからです。 例えば、ホームページがハッキングされて大切
新卒webデザイナーがとりあえず見といたほうがいいブログ・記事
良いデザインって？技術を学ぶ前に知っておきたいデ... / Webサイト制作において、私なりの色選定の考え方... / ヴィジュアル要素の表現方法 | Arch他...全10件
Webデザイナ、デベロッパーの為の国内ブログ24+72記事
独自視点で順番に特に意味はありません。 これから春に就職する方も、今も奮闘中の方も是非お勧めしたいデザイナー、Webデザイナー、デベロッパー向けの国内ブログのまとめです。 さらにそのブログの中でもおすすめの３記事をピックアップいたしました。お時間の有るときにでもどうぞ。 Webデザイナーなら知ってるでしょ？ １）Webクリエイターボックス 私のブログのデザインを作った人。世界を放浪しながらデザインを学んでいる。もっと手軽に楽しくWeb制作ができるようにみんなになってほしいをモットーにしているのでわかりやすい記事が豊富。 Facebookページの作り方 2012年1月版少しの手間で大きく変わる、細部にこだわったWebデザインを少しのコードで実装可能な20のCSS小技集 ２）Webデザインレシピ リファレンス的な分厚い記事が豊富。正直分厚い記事を書く人といえばもはやこの人しか居ないというくらい
CSS3で斜めに傾いたメニューを作る時のメモ | Webクリエイターのメモ帳
このサイトの右上に斜めになったメニューがありますが、これはCSS3（+背景画像）でできています。 IEの場合はスタイルシートを変更して画像で再現されるようにしています。 このメニューをCSS3で作るときに若干コツがいったので、CSS3で斜めに傾いたメニューを作る時のメモ。 HTMLコード HTMLコードはこのような最小限でシンプルなもので実装しています。 </p> <ul> <li id="demo-menu1" class="demo-menu"><a href="./">MENU1</a></li> <li id="demo-menu2" class="demo-menu"><a href="./">MENU2</a></li> <li id="demo-menu3" class="demo-menu"><a href="./">MENU3</a></li> <li id="demo
無料で使える単一ページのHTML/CSSテンプレート集
美しい単一ページの無料テンプレート集。 CSS/HTMLの勉強にも使えそうですが、細かいところで単一ページらしいアイデアが使われているところも見所です。 色々と使い所満載のテンプレート集 単一ページだからと思って油断していましたがなかなかのクオリティでびっくり。 Free Single-Page HTML5 Portfolio Template Demo / Download スライドショーの部分も細かいですがよく出来てます。 Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3 Demo / Download Page 一般的な縦型のシングルページ。スムーズな移動も特徴的です。 Resume (HTML) Demo / Download Page Roundfolio: A Free Portfolio T
5分でわかるCSSグラフィック
知って得する、Webブラウザ上で利用できるグラフィック関連技術。アニメーションや3Dが表現できる「CSS3」をハックしよう CSSで多彩な表現が可能に 本連載では、Webブラウザ上で利用できるグラフィック関連技術を、読み切りの形で、なるべく分かりやすく紹介していきます。第1回である今回はWebの基本技術の1つであるCSSで実現するグラフィック表現を取り上げます。 従来のCSSはWebページのフォントやレイアウトを整える機能がほとんどで、「グラフィック技術」というには物足りないものでした。しかし、CSS3と呼ばれる近年の拡張によって、アニメーションや3D表現を含む多彩な画面効果が実現できるものに進化しています。 この記事は、そうしたCSS3のグラフィック関連機能の基本的な使用方法をまとめて学習することを目的としています。 ベンダプレフィクスについて CSS3の多くの機能はまだ規格策定段階のも
CSS3 IE対策まとめ
CSS3を使うにあたっていつも問題になるのが Internet Explorer（IE）です。CSS3への対応が遅い上に、旧バージョンを使い続けているユーザーも結構いますので、CSS3を使うことに躊躇する人も多いのではないでしょうか？ ということでCSS3を使うにあたって知っておきたいIE対策を紹介します。 1. CSS3の対応状況を確認する まず、IEのバージョンごとでCSS3にどこまで対応しているか知っておく必要があります。個人的によく使っているのはこのサイトです。 CSS3 & HTML5 Browser Support CSS3で追加されたプロパティ、セレクタについてブラウザごとの対応状況が分かりやすく表示されています。 2. CSS3セレクタに対応する セレクタはSelectivizr.jsだけあれば簡単に対応できます。「CSSセレクタって何？」「CSS3セレクタってどういうもの
CSS3の勉強になるかも！？画像を使わないボタンの作成手順
CSS3を使うと画像のようなボタンも簡単に作れます。よくあるタイプのボタンですが、できあがりのコードだけだと勉強にならないので、作り方を順番に紹介していきます。 今回、ChomeとFirefoxで動作確認しています。IEだとグラデーションが使えないので、同じボタンがたくさんあるように見えます。スマホサイト用なんかだと十分実用的だと思います。
PhotoshopでのWeb制作効率を向上させる「JSX」とは
ご存じの方もいらっしゃると思いますが、Adobe Photoshop は JavaScript で制御することができます。 Photoshop 用の JavaScript ファイルのことを「JSX」と呼びます。拡張子は .jsx です。 Photoshop を使ってWeb制作されている方は多いかと思いますが、Photoshop は本来写真加工用のソフトでありWebデザイン用のソフトではないため、特にレイアウト機能が Fireworks、Illustrator、InDesign などに比べ貧弱です。 しかし、JSX を使用することにより Photoshop のレイアウト機能やWeb制作向けの機能をある程度向上させることができます。 JSX は昔から Photoshop に搭載されていましたが、書き方の参考になるような書籍やサイトが少ないためかそれ程注目されていなかった気がします。 しかし、最
AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ
AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ AndroidやiPhoneなどのスマートフォンではHTML,CSS,JavaScriptにバグが多くてコーディングが大変になります。そこでバグを紹介しているサイト、記事をまとめてみました。(中にはバグではなく仕様なものもあるかもしれません) iOS 8.4.1の:hover問題 iOS 8.4.1で:hoverを指定していると1タップでページ遷移できない問題 【STINGER5】AndroidのChromeで＆nbsp;が「・」になってる気がする | ビビビッ を に変更すると直るとのこと。 Mobile Safari 8でposition: fixedした擬似要素が完全に位置が固定されない - Weblog - Hail2u.net Mobile Safari 8でposition:
ど素人の私がWordPressテーマを自作した際にめっちゃ参考にさせていただいた13記事 | なまら春友流
先日WordPressのテーマを自作しました。 ど素人でも自作できたWordPressテーマの作り方。教科書は『WordPress デザインブック』 | なまら春友流 基本的には「WordPress デザインブック」という本を参考に作成。 でもそれだけでは自分の好きなようにはデザインできなかったのでやっぱりGoogle先生に聞いてみました。 多くの記事を読みましたがそのなかでもめっちゃ参考になった記事をご紹介いたします。 記事の作者様本当に役立ちました、ありがとうございました！ AGENDA ソーシャルブックマークボタンの埋め込み 記事の1番最初の画像をサムネイル表示する（2記事） 広告の表示 ブロック要素とインライン要素 CSS3用例集（3記事） jQuery サイトの配色について WordPressのまとめ記事（3記事） 1. ソーシャルブックマークボタンの埋め込み WordPress
ベジエ曲線のラインに沿ってテキストを折り返すことができるjQueryプラグイン・Bacon!
ちょっと面白いプラグインだったので 備忘録。曲線に沿ってテキストを折り 返せるようにするjQueryプラグインで す。新聞のようなレイアウトも組めそ うです。用途はあまり無さそうですけ ど、珍しいので覚えておきたい。 Bacon!(ベーコン)です。名前の経緯は分かりませんが、ペジェ曲線にそったテキストの折り返しが可能です。 こんな感じ。結構前に同じようなライブラリありましたね。こちらはペジェ曲線と同じような感覚でラインを作る事が出来ます。 こういうのとか こういうのも作れる。 IEでもなんとか動く。 コード<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="bacon.jquery.js"></script>jQueryとプラグインを読み込む
長野県川上村のHPがスタイリッシュだから、他も見習うと良いよ : 長野ウラドオリ
カテゴリカテゴリ： 信州プチ報道 by ワカバヤシヒロアキ 2012年03月07日 長野県川上村のHPがスタイリッシュだから、他も見習うと良いよ Tweet 長野県南佐久郡川上村。長野県には７７の市町村があり、それぞれに公式ホームページが開設されております。その中でも、川上村のサイトデザインが、異様にスタイリッシュなんです。 野菜ができるまで どことは言いませんが、トップページを見た瞬間。いかにも古めかしいデザインの市町村もたくさんあります。また、長野市や松本市など、機能的な部分や情報量を優先したデザインのホームページも多いです。そんな中、川上村のホームページはダイナミックで奇麗な写真を上手に使い、すごく洗練されているのです。 観光案内のイラストもステキです この一枚のバナーに、ハイキング、フィッシング、キャンプ、ゴルフ、地野菜、ドライブ、川上犬という村の特色がシンプルに表現されています。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS3で作るアニメーションするメニューやボタンのチュートリアル
http://demooo.com/ikea/ikea-soffor/en/
新着記事
