HTML,css

• [PR]
  ×

  [PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

  • 2026/03/20 02:33
• スマホのviewport
  ・Android で閲覧した際にページをピタっと収める viewport 指定

  http://www.tasuhiku.com/tips/214

  ・Androidの「target-densitydpi」でviewportの調整

  http://blog.webcreativepark.net/2011/01/31-121759.html

  ・初期状態で指定の幅にズームさせたスマホサイトが作れないか検討してみた

  http://www.teradas.net/archives/9209/
  PR
  • HTML,css
  • 2014/08/06 19:05
  • 0
• コーディング後にコンソールチェック！
  クローム
  
  要素を検証　⇒　console
  • HTML,css
  • 2014/08/06 18:48
  • 0
• 検索エンジンに引っかからないようにするMETAタグ
  http://korikorikorikori.blog.fc2.com/blog-entry-56.html
  
  headタグ内に、以下を記述。
  
  <meta name="robots" content="noindex,nofollow" />
  
  ・robots ・・・　検索エンジンロボットを制御
  ・noindex　・・・　インデックスされるのを拒否
  ・nofollow　・・・　ページ内のリンク先巡回を拒否
  • HTML,css
  • 2014/07/23 09:23
  • 0
• スマホの画面だと見づらいtableをMedia Queriesで見やすくしたら良いと思うよ！
  tableのth,tdのdisplayを変えて、リストに変換するらしいよ。
  
  http://makurazaki.org/css/post-890/
  • HTML,css
  • 2014/07/15 11:50
  • 0
• スマホサイトのコーディング時に役立つ小技8
  たった1行！スマホサイトのコーディング時に役立つ小技8（サンプルあり）
  
  http://designcolor-web.com/2014/06/09/smartphone-site-tips8/
  
  1. 幅をデバイスサイズに合わせる
  
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  
  

  
  2.スマホを横にしたときに文字が大きくならないようにする
  
  body {-webkit-text-size-adjust: 100%;}
  
  

  
  3.電話番号に自動的にリンクが付かないようにする
  
  <meta name="format-detection" content="telephone=no">
  
  

  
  4.リンクを押したら電話をかけられるようにする
  
  <a href="tel:0120-00-0000">0120-00-0000</a>
  
  

  
  5.リンクを押したらGoogleマップアプリを起動させる
  
  <a href="http://maps.google.com/maps?q=住所">住所</a>
  
  

  
  6.リンクエリアを広げる
  
  display: block;
  
  

  
  7.paddingやborder分を気にせずwidth/heightの数値を指定する
  
  box-sizing : border-box ;
  
  

  
  8.長い文字列でも途中で改行させる
  
  word-break: break-all;

  



  • HTML,css
  • 2014/07/02 21:59
  • 0