レスポンシブの画像問題を解決する簡単な方法 | それからデザイン スタッフブログ
レスポンシブの一つの落とし穴として、「画像の問題」があります。 今回はその「画像の問題」とその解決方法をご紹介致します。 画像の問題とは？ 「画像の問題」といきなり言い出した分けですが、さて画像の問題というと、ここは実際の画面をみると分かりやすいと思います。 demo:https://sole-color-blog.com/demos/responsive/ ※スマートフォンでご覧頂くか、モダンブラウザの場合は画面を小さくしてご覧ください。 デモを見ると画面から画像が飛び抜けてしまっているのがお分かり頂けると思います。 なぜこれが起こるというと、簡潔に説明すると「画像自体のサイズ（縦/横）が優先しそのサイズで表示する」為に起こるのですが、さすがにこれは誰がみてもありえません。 解決する方法として、大きさに合わせた画像を作るという方法などがありますが、その場合スマホの数だけ画像を作る必要がで
コーディング規約を作ろう
2017年1月6日 Webサイト制作, 便利ツール コーディング規約やスタイルガイドは、HTMLやCSSのマークアップや、各種プログラミング言語の書き方をまとめたものです。コーディングスタンダードやコーディングガイドラインとも呼ばれますね。コーディング規約を決めていなかったり、あいまいにしたまま進めていくと、書式が統一されていないため、コードを追加すればするほどゴチャゴチャしたコードになりがちです。チームでコーディングしていくならなおさら。今回チーム用のコーディング規約を見直すことになったので、その時感じた抑えておくべきポイントをまとめてみます。 ↑私が10年以上利用している会計ソフト！ コーディング規約に含むべき項目 ディレクトリー階層 ファイルを保存するフォルダーの階層や、そのフォルダーの名前を決めておきます。画像を格納しているフォルダーを例にあげても、「image」「images」「
あなたのサイトに最適なCSS Resetが見つかる -*{ CSSresetr }
昨日「ブラウザのスタイルを初期化するスタイルシートの総まとめ -2010年版」で、数多くのCSS Resetを紹介しました。 じゃ、どれが自分に最適なんだろう？ という時にぴったり！ 数多くのCSS Resetを手軽に試すことができるオンラインサービスを紹介します。 *{ CSSresetr } - Online CSS-Reset Tool [ad#ad-2] *{ CSSresetr }の使い方は簡単です。 プルダウンの「Change the reset」からCSS Resetを 「Change the content」から適用するコンテンツを選択します。 下記は、CSS Resetを「Example Page」に適用したものです。 marign, paddingを取り除いているCSS Reset、限られた要素のみ適用するCSS Resetなど、実際にコンテンツにあてはめるとその使い勝
ものスゴく便利なグリッド表示用ブックマークレット登場 | Web担当者Forum
Web担編集部の安田です。Web担のはてブ件数1万件超え（）を記念して、ご愛読のみなさんのお役にたてる便利なツールを作りました。名付けて、「位置調整可能なグリッドオーバーレイ」ブックマーク。ウェブデザインをする人なら日常的にdivの幅や隙間の長さを測ったりしていることでしょう。そういうときに手放せなくなるツールです。 akiyanさんが作った便利なグリッドオーバーレイのブックマークにインスパイヤされて、さらに便利な機能を盛り込んでみました。 名付けて、「位置調整可能なグリッドオーバーレイ」ブックマーク。 使い方その1普通のブックマークレットです。以下のリンクを右クリックして「お気に入りに追加」（IEの場合）または「このリンクをブックマーク」（Firefoxの場合）してください。 IEでは「追加しようとしているお気に入りは安全でない可能性があります。続行しますか？」とのセキュリティ警告が出ま
見出しタグh1など :検索エンジン最適化で順位アップ ::SEO塾(旧)
CSSソース h1 { font-size: 175%; line-height: 1.2em; } h2 { font-size: 150%; line-height: 1em; } h3 { font-size: 125%; line-height: 1em; } 文字サイズは、「font-size」を用いる。またサイズは、パーセントなどで、相対指定にしておく。「20pt」「16px」など、絶対指定するとアクセシビリティとして難あり。 最後に、行間が空き過ぎないように、「line-height」を。こちらも値は「1em」などの、相対指定で。 見栄え h1・h2・h3は、順位アップ効果が非常に高いが、そのまま使っては、文字の大きさや改行など、表示のうえで問題が出てくる。 だから、スタイルシートが本領を発揮するのだ。また見出しタグは、CSSを用いてこそ、構造的記述としても
作って学ぶスマートフォン対応サイトの基本 (1/4)
iPhone/Android向けサイト制作の基本を学ぶために、今回は実際に手を動かしながら非常に簡単なWebページを作ってみましょう。あわせて、スマートフォンサイト制作に最低限必要な制作環境（エディターとWebサーバー）についても紹介します。 用意するもの1：エディター HTMLを編集するのに必要です。使い慣れたソフトで構いませんが、もしなければ次のようなものを使うとよいでしょう。 ・Em Editor / Windows / 4000円（税込） http://jp.emeditor.com/ ・秀丸エディタ / Windows / 4200円（税込） http://hide.maruo.co.jp/ ・TeraPad / Windows / 無料 http://www5f.biglobe.ne.jp/~t-susumu/library/tpad.html ・JEdit X / Mac /
jQuery MobileでiPhone対応のサンプルHTMLを作ってみた ::ハブろぐ
気になっていたjQuery Mobileのα2が、jQuery 1.4.4と同時にリリースされたので、この機に試しに使ってみました。a-blog cmsとの組み合わせの実験も兼ねてますが、それは別エントリーで。 jQuery Mobile | jQuery Mobile jQueryおよびjQuery Mobile最新版登場 | エンタープライズ | マイコミジャーナル ASCII.jp：jQuery作者が明かす「jQuery Mobile」の魅力 デモ用のURL サンプルファイルのデモ 上記のURLにサンプルのデモを用意しました。Sencha Touchと違って、Firefoxでもそこそこ見れます。このブログにiPhone（ないしUAをそれに準じて偽装）からアクセスしても同様の表示がされます。 サンプルファイルのDL サンプルファイルのダウンロード(zip) このブログでは、CMSで動的
famfamfam.com: Silk Icons
“Silk” is a smooth, free icon set, containing over 700 16-by-16 pixel icons in strokably-soft PNG format. Containing a large variety of icons, you're sure to find something that tickles your fancy. And all for a low low price of $0.00. You can't say fairer than that. Current version: 1.3. View all icons (.png file, 1Mb) Download License I also love to hear of my work being used, feel encouraged to
RedLine Magazine : jQueryのスルスルスクロールを指定1つでバシバシ使う
jQueryのスルスルスクロールを指定1つでバシバシ使う このブログでも使っているjQueryを使ったスルスルーと動くスクロールなんですが、どこからどこへ移動したのかを目で追えるので分かりやすいし、動きも気持ちいいので大好きです。 多くの案件では1ページ内にページの先頭へ戻るアンカーリンクのみコレを利用してたんですが、この動きがクライアントに大好評のようでページ内の他のアンカーリンクでも使いたいという要望が増えてきました。今までこの動きの指定をJSで指定してたところに1つリンクが増える程度ならclassとリンク先だけ変更して同じ記述をコピーしちゃえばいいやってJSが分からない私の発想で乗り切ってたんですが、1ページ内に5個も6個も増えてくるとさすがに書くのが面倒というか、ほとんど同じ処理なのに重複した記述は要領悪いよなぁと思い始めまして・・・。 例えばリンクのページなんかでカテゴリが5個あ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://ameblo.jp/linking/entry-10296971396.html
http://designdesigndesign.net/
http://blog.bond-d.com/mobile/iphone_website.html
サービス終了のお知らせ
kuler