3つのステップでレスポンシブデザインを作成する方法 / ウェブデザインライブラリー
投稿日：2013年12月5日 ソフトウェア：- このチュートリアルでは3つのステップでレスポンシブデザインを作成する方法について紹介します。 Step1 ： はじめに Step2 ： メタタグ Step3 ： HTML構造 Step4 ： メディアクエリ Step5 ： 最後に レスポンシブWebデザインが現在重要なものであることは疑いもありません。 まだレスポンシブデザインについてご存じなければ、私が最近掲載したいくつかのレスポンシブサイトをご参照ください。 初めての人はややこしく感じるかもしれませんが、実際は思ったより簡単なことです。 レスポンシブデザインがすぐに始められるように簡単なチュートリアルを作成しました。 レスポンシブデザインとメディアクエリの基本を3つのステップで学ぶことができます。 （基本的なCSSの知識がある場合）
CSS3で縫い目風のデザインを作る / ウェブデザインライブラリー
投稿日：2013年7月25日 ソフトウェア：CSS3 このチュートリアルではCSS3で縫い目風のデザインを作る方法について紹介します。 Step1 ： はじめに Step2 ： CSS3 Step3 ： 完成 デザインの世界では、要素をより減らし、効果をより増やすことが重要になります。 要素が多すぎると、ぐちゃぐちゃになってしまいますし、逆に少なすぎると90年代のような古臭い印象を与えてしまいます。 幸せなことに、ウェブデザインには、CSS3という素晴らしい武器があります。 CSS3を使えば、ページやページ内のコンテンツにポップさが加わります。 そして、サイトをごちゃごちゃさせることなく、一部分を際立たせたりきれいに見せることができるようになります。
Webkitブラウザでスクロールバーを自在に作る方法 / ウェブデザインライブラリー
投稿日：2013年6月27日 ソフトウェア： このチュートリアルではWebkitブラウザでスクロールバーを自在に作る方法について紹介します。 Step1 ： はじめに Step2 ： 色、幅、境界線 Step3 ： 付加的な擬似クラス Step4 ： 結論 Internet Explorerでは、ほとんど最初の頃からできることです。 といっても、スクロールバーのカスタマイズについての話です。 2000年7月にリリースされたバージョン5.5からは、スクロールバーの色を変えることができます。 ごく最近は、WebkitによるブラウザはIE 5.5に追いつき、色を変えるだけにとどまらず、より洗練されたカスタマイズができるようになりました。 カスタマイズしたスクロールバーの例
あなたのサイトにシェアボタンを設置する方法 / ウェブデザインライブラリー
投稿日：2013年5月23日 ソフトウェア：HTML このチュートリアルではあなたのサイトにシェアボタンを設置する方法について紹介します。 Step1 ： はじめに Step2 ： HTML構造 Step3 ： JavaScript 情報というのは、とても貴重な財産です。 情報を持っている人こそが、財産をたくさん持っていると言えるでしょう。 ウェブには、「情報はシェアすべし」という暗黙のルールがあります。 特に、その情報がびっくりするようなものや、 役立つもの、面白いものなら、なおさらです。 ウェブの世界で一目置かれたいなら、すばらしい情報をシェアしましょう。 ネットにはたくさんのシェアボタンがあふれています。 そのため、まずは正しいシェアボタンの選び方をマスターしましょう。 ブログにどのようなソーシャルボタンを設置すればいいか わからないこともあるでしょう。 あなたのニーズに
CSS3で写真に光沢をつける方法 / ウェブデザインライブラリー
このミニチュートリアルではとても基本的な構造のHTML5を使います。 この効果を主にCSSを使って達成するため、記述は最小限にします。 従って、HTMLは可能な限り無駄が無く、 セマンティックなものにする必要があります。 ページ構造やラッパーを除いて、ここではIMGタグを記述した DIV要素（photoクラスを含む）を一つだけ使用します。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Glossy Gradient Effect</title> <link rel="stylesheet" type="text/css" href="css/reset.css" /> <link rel="stylesheet" type="text/css" href="css/style.css" />
Photoshopブラシセットを作る方法 / ウェブデザインライブラリー
投稿日：2013年3月26日 レベル：初心者 ソフトウェア： このチュートリアルでは、Photoshopブラシセットを作る方法を紹介します。 Step1 ： はじめに Step2 ： 新規ドキュメントを作成 Step3 ： ブラシオプションの設定 Step4 ： 調整 Step5 ： ブラシを定義 Step6 ： ブラシセットを作成 Photoshopのブラシは、疑いなくあらゆるデザインプロジェクトに役立ちます。 デザイナーはブラシを使っていつでも最高のグラフィックスを作り出します。 ブラシのないPhotoshopなど想像できないと言えるのは、使いやすくて仕上がりが本当に素晴らしいからです。 インターネットには十分なブラシセットがあるとはいえ、作業の内容とフィットするとは限りません。 そのような場合は、自分でブラシやブラシセットを作らざるを得なくなります。 ここから先は、基本的な
CSS3でクールなテーブルデザインを作る方法 / ウェブデザインライブラリー
table{ width:100%; border:5px solid #386977; border-collapse: collapse; border-spacing: 0; } tr, td{ font-size:14px; color:#222222; text-shadow:0 1px 1px #fff; padding:5px; text-align:center; border-bottom:1px solid #D3DDE2; border-right:1px dashed #D3DDE2; background: #feffff; /* Old browsers */ background: - moz - linear-gradient(top, #feffff 0%, #e6f1f7 100%); /* FF3.6+ */ background: -webkit-g
CSS3でソーシャルメディアのサイトのアイコンを作る方法 / ウェブデザインライブラリー
.common{ text-shadow:0 -2px 0 rgba(0, 0, 0, 0.5); -moz-border-radius:5px; -webkit-border-radius:5px; height:32px; width:32px; text-align:center; -moz-box-shadow:2px 2px 4px #ABABAB; -webkit-box-shadow:2px 2px 4px #ABABAB; cursor:pointer; margin-left:30px; } <div id='facebook' class='common'> <span>f</span> </div> CSS #facebook{ float:left; background:-moz-linear-gradient(center top , #4AA9ED, #2E7
Illustratorでアクア風ボールをつくる方法 / ウェブデザインライブラリー
投稿日：2013年1月15日 レベル：初心者 ソフトウェア： このチュートリアルではIllustratorでアクア風ボールをつくる方法について紹介します。 Step1 ： はじめに Step2 ： 円を作成 Step3 ： マスクをかける Step4 ： 完成 これをよんでいるあなたは、アクア風デザインのとりこになって、なんとかして自分のデザインにとりいれたい、と思っていることでしょう。このチュートリアルでは、このアクア風デザインの作り方を解説します。Illustrator 9以上を準備してください。不透明マスクの作り方をマスターして、写真のようにリアルな見た目にしましょう。 １．放射状のグラデーション付の円を作成 楕円形ツールを使って、円を描きます。ツールバーから、黒と白のグラデーション付の塗りつぶしを適用します。この塗りつぶしを行うには、「ウィンドウ > グラデーション」でグ
Photoshopで瞳の色を変える方法 / ウェブデザインライブラリー
投稿日：2013年1月8日 レベル：初心者 ソフトウェア： このチュートリアルではPhotoshopで瞳の色を変える方法について紹介します。 Step1 ： はじめに Step2 ： 瞳の色を変える Step3 ： 不要な部分を削る Step4 ： 完成 ステップ１ Photoshopで画像を開いてください。(Command+O) ステップ２ ズームツール(Z)を使って目の部分を拡大してください。なげなわツール(L)を使って瞳の周りにラフに丸い選択範囲を描いてください。 ステップ３ Shiftキーを押しながら、もう一方の瞳の周りにも丸い選択範囲を描きます。 ステップ４ Command+Jを押して、新規レイヤーに両目を複製し、eyes1と名付けてください。 ステップ５ 色相・彩度のパネル（「イメージ」−「色調補正」−「色相・彩度」）を開きます。スライダーを下記のように右に動かしてく
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
このドメインは お名前.com から取得されました。 お名前.com は GMOインターネット(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※1 「国内シェア」は、ICANN(インターネットのドメイン名などの資源を管理する非営利団体)の公表数値をもとに集計。gTLDが集計の対象。 ※1 日本のドメイン登録業者(レジストラ)（「ICANNがレジストラとして認定した企業」一覧（InterNIC提供）内に「Japan」の記載があるもの）を対象。 ※1 レジストラ「GMO Internet, Inc. d/b/a Onamae.com」のシェア値を集計。 ※1 2020年8月時点の調査。
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
このドメインは お名前.com から取得されました。 お名前.com は GMOインターネット(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※1 「国内シェア」は、ICANN(インターネットのドメイン名などの資源を管理する非営利団体)の公表数値をもとに集計。gTLDが集計の対象。 ※1 日本のドメイン登録業者(レジストラ)（「ICANNがレジストラとして認定した企業」一覧（InterNIC提供）内に「Japan」の記載があるもの）を対象。 ※1 レジストラ「GMO Internet, Inc. d/b/a Onamae.com」のシェア値を集計。 ※1 2020年8月時点の調査。
Photoshopで紙のメモを作る方法 / ウェブデザインライブラリー
投稿日：2012年11月27日 レベル：初心者 ソフトウェア： このチュートリアルではPhotoshopで紙のメモを作る方法について紹介します。 まず背景を作成し、それからたくさんのレイヤーやレイヤーマスク、その他の便利なテクニックをこのチュートリアルを通じて学んでいきます。 Step1 ： はじめに Step2 ： 図形の描画 Step3 ： ぼかし Step4 ： 完成
Photoshopでコメント用のリボンアイコンを作る方法 / ウェブデザインライブラリー
Home ＞ フォトショップ講座 ＞ Photoshopでコメント用のリボンアイコンを作る方法 Photoshopでコメント用のリボンアイコンを作る方法 投稿日：2012年11月20日 レベル：初心者 ソフトウェア： このチュートリアルではPhotoshopでコメント用のリボンアイコンを作る方法について紹介します。 まず黒い背景を作成し、それからたくさんのレイヤーやテキストレイヤーやその他の便利なテクニックをこのチュートリアルを通じて学んでいきます。 このチュートリアルは簡単なので、ぜひ、みなさんに挑戦してもらいたいと思います。 Step1 ： はじめに Step2 ： グラデーションの描画 Step3 ： テキストの挿入 Step4 ： テキストにレイヤースタイルの適用 Step5 ： 完成
Illustratorで太陽光線（ベクター素材）を作る方法 / ウェブデザインライブラリー
Home ＞ グラフィック講座 ＞ Illustratorで太陽光線（ベクター素材）を作る方法 Illustratorで太陽光線（ベクター素材）を作る方法 投稿日：2012年11月16日 レベル：初心者 ソフトウェア： このチュートリアルではIllustratorで太陽光線（ベクター素材）を作る方法について紹介します。 初心者でも簡単にできます。ぜひお役立て下さい！ Step1 ： はじめに Step2 ： 線幅の設定 Step3 ： 収縮ツールの選択 Step4 ： ツールの設定 Step5 ： デザインの形成 Step6 ： 完成 まずは、Illustrator を開きましょう。 このチュートリアルでは、サイズを360px × 360pxにしますが、どんな大きさでも構いません。 楕円形ツールを選択します。Lのショートカットでも構いません。 選択したら、円を描きます。 このチュ
Photoshopで金属のテクスチャを一から作成する方法 / ウェブデザインライブラリー
Home ＞ フォトショップ講座 ＞ Photoshopで金属のテクスチャを一から作成する方法 Photoshopで金属のテクスチャを一から作成する方法 投稿日：2012年11月2日 レベル：初心者 ソフトウェア： このチュートリアルでは、Photoshopで金属のテクスチャを一から作成する方法を紹介します。 Step1 ： はじめに Step2 ： レイヤースタイルの設定 Step3 ： レイヤーのラスタライズ Step4 ： フィルタの設定 Step5 ： 完成 このチュートリアルでは金属のパネルを（どこかからグラフィックを借りてくるのではなく）一から作成して、エッチングした文字の効果を作成します。 250ｘ100のサイズで＃353535の背景色を使って新規キャンバスを作成してください。 まず金属のプレートを作成することから始めます。角丸長方形ツールを選んで半径を10pxに設
Photoshopでロマンチックな夕暮れの風景を作る方法 / ウェブデザインライブラリー
Home ＞ フォトショップ講座 ＞ Photoshopでロマンチックな夕暮れの風景を作る方法 Photoshopでロマンチックな夕暮れの風景を作る方法 投稿日：2012年10月9日 レベル：初心者 ソフトウェア： 映画で見る有名な場所の、夢のように美しく、落ち着きのあるライティングはいつでも感動的です。 残念ながら、現実の世界では（まだ）見たことがありませんが。 とはいえ、Photoshopを使えば、お気に入りの風景でそのようなライティングを作ることが可能です。 このチュートリアルでは、Photoshopでロマンチックな夕暮れの風景を作る方法を紹介します。 Step1 ： はじめに Step2 ： クイックマスクの調整 Step3 ： 逆光の設定 Step4 ： フィルタの追加 Step5 ： レイヤースタイルの変更 Step6 ： コピー＆ペースト Step7 ： 完成 次の
Photoshopで卵トレイに顔を並べる方法 / ウェブデザインライブラリー
投稿日：2012年9月28日 レベル：初心者 ソフトウェア： Photoshopは面白画像を作ることもできます。 Photoshopで作る面白画像チュートリアルシリーズの一つとして、ここでは卵トレイに顔を並べる方法を紹介します。 ここで紹介する方法は、ポストカードや面白いバースデーカードを作るときに応用できます。 Step1 ： はじめに Step2 ： 切り抜いて貼り付けます。 Step3 ： 繰り返します。 Step4 ： 画像をぼかします。 Step5 ： カラーバランスを調整します。 Step5 ： レイヤーの設定をします。 Step5 ： 塗りを設定します。 Step6 ： さいごに
ウェブデザインによくある 10の間違い / ウェブデザインライブラリー
投稿日：2011年1月14日 レベル：− ソフトウェア：− このチュートリアルでは、ウェブデザインによくある 10の間違いをご紹介します。 Step1 ： はじめに Step2 ： 広告を入れすぎない Step3 ： メディアプラグインを使用する Step4 ： 極力 Flashを使用しない Step5 ： レイアウトやナビゲーションをわかりやすくする Step6 ： 外部リンクを適切に設置する Step7 ： リンクをわかりやすく表記する Step8 ： 電子メールのリンクはわかりやすく明示する Step9 ： リンク切れをなくす Step10 ： ベーシックなフォントを使用する Step11 ： 標準的なサイズのフォントを使用する
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
このドメインは お名前.com から取得されました。 お名前.com は GMOインターネット(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※1 「国内シェア」は、ICANN(インターネットのドメイン名などの資源を管理する非営利団体)の公表数値をもとに集計。gTLDが集計の対象。 ※1 日本のドメイン登録業者(レジストラ)（「ICANNがレジストラとして認定した企業」一覧（InterNIC提供）内に「Japan」の記載があるもの）を対象。 ※1 レジストラ「GMO Internet, Inc. d/b/a Onamae.com」のシェア値を集計。 ※1 2020年8月時点の調査。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
