hopekusonのブックマーク / 2014年2月17日

hopekuson id:hopekuson

2014年2月17日のブックマーク (6件)

何かと役立つCSSの技 || Cool Web Window
404 Not Found お探しのファイルは見つからないようです。お手数ですが、下記リンクからトップページへお戻りください。 CoolWebWindow Copyright (C) Cool Web Window All Rights Reserved
hopekuson 2014/02/17
floatがらみの仕様
リンク
[CSS]ウインドウサイズに合わせて画像を拡大縮小する方法 | アイスケット | 神奈川県相模原市ホームページ制作、SEO対策、運用なら
サイトに画像を表示した時に、画像サイズが大きかったりするとウインドウからはみ出て表示されてしまいます。最近流行りのレスポンシブデザイン(1つのサイトが大きな画面でも小さな画面でもキレイに配置されるのでスマホ用に作りなおさなくても良いデザイン)でも、ウインドウ幅に合わせて画像が拡大縮小する手法はよく用いられています。今回は画像をウインドウ幅に合わせて拡大、縮小する方法をご紹介します。通常のimgタグで画像を貼り付けた場合ウインドウ幅が十分ある場合は画像は全て表示されています。ウインドウ幅を狭くすると、画像がはみ出てしまっています。スタイルシートにたった2行書くだけで解決この画像がはみ出てしまうのを解決するためにはスタイルシートを使います。スタイルシートに以下のように追加してください。これで縦横比を保持したまま、画像がウインドウ幅に合わせて自動的に拡大縮小します。拡大に関しては
hopekuson 2014/02/17
リンク
Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き
今回このブログ - Webデザインレシピを、iPhone などでも見れるようにリデザインしました。使用したのは CSS3 の Media Queries（メディアクエリ）。メディアクエリの使い方や感想、気をつけたい注意書きをまとめてみました！遅ればせながらこのブログ – Webデザインレシピを、スマートフォンでも見れるように改修しました。このブログは WordPress で書いているので、スマートフォンや iPad への対応方法はいくつもあるのですが、今回は CSS3 の Media Queries（メディアクエリ）を使って、iPad、iPhone など、いろんなデバイスに対応（対応というか、一応見れる程度）にしてみました。なので Media Queries を使ったスマートフォン対応と、リデザインしながら思ったことなどをまとめてみました。 CSS3 Media Queries 目次
hopekuson 2014/02/17
リンク
採用情報 | 楽天グループ株式会社
楽天グループ株式会社の採用情報。中途採用、新卒採用に関する情報をご紹介しています。
hopekuson 2014/02/17
「殺伐とした楽天にUXが！」
リンク
Gruntを使ってSass(SCSS) / Compassをコンパイルしてみる | MONSTER DIVE
今回は、Gruntを使ってSassをコンパイルしてみます。Gruntのインストールについては、こちらの記事で紹介してくれてるのこちらをご覧ください。Sassの記法には、SCSS記法とSASS記法の2種類がありますが、今回はSCSS記法のみ対応になります。 ※Sass・Compassはインストールされているものとします。 Gruntで処理したいこと Gruntには、SassとCompassをコンパイルする以外にも様々な便利機能があります。今回、下記の機能も使ってみたいと思います。 Sassファイルをコンパイルする livereloadでSassファイルが更新されたらブラウザをリロードさせるバラバラに記述されたメディアクエリをまとめる CSSのプロパティの順番を揃えるフォルダ構成フォルダ構成については下記の通りです。 project ├css (CSSの出力先) ├sass │└sty
hopekuson 2014/02/17
やってみよ
リンク
Grunt livereload でファイルを修正したらブラウザを自動リロード - @ledsun blog
livereloadとは？ファイルの変更を検知したらブラウザで読み込みなおすgrunt-contribe-watch プラグインのオプションです。 grunt-contribe-connectプラグインとブラウザ拡張と組み合わせて使います。何がうれしいの？クライアントJavaScriptの開発ではエディタでJavaScriptファイルを修正ブラウザに切り替えブラウザをリロードの三つを頻繁に繰り返します。この「ブラウザをリロード」を自動で行ってくれると、以下のような簡単な確認であればブラウザにフォーカスを切り替える必要がありません。レイアウトが崩れていないかエラーが起きないかエラーが起きてデバッグをしたくなっったら、ブラウザに切り替えます。ブラウザに切り替えないのでエディタで Ctrl + S で保存ブラウザの表示を確認エディタで修正作業の続きブラウザにフォ
hopekuson 2014/02/17
リンク
- 2014年2月19日
- 2014年2月17日
- 2014年2月16日