タグ

web制作に関するhalohalolinのブックマーク (356)

  • オシャレなサイトに使えそうな画像ズームが行えるjQueryプラグイン「Cloud Zoom」:phpspot開発日誌

    Professor Cloud オシャレなサイトに使えそうな画像ズームが行えるjQueryプラグイン「Cloud Zoom」。 写真にカーソルを合わせるだけで、次のようにカーソル部分がズームされ、こうしたUIが必要な場面において便利に使うことが出来そうです。 範囲外を反転させることも出来るみたい。 アパレルサイトとかで、細部を拡大してより商品をしってもらう、的なインタフェースが必要な際にサクッと実装出来てしまいますね。 関連エントリ GoogleMapみたいに画像をズーム&グリグリ移動できるjQueryプラグイン「Mapbox」 細部のズームアップ表現に使えるPhotoshopチュートリアル 画像を同一Window内でスムーズにズームしてくれるJSライブラリ色々

    halohalolin
    halohalolin 2010/05/26
    写真にカーソルを合わせるだけで、次のようにカーソル部分がズームされる。写真が命のサイトに使えそう
  • フォントサイズを変える「大・中・小」ボタンを実装する方法

    知り合いのデザイナーさんに、「大・中・小」のボタンでフォントサイズを変更する方法ってどうやるのですか?という質問をいただきました。 CSSJavaScript(場合によってはJSのみ)で簡単にできてしまうので、サンプルをご紹介しておきます。 フォントサイズを変える「大・中・小」ボタン実装 jQueryを使ってフォントサイズを変える「大・中・小」ボタンをサクサクっと実装してみようと思います。 まずは仕様を考えてみましょう。 仕様 ・大・中・小のボタンをクリックするとフォントサイズが変更される ・それぞれのボタンにIDをセットしておき、そのID名をもとにclassをセット ・CSSにあらかじめ各class用のフォントサイズを入れておく ・再度訪れたとき、クッキー情報があればそのサイズ、なければ中サイズを。 スタイルシートごと変更する方法もあるのですが、今回はCSSとclassでセットで対応し

    フォントサイズを変える「大・中・小」ボタンを実装する方法
    halohalolin
    halohalolin 2010/05/21
    jQueryを使ってフォントサイズを変える「大・中・小」ボタンをサクサクっと実装
  • IDEA * IDEA

    ドットインストール代表のライフハックブログ

    IDEA * IDEA
    halohalolin
    halohalolin 2010/05/21
    doctypeはどうしたらいいのか、IE6だけ読めるCSSを書くには、とか、透過PNGをどうするか、などがよくまとまっていますよ。IE6対応をしなくてはいけない人にとっては素晴らしく便利なのではないでしょうか。
  • GoogleがWebフォントサービスを開始 - フォントブログ

    Webフォントが一般に広まった全盛期には国内外含め様々なWebフォント配信サービスが登場しましたが、まさに戦国時代そのもので、数年後には多くのサービスが終了となってしまいました。 2023年現在、利用されているWebフォントサービスをまとめてみました。 Google Fonts 完全無料で誰でも利用可能ということもあり、現在一番利用されているGoogle Fonts。定番のNoto Sans以外にも、ZEN 角ゴシックやBIZ UDゴシックなど、プロ仕様の日フォントも使えます。デスクトップ用のフォントもダウンロード可。 Adobe Fonts Adobe Creative Cloud契約者なら誰でも使えるAdobeのフォントサービス。かつてはTypekitの名でサービス展開されていました。完全に日語化され昔に比べるととても使いやすくなりました。デスクトップ用のフォントもダウンロード可

    GoogleがWebフォントサービスを開始 - フォントブログ
    halohalolin
    halohalolin 2010/05/20
    Get the codeページにある、専用のCSSファイルを内に読み込みます。<link href=’http://fonts.googleapis.com/css?family=Droid+Sans‘ rel=’stylesheet’ type=’text/css’>
  • リアルタイムに入力チェック - jQuery Inline Form Validation Engine - | バシャログ。

    こんにちは、nakamura です。すっかり秋めいてきましたね。みなさんの今年の夏の思い出は何だったでしょうか。僕の思い出は叔父がやっている家庭菜園で膨大な量のきゅうりが取れてしまい、家のおかずが2週間ほどきゅうりづくしだった事でしょうか。自分、鈴虫かと思いました。 とあるプロジェクトで、入力フォームのバリデーションを javascript で実装したいという要件がありました。なおかつ最近よくみる submit ボタンを押さずともリアルタイムでエラーメッセージを表示してくれるおしゃれなアレです。そんな要件に添う為今回使ったのが Jquery Inline Form Validation Engine です。元々 sakai が見つけてきたものなのですが、仕組みも簡単で分かりやすく中々動作も軽快だったのでここでご紹介したいと思います。 ファイル構成 まずはスクリプトをダウンロードしましょう。

    リアルタイムに入力チェック - jQuery Inline Form Validation Engine - | バシャログ。
    halohalolin
    halohalolin 2010/04/27
    入力フォームのバリデーションを javascript で実装したいという要件がありました。なおかつ最近よくみる submit ボタンを押さずともリアルタイムでエラーメッセージを表示してくれるおしゃれなアレです。
  • dfltweb1.onamae.com – このドメインはお名前.comで取得されています。

    このドメインは お名前.com から取得されました。 お名前.com は GMOインターネットグループ(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込です。 ※サービス品質維持のため、一時的に対象となる料金へ一定割合の「サービス維持調整費」を加算させていただきます。 ※1 「国内シェア」は、ICANN(インターネットのドメイン名などの資源を管理する非営利団体)の公表数値をもとに集計。gTLDが集計の対象。 日のドメイン登録業者(レジストラ)(「ICANNがレジストラとして認定した企業」一覧(InterNIC提供)内に「Japan」の記載があるもの)を対象。 レジストラ「GMO Internet Group, Inc. d/b/a Onamae.com」のシェア値を集計。 2023年5月時点の調査。

    halohalolin
    halohalolin 2010/04/21
    jquery plug-in各種:グラフを作る/ファイルをアップロードする/フォームにうっすらテキストを表示する/日時の入力を軽減してくれる/並び替えをする
  • 少しのコードで実装可能な20のCSS小技集

    2019年5月17日 CSS CSSハックに続き、このCSS小技集も私のブックマークにずらりと並んでいたので、整理も兼ねて記事にしてみました。CSSのお勉強を始めたばかりの頃にブックマークしておいたものも多数。。ということで初心者さんからベテランさんまで参考にしてみてください! ↑私が10年以上利用している会計ソフト! コードはサンプル内の「HTML」や「CSS」タブをクリックしてくださいね! 少しのコードで実装可能なCSS小技集 シリーズ 【第2弾】少しのコードで実装可能な20のCSS小技集 【第3弾】少しのコードで実装可能な15のCSS小技集 まずはCSS基礎編 1. divを中央揃えにする ほとんどのサイトが基準となるdivを画面の中央揃えに設定しています。左右のmarginをautoにして中央揃えに。 See the Pen Center Div by Mana (@manabox

    少しのコードで実装可能な20のCSS小技集
    halohalolin
    halohalolin 2010/04/15
    divを中央揃えにする/divを横並びに/複数のクラスを指定/マージンやパディングのプロパティを短く指定/ボーダーの色を短く指定/フォントのプロパティを短く指定/リンクの点線を消去/画像リンクのラインを消去/透明度を変
  • 携帯サイトを作る時に役立ちそうな情報まとめ - かちびと.net

    Tips携帯サイト構築 どうもTwitterやってるとiPhoneAndroidなどのスマートフォンの 話題ばかりなので忘れそうですが、 携帯サイトはビジネスには必須 ですので備忘録として記事に。 ちょっと必要に迫られたのでメモ。 どうもTwitterやってるとiPhoneAndroidなどのスマートフォンの 話題ばかりなので忘れそうですが、 携帯サイトはビジネスには必須 ですので備忘録として記事に。 以前にも何度かまとめ記事が話題に上がっているので今更感も否めませんが自分のブログにあったほうが探しやすいのでメモします。 予備知識モバイルサイト構築前に知っておきたいユーザビリティ10のポイント ファーストビューの重要性、色の大事さ、リンク操作に関して記載されています。 モバイルサイト構築前に知っておきたいユーザビリティ10のポイント 携帯サイト(html)の制作に入る前に確認してお

    携帯サイトを作る時に役立ちそうな情報まとめ - かちびと.net
    halohalolin
    halohalolin 2010/04/15
    モバイルサイト構築前に知っておきたいユーザビリティ10のポイント/携帯サイト(html)の制作に入る前に確認しておきたいチェック項目/携帯サイトの作り方/モバゲーのような携帯サイトを作るための12のTips...
  • はてなブログ | 無料ブログを作成しよう

    来年も作りたい!ふきのとう料理を満喫した 2024年春の記録 春は自炊が楽しい季節 1年の中で最も自炊が楽しい季節は春だと思う。スーパーの棚にやわらかな色合いの野菜が並ぶと自然とこころが弾む。 中でもときめくのは山菜だ。早いと2月下旬ごろから並び始めるそれは、タラの芽、ふきのとうと続き、桜の頃にはうるい、ウド、こ…

    はてなブログ | 無料ブログを作成しよう
    halohalolin
    halohalolin 2010/04/12
    ファーストビューが大事/わかりやすいタイトル画像/マーキーで常連になりそうなユーザーの心を掴む/サイト説明は絵文字を混ぜて簡潔に/人気タグではなく人気ジャンル/シンプルにする/リリース前の投稿を充実させる
  • OpenLayersで地図を表示する | OSDN Magazine

    Google Mapsによって、ウェブサイトに簡単に地図を加えることができるが、GoogleAPIを使用している場合は、他のデータを表示する能力は限定される。自分自身のデータや、Google以外のデータを表示したい場合に、より多くのオプションを提供してくれるのが、オープンソースのJavaScriptライブラリ OpenLayers である。 OpenLayersは最近、いくつかの著名な活動において利用されている。Djangoの開発者であるAdrian Holovaty氏らが運営する地域的ニュースサイトEveryBlockにも使用され、また、Barack Obama次期大統領の選挙キャンペーンにおいても、その米国大統領選を支援するための地図情報の一環として使用された。 OpenLayersを最初に開発したのは、地理情報を扱う企業MetaCartaだが、現在ではBSDライセンスの下で公開され

    OpenLayersで地図を表示する | OSDN Magazine
    halohalolin
    halohalolin 2010/04/06
    OpenStreetMapにおけるマーカーの設定方法など
  • OpenLayers Marker Example - OpenStreetMap Wiki

    This article or section may contain out-of-date information: This page is based on the outdated and unmaintained OpenLayers 2. Consider switching to Leaflet or a later version of OpenLayers, and ignore this page. If you know about the current state of affairs, please help keep everyone informed by updating this information. (Discussion) This is a simple example of adding a marker to an OpenLayers

    halohalolin
    halohalolin 2010/04/05
    OpenStreetMapで表示される地図に日本語レイヤーを付加する方法、function init()内に、layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik"); map.addLayer(layerMapnik); を書き足す
  • やる夫が企業サイトのSEOに挑戦するようです αSEO

    1 :以下、名無しにかわりましてαSEOがお送りします:2010/04/01(木) 00:00:00.01 ___ /     \ /⌒   ⌒  \   今日から新しい会社に出社だお / (●)  ( ●)   \ これで3年間の無職生活からはおさらばだお! |    (__人__)      | \_  ` ⌒´    __/  やる夫を雇ってくれたのは水産物を売っている会社 /´:::/ヘ;;;/∨::\::::::::`ヽ  ここでやる夫はWebマスターとして働くんだお! i:::,::>:::i/;;;;i /:::::::く:::::::,::::::ヘ {:::i::ヽ::i;;;;;;;/:::::/::::::::i:::::::::} 2 :以下、名無しにかわりましてαSEOがお送りします:2010/04/01(木) 00:00:00.02 _____ /.::::::

    やる夫が企業サイトのSEOに挑戦するようです αSEO
    halohalolin
    halohalolin 2010/04/03
    SEO対策は誠実なホームページ作りが一番大事という良いまとめ
  • 近未来に頻繁に使われるであろうCSS3サンプル10:phpspot開発日誌

    10 examples of futuristic CSS3 techniques 近未来に頻繁に使われるであろうCSS3サンプルがまとまっていました。 ブログで以前に紹介したものも多いですが、まとまっていて便利そうだったのでご紹介。 吹き出しをCSSオンリーで実装 シャドウ&グラデーション付きの立体ボタン 枠付き写真をCSSで実装 ポラロイド写真風 角丸ファンシーなフォーム実装 立体的なドロップダウンメニュー MacOSのインタフェースをCSSで実装 近未来においては、こうしたものを組み合わせつつ更にJavaScript等とも組み合わさって今では信じられないインタフェースになっていそうな気がします。 1990年代後半の時代を振り返ってみると、あの当時当たり前だったサイトが一部のサイトで見られるものになるような、同じような状態になっているのかも。 関連エントリ CSS3等を使ったサンプル

    halohalolin
    halohalolin 2010/03/27
    吹き出しをCSSオンリーで実装/シャドウ&グラデーション付きの立体ボタン/枠付き写真をCSSで実装/ポラロイド写真風/角丸ファンシーなフォーム実装/立体的なドロップダウンメニュー/MacOS風インタフェースをCSSで実装/
  • これは新しい日付ピッカー実装用jQueryプラグイン「calendarPicker」:phpspot開発日誌

    BugsVoice - turn bugs into opportunities これは新しい日付ピッカー実装用jQueryプラグインのjQuery.calendarPickerが公開されています。 通常、日付ピッカーというとカレンダーを想像しますが、今回紹介するものは次のようなUIで、1週間が基となっています。 不要な日付を出来る限り非表示にすることで、分かりやすくなったりする場面もありそうです。 現在の日付は黄色の枠で表示されるようになってるみたいです。 オプションに値を与えることで、月、曜日の表示名カスタマイズをすることが出来るのでローカライズも容易ですね。 関連エントリ GoogleカレンダーみたいなカレンダーをjQueryで一瞬で作成できる「jquery-week-calendar」 jQueryを使ったカレンダー型、日付入力補完ライブラリ

    halohalolin
    halohalolin 2010/03/27
    不要な日付を出来る限り非表示にしたカレンダー、1週間が基本になっている
  • 【ハウツー】JavaScriptいらず、CSS3で作るシンプル&クールな多段メニュー (1) CSS3 Dropdown Menuとは | エンタープライズ | マイコミジャーナル

    JavaScriptを使わず、CSS3で作るクールな多段メニュー WebDesignerWallにおいてCSS3を利用した、MacOSのような多段メニュー(Mac-like multi-level dropdown menu)を作成する方法が公開された(マイコミジャーナルのニュース記事 - CSS3で綺麗なドロップダウンメニューを作る方法)。CSS3の新機能であるborder-radiusやbox-shadow, text-shadowを活用し、JavaScriptを使わずにクールな多段メニューを実現している。 CSS3 Dropdown Menu - CSS Codeより引用 CSS3 Dropdown MenuはFirefoxとSafari、そしてChromeで完璧にレンダリングされる。Internet Explorer 7以降のようなCSS3に対応していないWebブラウザでも動作する

    halohalolin
    halohalolin 2010/03/24
    CSS3の新機能であるborder-radiusやbox-shadow, text-shadowを活用し、JavaScriptを使わずにクールな多段メニューを実現している。CSS3 Dropdown Menu - CSS Codeより引用。CSS3 Dropdown MenuはFirefoxとSafari、そしてChromeで完璧にレンダリングされる。
  • フリーで使える商用可能な写真の効率的な5段階の探し方: 世界中の1%の人々へ

    "Yawning wolf" Photo Credit:Tambako the Jaguar パブリックドメインのライブラリで写真を探し回るのは時間の無駄。Wikimedia Commonsから探すといい! 3月26日に発売される『Movable Type 5実践テクニック』には、商用利用可能なテーマが3専用サイトからダウンロードできるようになっているのだけど、制作過程で一番苦労したのは、IAでもデザインでもなくて、コンテンツを埋めることと再配布可能な画像を探すことだった。 これたのテーマで利用した写真のほとんどはパブリックドメイン(Public Domain)の写真を使いましたが、かなりの時間を費やして写真を探した結果、パブリックドメインのライブラリを順番に探していくのはあまりにも非効率的であることに気づいた。まず多くの画像ライブラリはUIが酷すぎる。検索結果にサムネールがでないライブ

    halohalolin
    halohalolin 2010/03/22
    「Wikimedia Commons」でパブリックドメインの写真を探す/「stock.xchng」でクレジット記載不要の写真を探す/「FlickrのCreative Commons」からAttribution Licenseの画像を探す/「Creative Commons Search」から、Creative Commons Licenseの写真を探す...
  • MOONGIFT: » jQTouch用のjQuery拡張「jQExtensions」:オープンソースを毎日紹介

    jQExtensionsはjQuery/JavaScript製、iPhone/iPod Touch用のオープンソース・ソフトウェア。iPhone向けのWebサイトを開発する場合、いわゆる携帯サイトのように幾つかの特徴がある。とはいえPCのWebブラウザ並みの機能はあるので携帯電話ほどの制約はない。 フローティングウィンドウ ほとんどがデザイン的な特徴になる。既に幾つものデザインフレームワークが存在し、それらを上手に使うことで手早くiPhone向けサイトの開発が出来るようになっている。その一つとして知られるのがjQTouchであり、jQueryならではの拡張を行ったのがjQExtensionsだ。 jQExtensionsはjQTouch用の拡張を提供している。一つはフローティングウィンドウで、スライドさせても常に画面上部に表示される小窓機能だ。クリック一つで消したり、表示/非表示が切り替え

    MOONGIFT: » jQTouch用のjQuery拡張「jQExtensions」:オープンソースを毎日紹介
    halohalolin
    halohalolin 2010/03/10
    フローティングウィンドウで、スライドさせても常に画面上部に表示される小窓機能。クリック一つで消したり、表示/非表示が切り替えられる/よくある位置情報取得でライブラリとして提供される/オフライン対応。
  • Dynamic Drive DHTML Scripts- Ultimate Fade-in slideshow (v2.0)

    Note: March 7th, 16': Updated to v2.6.1 for miscellaneous bug fixes. Description: This is a robust, cross browser fade in slideshow script that incorporates some of your most requested features all rolled into one. Each instance of a fade in slideshow on the page is completely independent of the other, with support for different features selectively enabled for each slideshow. Here's a lowdown on

    halohalolin
    halohalolin 2010/03/04
    jQueryを利用したFlashがなくてもフェードインフェードアウトのスライドショーが実装出来るプラグイン
  • HTML ulをシームレスに入れ替えるQuicksand | エンタープライズ | マイコミジャーナル

    Reorder and filter items with a nice shuffling animation. Ajaxian ≫ Quicksand: transition and filtering effectにおいてjQueryプラグインのひとつjQuery Quicksand pluginが紹介されている。ul要素で用意したいくつかのリストをシームレスに入れ替えるためのプラグインで、スムーズなアニメーションを簡単に実装できる。 jQuery Quicksand pluginのトップページがQuicksandのサンプルにもなっており、上部にあるボタンを押すことでアイコンがスムーズに移動することを確認できる。下記の3つの図がそれぞれシームレスにアニメーションしながら入れ替わるように動作する。ソースコードを見るとアイコンはul要素で用意されており、それをQuicksand経由でアニ

    halohalolin
    halohalolin 2010/02/23
    アイコンメニューの切り替えに使える!シームレスなアニメーションでアイコンを変更させます
  • Adobe® BrowserLab

    Adobe BrowserLab requires Adobe Flash Player version 10.0.0 or higher and Javascript enabled in your browser. Click the button below to download and install the latest version of Flash Player now Adobe BrowserLab An easier, faster solution for cross-browser testing Preview and test your webpages on leading browsers and operating systems - on demand. Adobe BrowserLab makes it easier and faster t

    halohalolin
    halohalolin 2010/02/13
    IE/Safari/Firefox/Chromeでのブラウザ表示結果を比較できるWebサービス