初心者さんのためのWebサイト制作に役立つリンク集
2017年6月29日 Webサイト制作 「Webサイト勉強するのにおすすめのサイトを教えてください！」との声が多いのですが、日本のWeb関連チュートリアルサイトをあまり見たことがなかったので、今までおすすめできませんでした…。ということでちょっとググって初心者さんによさそうなサイトをいくつか紹介します。小難しい単語が並んであるようなサイトは避けているつもりですが、わかりにくかったらすみません。他にもおすすめサイトがあればぜひコメント欄にて教えてください！ ↑私が10年以上利用している会計ソフト！ Webサイトを作る流れ まずはWebサイトを作る目的を考える 誰のため？何のため？Webサイトを作り始める前に。 サイトマップと呼ばれる構成図を作成 Webサイトの構成図を簡単に作れる便利ツール ワイヤーフレーム（Webサイトのレイアウト）を作成 Webサイトの骨組み: ワイヤーフレームを素早く・
[JS]画像やテキストをフォーカスした際に不透明度をコントロールするスクリプト -Opacity Focus
画像やテキストをフォーカスした際に、不透明度をコントロールするスクリプトをdavid walsh blogから紹介します。 <textarea name="code" class="js" cols="60" rows="5"> $(document).ready(function() { //area 1 $('.fade-area-1').children().hover(function() { $(this).siblings().stop().fadeTo(500,0.5); }, function() { $(this).siblings().stop().fadeTo(500,1); }); //area 2 $('.fade-area-2').children().hover(function() { $(this).siblings().stop().fadeTo(500
IllustratorもJavaScriptで自由自在に！ (4/4)
塗りや線の色を設定する 四角形の線幅や塗りの有無は設定できましたが、肝心の色がまだ指定できていませんでした。塗りつぶす色は fillColorプロパティに、線の色は strokeColorプロパティに、カラーオブジェクトを設定します。指定するカラーオブジェクトは、カラーモード（RGB／CMYK）によって異なります。 ●RGBカラーの場合 RGBカラーオブジェクトはnew RGBColor()で生成できます。生成したオブジェクトのred, green, blueプロパティに、それぞれRGB値を設定します。RGB値は0～255までの整数になります。 ●CMYKカラーの場合 CMYKカラーで指定する場合はnew CMYKColor()を使います。生成したオブジェクトのcyan, magenta, yellow, blackの各プロパティにCMYKの値を設定します。設定できるCMYKの値は0～10
29分でできる！ あのサイトの“技”を盗め
「プロが作ったWebサイトのあの“技”をウチのサイトでも（それもタダで）マネしたい！」――。そんな欲求に応えてくれる JavaScriptライブラリ／フレームワークが、ネット上にはたくさん公開されています。この連載では、国内外の商用サイトの優れたUIをお手本にして、なるべくカンタンに、手間をかけずに自分のWebサイトをブラッシュアップしていく方法を紹介します。
8 Layout Solutions To Improve Your Designs — Smashing Magazine
The organization of content is probably one of the most important and influential aspects of any good web design. Organizing information into a well-built layout is the basis of a website, and should always come before styling concerns. Without a good layout, the website doesn’t seem to flow correctly, and nothing connects the way it should. In this article, we’ll discuss 8 useful layout solutions
3分でできるJS＋CSS「角丸」テクニック (1/3)
“Web2.0”っぽいWebデザインの定番、角丸ボックス。実際、ここ数年、サイドメニューやナビゲーションバーなどに角を丸くしたブロック要素を多用するサイトを目にする機会が増えています。 ところがこの角丸ボックス、（X）HTMLとCSSだけで実現するには、コーナー部分の背景画像を用意したりCSSを書き足したりと、意外に手間がかかって面倒です。現在、W3C（World Wide Web Consortium ）で策定が進められているCSS3（CSS level 3）では、ブロック要素の角を丸くできる border-radiusプロパティが追加される予定ですが、現在のところCSS3は一部のWebブラウザーしか対応していませんし、border-radiusプロパティの実装状況にもばらつきがあります（Firefoxの -moz-border-radius、Safariの -webkit-border
WEBデザイナーという肩書きを使う場合にあったらいいかもなスキルとWEBで見れる無料教材とリソース集:phpspot開発日誌
WEBデザイナーという肩書きを使う場合にあったらいいかもなスキルとWEBで見れる無料教材とリソース集 2009年03月23日- WEBデザイナーという肩書きを使う場合にあったらいいかもなスキルとWEBで見れる無料教材とリソース集。 プログラマが１ヶ月でWEBデザイナーに転身する方法 というエントリを見て、プログラマの方々のWEBデザインに関する関心の高さを見て書いてみます。 WEBデザイナーといっても色々な知識が必要で、かつ、最近はフリーのテンプレートも豊富にある中、どれだけ出来ればWEBデザイナーとして成り立つのだろう？という疑問がありましたので考えてみました。プログラマの方で、WEBデザインをやってみたい。また、全くの素人だけどWEBデザイナーを仕事にされたいという方の参考になれば幸いです。 最低限の知識編 1. HTMLとレイアウト力 まず、知っている人には物凄く当たり前の事ですが、
プログラマが1ヶ月でWebデザイナーに転身する方法 - やねうらおブログ(移転しました)
サイトを構築していると、プログラマはWebデザイナーと共同作業をしなければならない。 しかし高度なRIAを実現しようとすると思っているようにWebデザイナーに素材を作成してもらうだけでもとても骨の折れる作業だ。 そこで、一層、「すべてのプログラマはWebデザイナーになればいいんじゃね？」と思った。 今回は、私の実体験に基づき、「プログラマが1ヶ月でWebデザイナーに転身する方法」というのを考えてみた。 ■ HTML,CSSを覚えよう まず、HTMLとCSS。いくら私でもW3C( http://www.w3.org/ )のすべてに目を通せとは言わない。 ブラウザ間で挙動が違うのでそれぞれのタグがどのブラウザで使えるのか一覧がまず欲しい。手軽なのは詳解HTML & CSS & JavaScript辞典。このハンドブックは見やすいのでお勧め。また、よく使うタグに関してはすべて覚えよう。覚えている
[JS]スムーズなスライドが気持ちいい、パンくずのスクリプト -jBreadCrumb
jBreadCrumb demo パンくずはリスト要素で実装されており、既存のパンくずに適用することも簡単です。 「jquery.jBreadCrumb.js」の最後に記述してあるオプションでは、オープンするルール、オープンしておくレベル、アニメーションのスピード、クローズ時のサイズなどを変更できます。 オープンするルールの最大文字数と最小文字数を100に、エレメント数を1に、オープンしておくレベルを終わりから2に、クローズ時のサイズを20に変更。 jBreadCrumbはjQueryのプラグインのため、動作にはjquery.jsが必要です。
[JS]これ最強かものツールチップスクリプト -BeautyTips
シンプルなツールチップも簡単に実装できるだけなく、デザインのカスタマイズが可能で、対応トリガーも豊富なツールチップのスクリプト「BeautyTips」を紹介します。 BeautyTips demo BeautyTipsは機能が豊富というだけでなく、テキストや画像、AJAXコンテンツの表示、ツールチップの表示位置の自動補正など基本性能もしっかりと抑えられており、フォームエレメントへの表示、ツールチップ元の変更なども可能です。 ツールチップはcanvasで描かれており、画像は必要ありません。 対応ブラウザはIE6.x+, Fx3.x, Op8+, Safari3.xとのことで、canvas非対応ブラウザにはExplorerCanvasが使用されています。また、IE6のz-indexへの対応にbgiframe、ホバー処理にhoverIntentが使用されています。 ※Chrome 1, Fx2で
[JS]配置済みのリンクにドロップダウンを簡単に追加できるスクリプト
ページ内に配置したリンクに、リストで作成したドロップダウン型のナビゲーションを簡単に追加できるスクリプトをDynamic Driveから紹介します。 ナビゲーションに追加したデモ 配置できるナビゲーションは、オプションで不透明度、ディレイ時間、表示位置を調整することができます。 スクリプトの設置方法は、「anylinkcssmenu.js」「anylinkcssmenu.css」を外部ファイルで指定し、リンク要素のclassに「anchorclass」を記述します。 配置するナビゲーションは、divで括りclassに「anylinkcss」を記述し、任意のid（例：submenu1）を記述します。そのidと同じものをリンク要素のrelに記述します。 <textarea name="code" class="html" cols="60" rows="5"> <p><a href="http
[JS]オバマ大統領も使ってるjQueryのプラグイン集
jCarousel 画像をカルーセルのアニメーションでスライド表示。 画像拡大スクリプト（Thickbox）と組み合わせたり、ニュースサイトのようにテキストを垂直方向にスライドしたり、AJAXにも対応。
これは便利だ！Excel→Table化するjQueryプラグイン
Webページに掲載する面倒な表（テーブル）の作成を楽にしたい――。以前、本サイトではExcelファイルを簡単にHTML（Tableタグ）に変換するExcelアドイン「XLS2HTMLTable」を紹介した（関連記事）。XLS2HTMLTableはとても便利なツールだが、それでも表が大量に必要な時にはやはり手間がかかる。 今回はさらに楽をできて便利なアイテムを紹介しよう。それが、CSVファイル（カンマ区切りテキスト）を読み込み、Tableに整形して表示するJavaScriptライブラリ「jquery.csv2table.js」だ。 JavaScript関連の著書も多い高橋登史朗氏が作った「jquery.csv2table.js」は、名前のとおりjQueryのプラグインとして動作するもので、HTMLにわずか数行のスクリプトを書き加えるだけで使える手軽なライブラリだ。さっそく実際にjquery.
HTMLもCSSも書換不要！気持ちいいスクロール (1/5)
Webサイトを作るにあたって、ネット上でデザインの参考になるサイトを探していると、プロのWebデザイナーのポートフォリオサイトに行き当たることがあります。ポートフォリオサイトはデザイナーにとってのショーケース。気合の入った作りや実験的な要素を盛り込んでいるサイトもあり、単純に眺めても楽しいものです。 今回取り上げるサイト「Cosmive」は、Webデザイナー・Muhammad Uzairさんのポートフォリオサイト。色鮮やかで美しいグラフィックに、JavaScriptによるダイナミックなユーザーインターフェイスを合わせています。今回はこのサイトから参考にさせてもらいましょう。 今回のお手本サイト：『Cosmive』 パキスタン在住のWebデザイナー、Muhammad Uzairさんのポートフォリオサイト。自身のプロフィール、手がけた作品の紹介、問い合わせフォームまで、1ページにコンパクトにま
ASCII.jp：Web制作会社が作った！超使えるJavaScriptライブラリ
「Webサイトを作るときに本当によく使う機能を、自分で作らずにさくっと実装したい」――。そんなワガママな願望をかなえてくれる JavaScriptライブラリが登場した。ミツエーリンクスが今月オープンソースとして公開した「MJL（MITSUE-LINKS JavaScript Library）」は、Webサイト制作に必須の“最小限の機能”に絞ったJavaScriptライブラリだ。 昨今相次いで公開されている、リッチなUIを実現するJavaScript/Ajaxライブラリとは異なり、MJLの機能はとてもシンプルだ。もともとWeb制作会社であるミツエーリンクスが「自社標準ライブラリ」として作成したものだけあって、汎用性・実用性を重視したライブラリになっている。 具体的な機能は以下の6つ。確かにどれもよく使いそうなものばかりだ。 画像のロールオーバー Flashオブジェクト埋め込みの機能拡張 新規
JavaScriptライブラリで作るリッチUI（まとめ）
Webサイトを使いやすく、楽しくするリッチなユーザーインターフェイス（UI）。手軽に使えるオープンソースのJavaScript／Ajaxライブラリが充実してきたおかげで、従来はFlashでしかできなかったようなUIが、HTML/CSS＋JavaScriptだけで作れるようになった。 ここに、ASCII.jpで紹介したJavaScriptライブラリの使い方、実際の採用サイトの情報をまとめてみた。ぜひ自分のWebサイトのUI制作の参考にしてみよう。 ※このページは随時更新します Last update：2008年12月18日 JavaScript／Ajaxライブラリ紹介記事
魅力的なウェブサイトを作成するために知っておくと便利な9つのスクリプト - GIGAZINE
個人的なウェブサイト作成や仕事としてウェブサイトを作成している人だけでなく、何かのサイトを発注して作ってもらう際などにこういうのを知っておくと、かなりはっきりと具体的なイメージを相手に伝えやすくなるので、スムーズにコミュニケーションできるはずです。あるいはクライアントにこれらのリソースの存在を認知してもらうことで、話が進めやすくなるかもしれません。 というわけで、魅力的なウェブサイトを作成するために知っておくと便利な無料の各種スクリプトは以下から。 Woork: Useful resources and tutorials for developing stunning web sites 1. ModalBox http://www.wildbit.com/labs/modalbox/ Web2.0スタイルのダイアログボックスなどを表示させることができます。Mac OS Xのダイアログボ
ソニーグループ、FlashやめてAjaxでリニューアル
画像がダイナミックに切り替わり、マウスオーバーに合わせてナビゲーションバーが変化する――そんな“動きのあるサイト”を作るのに、あなたなら今、何を使うだろうか？ 4～5年前ならほぼ間違いなく「Flashで決まり！」だったかもしれないが、2005年以降、Ajax/JavaScriptを使うサイトが増えている。最近では手軽に実装できるライブラリの充実とともに、ますますその傾向にあるようだ。 9月9日にリニューアルされたソニーグループのコーポレートサイト（www.sony.co.jp）もその一つ。旧サイトに比べてトップページのレイアウト領域が広くなり、文字も大きく、スッキリとしたナビゲーションバー……と、注目したいところはいろいろあるが、最初に目を奪われるのは中央にある大きなメインビジュアル部分のはずだ。実はここにJavaScriptが使われている。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ASCII.jp：Web制作の現場で使えるjQuery UIデザイン入門
[JS]シンプルなタブを実装する超軽量（5KB）のスクリプト -SimpleTabs