超問題がある
有限会社タグパンダ 喜安 亮介 2009/12/16 Webブラウザごとのレンダリングエンジンの違いにより起こるレイアウトの表示ずれ問題に泣かされるWebデザイナのために、Webブラウザごとに使えるかどうかの表を交えながら問題を解決するためのCSSハック&フィルタTipsをお届けします(編集部) モダンブラウザとMac OS XのIE 5でも使えるCSSハック 前回の「IE 6とIE 7のためのCSSハック16選」では、IE 6とIE 7のためのCSSハックのテクニックを紹介しましたが、今回は、モダンブラウザでも使えるCSSハックのテクニックを下記に分けて紹介します。 IE 6/7/8をハック(IE 6とIE 7、IE 8に効く、もしくはIE 6とIE 7とIE 8に効かないハック) IE 6とIE 7、IE 8に効くハック コンディショナルコメント ユーザーエージェントハック IE 6と
早速ですが作ったものの動画 というわけでこんな感じの物を作ってみました。 実際のサンプルはこちら 概要と対応ブラウザ 概要みたいなもの タブにカーソルを合わせると少し光り、クリックすると中身がフェードインして切り替わります。 このサンプルで表現されているアニメーションやグラデーション、影や角丸などはすべてCSS3です。 JavascriptOFFでも同じ挙動になりますよ。 動作環境 Chrome4とSafari4での動作確認はしてあります。 Firefox3.5以上でもそれなりに動きますがアニメーションは動きません。 Firefox3.6↑だとグラデーションも有効になるように記述してあります。 詳細と実物は続きから。 ソースの説明 HTML(HTML5) 一応HTML5で書いてありますが、お好きにDivなどに変えても動きますのでそこら辺は厳密には書いていません。 使いたい状況で
Googleの検索結果のように、長いリスト項目を複数のページに分割して表示することを「ページング」(Paging)と言います。ページング処理では下部にナビゲーションリンクを配置し、クリックされた番号のページを表示しますが、ページ全体をリロードして切り替えるには時間がかかります。そこで今回は、スムーズにページングさせるためにAjaxを利用して更新が必要な部分のみを外部ファイルから読み込んで書き換え、ユーザーのストレスを軽減する方法を紹介しましょう。 データのHTMLを用意する 今回は、数が多い商品情報のリストを複数のページに分割して表示するサンプルを作成します。はじめにAjaxで読み込むコンテンツデータを用意します。Ajaxは、XMLやJSON(JavaScript Object Notation)、テキストなどさまざまデータを扱えますが、今回はもっとも手軽なHTMLを使いましょう。コンテン
Googleは、かねてからアナウンスしていたように、ドメインをまたぐrel=”canonical”タグのサポートを開始したことを公式アナウンスしました。 ※ rel=”canonical”タグって何?、何のために使うの? という読者さんは、まずこちらからお読みください。 「重複コンテンツ・重複URL」のおさらい rel=”canonical”の正規化で、重複コンテンツを撃退 Google, Matt Cuttsによるrel=”canonical”タグの解説ビデオ もともと、rel=”canonical”タグは、同一ドメインまたはサブドメインの中だけで有効でした。 ”www.example.com”と”example.com”を正規化することはできましたが、 ”www.example.com”と”www.example123.com”を正規化することは、できなかったのです。 301リダイレク
When I started this blog, way back in 2006, I had no clue how long it would last. I actually had no idea I could even write about something for more than a couple of days. It is funny how things go. Once I read in a book that the secret of happiness was low expectations. That explains why, for over a decade, I have been running this site. It also explains why you might end up on this page. Not los
週刊Webテク通信 2009年12月第2週号1位は、ミニマルなWebレイアウトを作るために必要なこと、気になるネタは、絶対に覚えたい iPhone+Google音声検索・10の技 ネットで見かけたWebテク(Webテクニック・Webテクノロジー)記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2009年12月7日~12月13日の間に見つけた記事のベスト5です。 1. How to project a minimalist layout? attention to the details | Your Inspiration Webhttp://www.yourinspirationweb.com/en/how-to-project-a-minimalist-layout-attention-to-the-details/ ミニマルなWebレイアウトを作るた
often find unexpected finds among the things they leave behind. Used to warn against rushing ahead
One Ping Pingback: 12 Excellent CSS3 Button and Menu Techniques | Tutorials 61 Comments Great list. Wish I would have seen it earlier. Needed the help. Oh well. I’m happy with what I ended up with. Thanks for the inspiration list. I like the list, well mainly because it contains some pretty examples. But my question is: do these pretty buttons really want to make you click them? Do you have test d
Home » Articles » 25+ Best Ecommerce Website Designs for Inspiration (2024) 25+ Best Ecommerce Website Designs for Inspiration (2024) The list of top 50 ecommerce website designs in 2024 If you subscribe to a service from a link on this page, Reeves and Sons Limited may earn a commission. See our ethics statement. For any business that wants to sell online, having a well-designed website is vitall
The homepage of a design or creative agency website is often the first point of contact between the agency and potential clients, making it a critical element in establishing a strong online presence. A well-designed agency homepage should convey the agency’s style and approach, showcase its expertise and experience, and provide a clear path for users to navigate to other sections of the site. Des
When I started this blog, way back in 2006, I had no clue how long it would last. I actually had no idea I could even write about something for more than a couple of days. It is funny how things go. Once I read in a book that the secret of happiness was low expectations. That explains why, for over a decade, I have been running this site. It also explains why you might end up on this page. Not los
エビバデ・デザイナー。デザインはみんなのもの。いつでも、どこでも、みんながデザインしています。あなたもデザイン科、はじめませんか。デザインが特別なものにみえていたのは、学べる場、学べる機会がなかっただけ。京都造形芸術大学 通信教育部 デザイン科なら、デザインに関わりのない方でも、お仕事されている方でも、どんな年代の方でも、どこにお住まいの方でも、デザインを学び始めることができます。EVERYBODY DESIGNER 京都造形芸術大学 通信教育部 デザイン科 2010年度学生募集 エビバデ・デザイナー。デザインはみんなのもの。 いつでも、どこでも、みんながデザインしています。 あなたもデザイン科、はじめませんか。 デザインが特別なものにみえていたのは、学べる場、学べる機会がなかっただけ。 京都造形芸術大学 通信教育部 デザイン科なら、 デザインに関わりのない方でも、 お仕事され
Yahoo! 検索で『大学』と検索してみてほしい。1ページ目には、大学公式サイトのほか、title 要素に「大学」を含み、大量の外部リンクを集めた一部の情報サイトが表示されている。その中で、ある不思議なページが上位表示され続けている。 長期間5位以内に表示され続けているのは、ある予備校のサイトの大学入試情報ページである。このページは title 要素に「大学」を含んでいないなど、本格的な SEO は行われていないと推測される。 2009年11月22日現在、上位30位までの間で title 要素に「大学」を含まないサイトはこのサイトだけである。そしてこのサイトは、弊社の記録では2年以上前から5位以内を維持しているのである。 Yahoo! 検索では、公式サイトが上位表示されやすい傾向がある。「大学」という検索でも膨大な数の大学公式サイトが並んでおり、大学の公式サイト以外を上位表示させるのは容易
商用可!psdでダウンロードできるWEBデザインリソース「10 Free Excellent Website Designs with PSD Source」 WEBを制作する際、コーディングに入る前に、PSDでモックアップを制作すると言う方は多いかと思いますが、今回紹介するのはそのモックアップをPSD形式でダウンロードできるリソースを集めたエントリー「10 Free Excellent Website Designs with PSD Source」です。 Download Source 様々なクオリティの高い、PSDで使えるWEBデザインリソースが公開されています。今日はその中からいくつかきになったものを紹介したいと思います。 詳しくは以下 ■Dzinepress House – Download Source シンプルで美しい、WEBサイト様々な業種や用途で使えそうな、汎用性の高いW
jQueryでアニメーション機能を実装する際に使用する「.animate()」のスタディをCSS-Tricksから紹介します。 Fully Executing jQuery Animations Without Queuing demo デモでは、マウスのホバーをトリガーにアニメーションが始まり、そのアニメーションを止める際に「.stop()」または同様の機能をもつものをそれぞれ比較しています。 ゴールは、三つに並んだバーがそれぞれ期待通りによりスムーズに動くことです。 最もスムーズに動作するのは、デモページの下にあるグリーンのデモで下記のように記述しています。 JavaScript <textarea name="code" class="js" cols="60" rows="5"> $("#animate-test div").hover(function(){ $(this).fi
『コリス』 の新着エントリー - はてなブックマーク 上記キャプチャのように同じ記事がばらばらになってしまっているので、それを一つにまとめます。 ブックマークが分散する原因 FeedBunner経由でアクセスすると、URLの末尾に「?utm_source(以下略)」という文字列が付加されます。 で、これをブックマークすると、期待しているURLとは異なるURLにブックマークされてしまいます。 これを解決するために、FeedBunner経由でアクセスした際にも期待しているURLにアクセスするようにします。 参考にしたのは、下記ページです。 同じエントリへのはてブがバラバラに付く 当サイトも上記ページと同様にWordPressを使用しているため、同様の対処方法をとりました。 ただし、URLが異なるため、下記のように「.htaccess」に記述しました。 <textarea name="code"
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く