Tailwind.cssとAlpine.jsで作られた161ものUIやレイアウトを無償公開している・「Windstatic」

2023/03/05 107 users Tailwind.css CTA Alpine.js 無償

Windstatic WindstaticはTailwind.cssとAlpine.jsで作られた161ものUIやレイアウトを無償公開しているWebサイトです。 UI、というかセクション単位でカテゴライズされていて、ヒーローイメージのブロック、特徴を紹介するブロック、フッター、CTAや値段表などに分けられ、それぞれにいくつかのレイアウトを用意、コード... 続きを読む

便利すぎるPhotoshopのプラグイン30選｜ferret [フェレット]

2015/05/19 579 users Ferret フェレット extensions ヘッダ

便利すぎるPhotoshopのプラグイン30選 1.Velositey http://dandkagency.com/extensions/velositey わずか数回のクリックであっという間にホームページのレイアウトを作るプラグインです。 ヘッダからコンテンツ、フッターなどがそれぞれ10種類以上収録されており、Photoshopを起動後4回選択すればレイアウトが完成します。 ワイヤーフレームを... 続きを読む

更新するのが面倒！サイトの共通部分を簡単に作る様々な方法｜WEB Drawer

2014/08/26 113 users WEB Drawer 共通部分 テンプレー 方法 アッと言う間

サイトにはヘッダーやフッター、ナビゲーション部分など全ページに共通して入る要素があります。 この部分を修正する時はHTMLを全ページ修正するととても手間がかかって大変です。自分のサイトはだいたいCMSで管理しているのでテンプレートを直せばあっと言う間なのですが、それ以外の場合の共通部分を簡単に治す方法を改めて調べてみました。 がんばって直に書いてるものを置換する Dreamweaverのテンプレー... 続きを読む

初心者でも分かる！な、jQueryの「TOPへ戻るボタン」の作り方

2014/06/20 342 users jQuery Sat 右下 Web制作 TOP

初心者でも分かる！な、jQueryの「TOPへ戻るボタン」の作り方 2014.06.21(Sat) 07:30 WEB制作 画面を下にスクロールすると右下にスーっと出てくるページトップへの移動ボタン。ブログなんかではお馴染みで、あれってとても便利ですよね。今回はこの「TOPへ戻るボタンの作成方法」を、Javascript初心者でも理解できるように解説したいと思います。 あなたのボタン、フッターのテ... 続きを読む

各種パーツごとにWebデザインを色々見たい人の為のまとめサービス色々｜レスポンシブ・ヘッダー・フッター・サイドバー・ロゴ等 | Flips Blog Web担の小技

2013/12/20 108 users レスポンシブ ヘッダー Web担 ロゴ Flips Blog

今回は、WebデザインのインスピレーションをまとめたWebサイトをご紹介。 ２０１２年から、結構色々なところで紹介されている有名ドコロではありますが、それぞれ、特徴的な部分をもったサイトのみをピックアップ致します。是非デザインに迷ったら参考にしてみてくださいね。 レスポンシブWebデザインのまとめサービス http://responsive-jp.com/ レスポンシブWebデザインがまとまってい... 続きを読む

Webデザインをパーツ別に参照できるギャラリーサイトまとめ | 株式会社LIG

2013/03/18 216 users 株式会社LIG パーツ別 webデザイン ハルエ まるこ

こんにちは。マルコ大好き(ONE PIECE)、デザイナーのハルエです。 このマルコへの熱い想いをLIG社員数名に伝えてみましたが、センスのないリアクションしか返ってきませんでした。 マルコのかっこ良さが分からないとは。世も末やわ。 それでは始めるよい。 今回はWebデザインを各パーツごとに掲載しているギャラリーサイトを紹介させていただきます。 ヘッダー、フッター、ボタン、フォームなど、パーツデザ... 続きを読む

[WordPress]これでフッターに重ならない！ ブログのサイドメニューを固定してスクロールに追従させる方法 | NANOKAMO BLOG

2012/12/24 128 users photo credit kuroji1987 ランダム

photo credit: Eric M Martin via photopin cc どうも@kuroji1987です。 ブログのサイドメニューに、スクロールに追従するメニューを設置いたしました。「オススメ記事」というタイトルで、同じカテゴリの記事をランダムで表示させています。 広告を表示させることもできるのですが、Googleの規約で禁止されているという話なのでやってません。結構やっているブロ... 続きを読む

Twitter Bootstrapで使える便利なスニペットをまとめた『Boot snipp』 | IDEA*IDEA

2012/09/14 235 users IDEA Bootstrap スニペット コントロール ブログ

Twitter Bootstrapで使えるスニペットをまとめたサイトですな。ブログのフッターとか、音楽プレイヤーのコントロールとかいろいろ揃っていて便利そう。 ↑ まだ数は少ないですが。 ↑ こういうのとかですな。 ↑ コピペするだけなので楽々。 わりといいかもですね。 » Gallery of free HTML snippets for Twitter Bootstrap. | Bootsni... 続きを読む

あなたが作ったサイトのフッターの役割は？12のフッター活用方法！

2012/06/21 639 users クリエイター フッターデザイン すごいクオリティー 関心 役割

昔はさっぱり注目されていなかったフッターエリアですが、今では多くのクリエイターがフッターに関心を持つようになりました。フッターデザインだけを集めたサイトなんて過去にほとんどありませんでしたが、ここ2、3年でいくつもそういったサイト・ページを見るようになりました。また特に海外サイトで言えることですが、最近では「これがフッターなのか！」と思う、すごいクオリティーのフッターも見る機会が多くなりました。 ... 続きを読む

あの『Codecademy』が日本語化され始めたようです！ | IDEA*IDEA

2012/06/19 105 users Codecademy IDEA ブログ おぉ 言語

おぉ、すごい。インタラクティブにコードを学べるCodecademyが日本語に対応しつつあります。 ↑ これでぐっとわかりやすくなりましたね。 ↑ ただトップページ以外はまだ英語のままですな。 ↑ フッターを見ると他言語も・・・。「ぷログ」ってなんだｗ。 ちょっといじってみましたが、わりとこなれた日本語でいいのではないでしょうか。これからどんどん翻訳されていくのかな。ご興味のある方は以下からどうぞ。... 続きを読む

パーツ別のWEBデザインギャラリー8選 | designaholic -Creative Column-

2011/11/10 108 users ヘッダー Webデザインギャラリー パーツ別 ナビゲーション

ヘッダー、フッターから見出し、ナビゲーションといったパーツにフォーカスしたWEBデザインギャラリーのまとめです。 見出しデザイン.com フッターデザイン.com ブブンデザインアーカイブ Patternry Pattern Tap MephoBox Footer Fetish Elements of Design やっぱりデザインは細かい部分の作り込みが全体のクオリティに影響してきますので、ちょ... 続きを読む

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

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

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

ヘッダーやナビゲーション等、Webデザインをパーツ別に収集しているギャラリーサイトまとめ - かちびと.net

2011/01/25 660 users ヘッダー ナビゲーション ブブンデザインアーカイブ net

いくつか知っておいた方が、必要な時に 探しやすいと思ってメモします。Webサイト のデザインをヘッダーやフッターなど、 パーツ別に収集しているギャラリーサイトが いくつかあるのでまとめます。 そんな大量に有るわけではないですけど。パーツのデザインはいつも迷うのでこの手のギャラリーはいくつあっても結構重宝しますよね。 ブブンデザインアーカイブ 国内でおそらく唯一のパーツ別デザインギャラリーです。ナビ... 続きを読む

フッターデザイン.com

2010/11/30 995 users フッターデザイン com about ロゴ 見出しデザイン

いろんなサイトのフッターを集めたリンク集カテゴリ 一覧 イラスト カラムメニュー ページトップへ戻る ロゴ 横並びメニュー 横並び＆カラムメニュー リンク 見出しデザイン.com ウェブコレクション！ 生活に役立つ・面白いそんなサイトを集めたリンク集。 about いろんなWEBサイトのフッター部分（ページ下部も含んでいます）を集めました。 デザインの参考にどうぞ。 主に日本国内のものを選んでいま... 続きを読む

Webサイトのフッター２００個とフッターデザインの考え*ホームページを作る人のネタ帳

2010/07/18 391 users フッターデザイン ネタ帳 ホームページ Webサイト 美学

フッターの美学。 そんな素敵サイトを紹介しようといくつかチョイスしていたら海外ブログのDWSが「The 200 best footers on the web」なんていう化け物エントリーをさらっと出してきたもんだから驚きだ。 しかもクオリティもめちゃ高い。 なので今回はこのエントリーを紹介して終わろうかなって・・・。 参考までにネタ帳が好きなフッターを７つほど紹介します。 たま、フッターまとめサイ... 続きを読む

ページのフッターに常に便利リンクを固定で表示するためのjQueryプラグイン「jQuery Fubar」:phpspot開発日誌

2010/02/26 221 users jQueryプラグイン phpspot開発日誌 ブッダ 固定

ページのフッターに常に便利リンクを固定で表示するためのjQueryプラグイン「jQuery Fubar」 2010年02月26日- jQuery Fubar ? How To Create A Website Toolbar From Scratch And Add Widgets To It | AddyOsmani.com | Where Web Businesses Grow ページのフッタ... 続きを読む

フッターやヘッダー、ナビゲーションなど、パーツ別のデザイン例のまとめ - かちびと.net

2010/02/17 548 users 備忘録 ヘッダー いとこ ナビゲーション インパクト

ヘッダーだけ、フッターだけみたい、 というように、部分的にデザインの 例を見たいことが多いのでそんな 記事をまとめました。まとめのまとめ です。少し重いかもしれません。 主にブログデザインになってしまいますが、ヘッダー、フッター、ナビゲーション、フォームデザインなどなど部分的なデザインを参考にしたいとこに役立つまとめ記事を備忘録としてまとめています。 ヘッダーデザイン ユーザーにインパクトを与える... 続きを読む

【海外事例に学ぶ】 リッチ化するフッター (ユーザビリティ実践メモ)

2009/06/22 197 users magazine ユーザビリティ実践メモ 動向 サンプル 海外

これまで当サイトでも、いくつかの記事でフッターについて扱ってきました。最近、海外のサイトを見ていると、フッターについて新しい取り組みが見られます。 今回は、海外サイトの動向をサンプルとし、フッターにおける新たな取り組みのメリットをご紹介します。 Geek Trends: 15 Footers with great usability ( pop upon magazine ) 6 Things T... 続きを読む

フッターの背景をコンテンツが少ない時でも下まで表示させる｜CSS HappyLife

2008/06/30 296 users CSS HappyLife 背景 コンテンツ 少ない時 無理

デジパのベトナムオフィシャルサイトがオープンしました。 さて、今回はこのデジパベトナムを組むのに辺り、最初は無理（もしくは相当厄介）だと思ってたことが思ったよりカンタンに出来たのでご紹介。 Movable Type 4のデフォルトテンプレートもそうですが、コンテンツの内容が少ない場合に、フッター部分は当然上に来てしまい、下がbodyに指定している背景色になってしまいます。 キャプチャみたいな感じで... 続きを読む

それなりに使い勝手が良さそうなヘッダーのサンプル4種｜CSS HappyLife

2008/01/21 469 users ヘッダー CSS HappyLife 予感 下書き状態 沢山

17日から下書き状態だったエントリー、、、沢山用意する予定だったけど色んな都合で増えない予感なんで公開。 ずいぶん昔にフッターの区切りっぽいサンプルを作ったけど、ヘッダーは作ってなかったので、ヘッダーのサンプルを作ってみましたよっと。 というか、ヘッダーのサンプルって見かけたことがほっとんど有りません。（必要とされてないから？ ヘッダーって作るの大変というか、厄介だったりしませんかね。 全部画像な... 続きを読む

footerをウィンドウ下部に固定する『footerFixed.js』[to-R]

2007/11/15 288 users footer レンタルサーバー JSライブラリ to-R

footerをウィンドウ下部に固定する『footerFixed.js』 【PR】初心者でも安心なレンタルサーバー。２６３円から使えます。 【PR】HP登録でSEO対策！アクセスアップにコチラ！ footer部分を画面下部に固定するためのjsライブラリ『footerFixed.js』を作成しました。 フッターをコンテンツの内容量にかかわらずwindow下部に表示さすためのjsラブラリになります。 サ... 続きを読む

本文の下のほうをFade Outしてフッターを際立たせる方法 | S i M P L E * S i M P L E

2007/05/09 105 users 本文 L E AM written S i M P 皆さん

本文の下のほうをFade Outしてフッターを際立たせる方法 May 9, 2007 8:08 AM written by 8maki fortuitousというブログには、ちょっと楽しい小細工が。 本文の下のほうに行くと文字や画像がFade Outしていきます。フッターのメニューがうかびあがってくるように見えてユニークです。 ちょっと実現方法がユニークなので皆さんも考えてみてください。 実はこれ... 続きを読む

フッターが素晴らしい19サイトを参考に足もとを見直そう | Web担当者Forum

2007/04/18 353 users SEOmoz Web担当者Forum SEO ナビゲーション

[海外情報] SEOmoz 検索マーケティングのニュース＆テクニック SEOmozは、Search Engine Journalで2006年のベストSEOブログに選ばれた、SEOを中心とした検索マーケティング情報のブログ。日々更新される良質なSEOmozの考え方やノウハウの情報から、厳選したコンテンツを日本語でお届けします。 通常、フッターには基本的なナビゲーションを繰り返して用い、著作権情報やプ... 続きを読む

フッターとかの区切り『｜』のサンプル4種｜CSS HappyLife

2007/02/21 346 users CSS HappyLife CSS 未対応

Track Back URI Track Back [1] Re: フッターとかの区切り『 | 』のサンプル4種 こういうのをCSSでやると、私は「:before擬似要素使いてぇ。（未対応の）IE6うぜー」と思ってしまうのですが、border-leftプロパチを使って... by Liner Note｜2007年02月22日（木） 続きを読む

TRANS [hatena] - 印刷用CSSをまとめてみた。

2006/12/08 804 users trans Hatena secondary primary

以前、絵文禄のことのはさんのところで、サイトの横幅を640ピクセルにする理由――統計と現状に基づく結論というエントリーがあった。それから、ちょっと印刷用CSSに興味を持って、色々と調べてみたり、自分で書いてみたりした。そのまとめ。 ちなみに、#naviがグローバルナビゲーション、#primaryがメインコンテンツ、#secondaryがサブメニュー、#footerがフッター。 とりあえず、最低限や... 続きを読む