配色、デザイン、文章、写真、センスがないとあきらめる前に勉強しよう！｜Webpark

2012/03/18 3126 users ウェブサイト レイアウト 言い訳 分野 基礎

自分が作ったウェブサイトを見て、「センスないな」とへこむことはありませんか？ 私はよくあります。色使い、レイアウト、写真、文章などなど、どれをとってもセンスないなとへこんでいました。 けど、センスがないのではなく、単に基礎を勉強していないだけということに最近気づきました。センスはもっと高い次元の話でした。 ということで、センスを言い訳にしてしまいがちな分野の基礎を学べるすばらしい記事を集めました。... 続きを読む

意外と知らない!?CSSセレクタ20個のおさらい｜Webpark

2011/06/14 2935 users おさらい

CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 そもそもCSSセレクタが何かというと、スタイルを適用する対象を選択するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 ieが対応しきれていないCSS3のセレクタもありますが、IE6〜8でもCSS3セレクタが利... 続きを読む

CSSの知識をもっと深める30+2の小技テクニック集｜Webpark

2011/05/11 2337 users 復習 小技テクニック たくさん 新しい発見 CSS

基本的なことやちょっと変わった意外な使い方などCSSに関する小技テクニックをたくさん紹介していきます。知っていることも多いかと思いますが、新しい発見もあるかもしれませんので復習を兼ねてぜひご覧ください。 続きを読む

ウェブサイト作成に役立つ35のwebサービス｜Webpark

2011/08/10 1717 users ウェブサイト作成 WEBサービス

ウェブサイトを作成する際に個人的に使っているWebサービスを紹介します。幅広く35個紹介しますので、きっと新しい発見があるはず。 フォント関係 wordmark.it パソコンに入っているフォントを一覧で見ることができます。フォントサイズも調整できます。 日本語フォント252種類を表示確認できます！フォントを探すならfonthack.jp。 日本語フォントの表示が確認できます。現在252種類ありま... 続きを読む

私がウェブサイト作成時にお世話になっているサイトをご紹介｜Webpark

2012/06/06 1560 users ギャ Webデザインギャラリー カテゴリ カラー 参考

こういうのを集めだすときりがないのですが、個人的に本当によくお世話になっているサイトに絞って紹介してみます。 有名なサイトばかりですがサイトを作るにあたってお世話になる順に紹介していきます。参考になればうれしいです。 Webデザインギャラリー | I/O 3000 まず、ギャラリーサイトでサイトのイメージを膨らませます。カテゴリ、タグ、カラーで整理されており、とても探しやすいです。 このようなギャ... 続きを読む

CSS(スタイルシート)の基本、小技、テクニック総まとめ｜Webpark

2013/03/24 1313 users CSS スタイルシート 小技 基本 目次

CSSの基本や使える小技テクニックなどを幅広くまとめました。以前書いて今もそこそこアクセスがある「CSSの知識をもっと深める30+2の小技テクニック集｜Webpark」という記事があるのですが、2年近く前の記事ですしパワーアップさせて作り直しました。 恐らく過去最長の記事ですので目次を作りました。クリックするとするりと移動します。基本的な内容が多いですが、お役に立つ項目があればうれしいです。 とい... 続きを読む

初めてスマートフォン専用ページを作成する際に知っておきたいポイント｜Webpark

2012/02/06 1144 users スマートフォン パターン ウェブサイト 内容 ご参考

最近今あるサイトをスマートフォンに対応させるべく、コツコツがんばっているわけですが、その際に気になったことや知っておきたいポイントをまとめてみました。基本的な内容も多いと思いますが、ご参考になればと思います。 1. スマートフォンに対応させるには？ ウェブサイトをスマートフォンに対応させるには2つのパターンがあると思います。 PCにもスマートフォンにも対応したページを作成するか、PC用ページとは別... 続きを読む

保存版！CSS3セレクタの説明書｜Webpark

2011/10/11 1140 users CSS3セレクタ 保存版 説明書

CSSセレクタについての基礎知識 このブログで何回も説明していますが、念のために説明します。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 セレクタ表の説明には属性や要素といった堅苦しい用語が出てきますので簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてこと... 続きを読む

犯してはいけないHTMLタグの過ち10個｜Webpark

2011/04/18 1128 users ブロック要素 インライン要素 意味 再確認 日本語

ちょっと前の記事ですが10 HTML Tag Crimes You Really Shouldn’t Commitという記事を見かけておもしろそうだったので紹介します。日本語にすると、犯してはいけないHTMLタグの過ち10個というところでしょうか。 知っている内容も多いかと思いますが、再確認の意味を込めて見ていただければと思います。 1. インライン要素の中にブロック要素を入れない 続きを読む

サイト作成に欠かせないサイトやサービスなどを20個｜Webpark

2011/03/09 1081 users フッター ナビゲーション ギャラリー あん たくさん

私がサイトを作る際によくお世話になっているサイトやサービスを紹介します。フリーソフトも2つあります。ご参考になればうれしいです。あんじょうできてはるWebデザインのギャラリーはたくさんありますが、見やすさ探しやすさでこちらをよく見ます。MephoBoxヘッダーやフッターなど部分的なものにこだわった海外のギャラリーです。404やナビゲーションなんかもあり参考になります。ロゴストック日本を中心にかなり... 続きを読む

リストに1pxのラインを追加するだけで、印象がぐっとよくなる｜Webpark

2012/03/26 1000 users 1px 印象 ライン リスト

#sample { width:500px; font-size: 16px; color:#333333; background:#d6e5f5; padding:20px; } #sample li { list-style-type : none; padding:5px 10px; border-bottom:1px solid #84b2e0; } 1. 下に薄いラインを追加してみる こ... 続きを読む

CSS3の勉強になるかも！？画像を使わないボタンの作成手順｜Webpark

2012/04/04 886 users Firefox グラデーション 順番 動作 たくさん

CSS3を使うと画像のようなボタンも簡単に作れます。よくあるタイプのボタンですが、できあがりのコードだけだと勉強にならないので、作り方を順番に紹介していきます。 今回、ChomeとFirefoxで動作確認しています。IEだとグラデーションが使えないので、同じボタンがたくさんあるように見えます。スマホサイト用なんかだと十分実用的だと思います。 続きを読む

カラーツール「0to255」で色を決めてメニューを作ってみる｜Webpark

2012/11/08 677 users 配色 オンラインツール 知識 かなり 色選び

このブログで何回か紹介している0to255というオンラインツールですが、かなり便利だと思うので使い方を説明してみます。 色に関する知識が乏しい私ですが、0to255を使うとまとまった感じの配色になるので重宝しています。今回は0to255を使ってメニューを作る際の色選びをしてみます。 0to255の使い方 まず、0to255の使い方についてですが、下の画像のように「PICK A COLOR」をクリッ... 続きを読む

細部にこだわってみた！CSS3を使った美しい横メニューの作り方｜Webpark

2012/05/07 659 users 細部 CSS3 作り方

<ul id="menu"> <li><a href="#">html</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">PHP</a></li> <li><a href="#">Perl</a></li> </ul> HTMLは最後まで変更しません。 #menu { ... 続きを読む

CSSの擬似要素を使った見出しデザイン｜Webpark

2013/01/27 633 users before After ボーダー 見出し 都度

このブログの見出しはシンプルなんですが、CSSの「:before」や「:after」など擬似要素を使えば色々と装飾ができますので今回は8つのサンプルを紹介します。 HTMLはすべてHタグだけです。特に意味はありませんが今回のサンプルはh4タグを使っています。 「:before」「:after」やボーダーで表現する三角形の使い方など慣れない方もいるかもれませんので、その都度簡単に解説していきます。「... 続きを読む

jQueryでスクロールしても上に固定されるメニュー｜Webpark

2011/03/23 629 users jQuery scroll window function

よく見かけるタイプのjQueryを使ったスクロールしても上に固定されているメニューを紹介します。最近FC2ブログの上部に現れた検索バー（このブログは非表示にしてます）みたいな感じです。javascriptの部分は次のようになっています。$(function() {$(window).scroll(function(){var scrol... 続きを読む

ロゴ、背景、アイコンなどの画像ジェネレータ厳選20個｜Webpark

2011/03/16 628 users favicon ストライプ グラデーション アイコン ロゴ

背景、ロゴ、favicon、Ajaxローディングなどの画像をオンラインで作成できるサイトを集めました。まだまだありますが、多すぎるとかえって不便だと思うので各ジャンルごとで3個または5個で厳選しています。背景関連1. Stripe Generatorストライプの模様を作るならここ。ストライプの幅はもちろん、影や柄なども自由自在です。グラデーションもつけることもできます。2. bgMaker背景パタ... 続きを読む

私がよく使っているウェブサイト作成に役立つサイトやツールのまとめ【2014年8月】｜Webpark

2014/08/07 494 users ツール ウェブサイト作成 まとめ

こういの記事を定期的に書いていますが、以前のものは古くなっているので書いてみます。ウェブサイト、ブックマークレット、拡張機能（Chrome）から本当によく使っているものを無理やり数を増やすことなく厳選して紹介します。 実際にウェブサイトを作成する時にお世話になるであろう順番で紹介します。ウェブサイト、ブックマークレット、拡張機能（Chrome）ごとで分けていませんのでご注意ください。 I/O 30... 続きを読む

オンマウスでふんわり現れる！CSS3を使った吹き出しサンプル5つ｜Webpark

2013/06/24 470 users opacity rotate Ｔｒａｎｓｉｔｉｏｎ CSS3

タイトルの通りですが、アイコンの上にマウスを乗せると吹き出しが現れるサンプルを紹介します。今回は現れる動きが違うサンプルを5つ用意しましたので、気に入ったものがあればうれしいです。 Chrome、Firefoxの最新バージョンやIE10だとすべてのサンプルが動きます。CSS3のtransitionやrotateが使えないブラウザでも機能的には問題はないと思います。opacityが使えないIE8以下... 続きを読む

Webデザインの配色について学ぶときに読んでおきたい14の記事｜Webpark

2012/09/06 456 users 言い訳 順番 センス 知識 配色

このブログをみてお分かりのように、私は思い切った色使いがなかなかできません。どうせセンスがないしと諦めても仕方ないし、恐らくセンスがないのではなく勉強していないだけですし、言い訳はせず勉強することにしました。 ということでWebデザインの配色について学べる記事を集めてみました。 基礎的なものから並べてみましたので、順番に読んでいけば色についての知識は深まると思います。「センスがない」という言い訳を... 続きを読む

コピペで簡単実装！CSS3でオシャレなデザインのサンプルコード23選｜ferret [フェレット]

2015/07/14 386 users Ferret フェレット コピペ 基調 実装

CSS3で簡単に実装できるサンプルコード一覧 1.CSS3を使って美しく装飾されたテーブルの作り方｜Webpark http://weboook.blog22.fc2.com/blog-entry-329.html ホームページ制作に関するあらゆるお役立ち情報を配信する「Webpark」の記事です。 ブルーを基調とした、シンプルでスタンダードなデザインのテーブルが作れるサンプルコードを掲載していま... 続きを読む

レスポンシブWebデザインに対応した横メニューの作り方｜Webpark

2014/03/18 379 users toggle MENU max-width width 横幅

レスポンシブに対応した横メニューを作る機会があったので、せっかくですし作り方を紹介したいと思います。お役に立てばうれしいです。 id名「toggle」の部分は横幅が480px以下の場合に表示するボタンです。481px以上の場合表示させません。その他はごく普通の横メニューです。 CSS 続いてCSSです。まずは全体を載せます。 #menu{ width: 100%; max-width: 960px... 続きを読む

jQueryとCSSのtransitionで可視範囲に入ってからアニメーションさせる方法｜Webpark

2015/10/27 334 users Ｔｒａｎｓｉｔｉｏｎ jQuery スクロール デモ CSS

可視範囲になってから表示されたり動いたり、スクロールに応じてアニメーションさせる方法を紹介します。動きをつけて目を引くことで、効果的に伝えることができるかもしれません。 以前、「jQueryを使って、スクロールしてコンテンツが現れたときにアニメーションさせてみる｜Webpark」という記事で同じようなものを紹介したのですが、デモが気に入っていない、アニメーションが1度きりということで作り変えました... 続きを読む

ゴーストボタンにマウスを乗せたときの動きいろいろ16個｜Webpark

2015/05/20 312 users span 擬似要素 HTML マウス サンプル

昨年くらいから流行っているらしいゴーストボタンというもののサンプルをいくつか作ってみました。皆さん色々作られていて、今さら感もありますがぜひご覧ください。 今回、以下のルールに沿って16個サンプルを作りました。 HTMLは全て同じ マウスを乗せる前は同じ状態 擬似要素は使っても1つだけ 擬似要素を2つ使ったり、spanなんかをはさんでやるともっと色々できると思いますが、今回はシンプルにマウスを乗せ... 続きを読む

iFrameによるFacebookページ作成法と6つのポイント｜Webpark

2011/03/27 287 users iframe Facebook Facebookページ 状態

先日はじめたばかりなのにFacebookについて語るのも偉そうかもしれませんが、せっかくiFrame形式のページを設置したので、その作成方法や個人的に悩んだところをまとめてみます。今回はiFrameを使ってFacebookページを自由にカスタマイズする方法を紹介します。Facebookページ自体はログインした状態で「Facebookページを作成」にアクセスすると作成することができます。今まではFB... 続きを読む