レスポンシブデザインを制作する際に「Media Queries（メディアクエリ）」を使用してCSSの表示を切り替えますが、IE8以下ではこの「Media Queries」に標準対応していません。そこで「css3-mediaqueries.js」等を読み込むことで対応させたりしますが、それでもこのMedia Queriesが効かないということがあります。そこで、確実にMedia Queriesを使ってcssを読み込む方法をまとめておきます。 Media Queriesを使用してcssを読み込む3つの方法 まずは、Media Queriesを利用してCSSを切り替える際の方法には3つあります。 (1).Linkタグのmedia属性で指定する <link rel="stylesheet" media="screen and (min-device-width: 781px)" href="pc.

トルコ水紀行　－前編 イスタンブール－ みなさんこんばんは、地図子です！8月は久しぶりに毎月更新にしようと思います。今までずっと名古屋について書いてきましたが、ワープして・・・ トルコについて書きたいと思います。 2024年6月に念願のトルコに行ってきました。いつからトルコに行きたかったかわから…

半年ほど前にここで、「jQueryでブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験」と題して、画面幅めいっぱいでのコンテンツスライダーを紹介しましたが、当時紹介したスクリプト構成だとレスポンシブには対応していませんでした。 同じ、画面幅めいっぱいでのコンテンツスライダー構成でレスポンシブ対応させたパターンを必要に駆られて作成してみたので、ここでも紹介してみたいと思います。 【2014/01/15】 スライダー部分にフリック動作を追加しました。スクリプト内の設定でフリック動作のON／OFFを設定が可能です。 このスライダーはなかなか言葉では説明しずらいのでまず動作サンプルから。 「jQueryでレスポンシブ対応のブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験」サンプルを別枠で表示 スライダー中心にメイン表示エリアを設置して、その

RailsアプリのUIデザイン〜コーディングするにあたり、 今回はじめてphotoshopとsass,compassを使用しました。 Web(UI)デザインの作成を、Fireworksからphotoshopにのりかえた。 - 記すに足らず。 はじめてSass(Compass)を使ってみた＆CSS設計について初めて考えてみた(SMACSS)時の感想 - 記すに足らず。 そのときにやってみた Photoshopのデータから画像切り出し→coｍpass(-rails)でcssスプライト用画像を作成する方法のまとめ。 photoshopの画像をスライス photoshopから画像を切り出す際、CCから追加された 「画像アセット」 という機能を使うと便利です。 画像アセットとは？ レイヤーに決められた名前を付けるだけで、 勝手に画像として切り出してくれます。 〜参考にさせていただきました！〜 使い方

こんにちは。LIGフィリピン支社代表のせいとです。 全く関係ない話ですが、ポケットモンスター X・Yが発売されたそうですね。「金・銀、ブラック・ホワイトときたら、次はパステルカラー辺りが来るはずや！間違いない！」と思っていた僕の予想はまんまと外れました。まあそれはいいとして、 今回はSassについてちょっと語らせていただきます。Sassというと、「効率、コーディングスピードが超上がるらしい」とか、「LINE株式会社、株式会社DeNAとかも採用してるらしい」という話を聞きます。僕もSassについては勉強しているんですが、当初はわかりにくい部分もありました。 それは「そもそもSassが何なのかよくわからない。プログラミング言語？？」ってことと、「インストールが上手くいかない！コマンドプロンプト使い方わからない！Dreamweaver（以下DW）動かない！GUIソフトってなに！？」ってことです。

動画を準備する シネマグラフの完成度は動画のできにかかっています。主な条件は以下の3つです。 ネマグラフがうまくできる条件 1. カメラが固定されていること シャッターを押すちょっとしたブレでもつなげると気になったりするので、三脚＆リモートシャッターなんかがあるといいと思います。 2. ループの繋ぎ目が気になりにくい動きであること 髪の毛のふわふわとか水がチョロチョロ流れる動きなど、動きが単純で短い時間でも成立するものが向いています。しかしこういった動きはすでによく使われていて、マンネリなのも事実ですね……。アイデアをひねり出すのが一番大変な作業かもしれません。 3. 動いてる部分の背景に動きがないこと 後で詳しく説明しますが、動画の上に静止画を置いて、動かしたい部分に穴を空けるというのがおおまかな手法なので、動かしたい部分以外にちょっとでも変化があると違和感が生まれます。 以上の点を踏ま

サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。

floatを使った際の表示の崩れを正すためによく使われるclearfixですが、それを使わずともfloatを簡単に解除する方法をご紹介します。 HTML

久々の投稿；； CSSの覚え書きー！ リンクつけたいからaタグ使うけど、ブロック要素全体にリンクをつけたいときはどうするか？？ div要素をaタグで囲むのはだめっ aタグはインライン要素だから中にブロック要素は書けない… そんなときは、CSSでできるというのを今更知った～ http://d.hatena.ne.jp/atu_web/20120412/1334250031 ここを参考にさせていただきましたー！ ググったらこのやり方は結構でてきましたね、常識でしたか……知らなかった…；； a要素をブロック要素にする a要素をdivと重ねるために、divを相対配置、a要素を絶対配置でdivが基準になるように位置を指定 IE7とかIE8に対応させるなら、背景を指定しないとリンクにならないので適当にカラーを指定して透明にする してやるんですね～へぇ～ やってみた HTML <div id ="lin

仕事が深夜に及び、このタイミングでメールを送ると先方に迷惑かも……。仕事をしていて、こんな状況に陥った経験はないだろうか。誰しもが使っているメールだが、マナーに対する考え方は人それぞれ。「念のため、少し時間帯をずらして送信しておこうか」と迷った際に活用したいのが『Right inbox for Gmail』だ。このChrome拡張機能を使って、予約送信しよう。

スマートフォンの普及で、レスポンシブデザイン、スマホファーストが推奨されつつある中、今までどおりにテキストにリンク指定するだけでは、ユーザビリティを損ねてしまう場合があります。 例えばECサイトの検索結果一覧に表示される、画像とタイトル(テキスト)だけでなく、商品BOX(画像、タイトルが含まれる)全ての範囲にaタグ(リンク)を適用するCSSの書き方を記述します。 ※本文中にサンプルとして掲載しているBOXは全て、レスポンシブデザイン対応しているので、PCでご覧の方はブラウンザの幅を小さくしたり大きくしたりすることで、BOXにの伸縮を確認できます。 PR .link_box{ position:relative; width:30%; padding:5%; border:solid 1px #CCC; margin:0px auto 20px; } .link_box a{ positio

こんにちは、メディア事業部のエリーです。 3年目の浮気、石の上にも3年と言いますが、ブログで言うと“3ヶ月”がターニングポイントになるんじゃないかと、わたしは思っています。 ブログを書くのにも慣れ、だんだんアクセスが増えてきたころ、「意外に読まれてるなあ」と思うと同時に、「そんなに一気には読まれないんだなあ」と現実にショックを受けるのではないでしょうか。 ということで、今回は、WordPress専用超高速サーバー「Z.com byGMO」さんに、3ヶ月目を迎えたブロガーが抱えるありがちな悩みと、それを解決するプラグインをお聞きしました。 3ヶ月目には入れておきたいプラグイン12選 WordPressでブログを始めたものの、プラグインをそこまで使いこなせてないし、「どれが良いのか分からない！」という人におすすめな12選です。 目次 スパムコメントやトラックバックを防ぐ「Akismet」 セキ

ミッション！ ではさっそく、今回のミッションを発表します。 こちらの写真を・・・ こちらの写真に変えるのです！ そもそもAdobe Photoshop Lightroomとは？ 「Photoshop」という単語が入っているけど、「Photoshop」とはどういう関係なの？と、Lightroomが初耳の方なら誰もが首を傾げるでしょう。 公式サイトの文言を見てみましょう。 Lightroom とは何ですか？また、どのような人を対象としていますか？ Adobe Lightroom は、初心者からプロフェッショナルまで、あらゆるレベルのユーザーが写真に必要なすべてのツールを搭載しています。Lightroom は、コンピューター、Web、iPad、モバイルデバイスなど、どこにいても写真を整理、編集、共有できます。お気に入りの写真を編集したり、フラグ付け等の作業をしても、他のデバイスにも全ての編集作業