ウェブページ作成のヒントのまとめ

/*個人の好みによりますが、textarea と select を除く一般的なタグのデフォルト属性は content-box です*/
   ボックスのサイズ: コンテンツボックス;
   -moz-box-sizing: コンテンツボックス; 
   -webkit-box-sizing: コンテンツボックス;

/*IE10 以降のブラウザでは、CSS を使用して入力テキスト入力ボックスの右側の十字を非表示にします*/
入力[type=text]::-ms-clear,::-ms-reveal{display:none;}
入力::-ms-clear、::-ms-reveal{表示:なし;}
入力{
  /*クリック時にアウトラインの色を削除します*/
  アウトライン: なし;
  /*リセットスタイルではパディングが削除されています。削除されていない場合は、パディングがあることを忘れないでください*/    
}

テキストエリア{
    /*テキストエリアのボックスサイズプロパティの値は border-box であることを忘れないでください。すべての境界線とパディングは、固定された幅と高さに基づいて描画されます*/
     /*クリック時にアウトラインの色を削除します*/
      アウトライン: なし;    
      /*必要に応じて、右下隅にあるサイズ変更可能なアイコンと機能を削除します*/
      サイズ変更: なし;
      /*リセットスタイルではパディングが削除されています。削除されていない場合は、パディングがあることを忘れないでください*/
}

入力::-webkit-入力プレースホルダー { 
    /* WebKit ブラウザ */ 
    フォントサイズ:14px;
    色: #333;
} 
入力:-moz-プレースホルダー{ 
    /* Mozilla Firefox 4 から 18 */ 
    フォントサイズ:14px;
    色: #333;
} 
入力::-moz-プレースホルダー{ 
    /* Mozilla Firefox 19 以降 */ 
    フォントサイズ:14px;
    色: #333;
} 
入力:-ms-入力プレースホルダー{ 
    /* インターネット エクスプローラー 10 以上 */ 
    フォントサイズ:14px;
    色: #333;
}

/* IE のデフォルトの選択ボックス スタイルをクリアし、ドロップダウン矢印を非表示にします */
select::-ms-expand { 表示: なし; }
選択{
  /*ChromeとFirefoxの境界線は異なるので、コピーしました*/
  境界線: 実線 1px #333;

  /*デフォルトの選択ボックスのスタイルをクリアする*/
  外観:なし;
  -moz-appearance:なし;
  -webkit-appearance:なし;

  /*右端の選択ボックスの中央に小さな矢印画像を表示します*/
  背景: url("small arrow image path") 繰り返しなし 右 中央 透明;

  /*ドロップダウン矢印がテキストに隠れないようにスペースを残します*/
  右パディング: 14px;

  /*クリック時にアウトラインの色を削除します*/
  アウトライン: なし;
}

ボタン{
    /*2px の境界線があり、通常のボタンには境界線は必要ありません*/
    境界線: なし;
    /*元の背景色は他の色に置き換えることができます*/
    背景: #333;
    /*リセットスタイルではパディングが削除されています。削除されていない場合は、パディングがあることを忘れないでください*/
}

/*input[type="radio"]とinput[type="cheakbox"]のスタイルを直接変更することはできないため、ラベルタグの関連付けを使用し、inputタグを非表示にしてラベルタグのスタイルを直接指定する必要があります。ラベルを選択すると、このラベルが選択されます*/
<label for="sex">男性</label>
<input type="radio" id="sex" value="男性" />

white-space: nowrap; /* 改行を強制しない */
overflow:hidden; /*コンテンツが幅を超えたときに余分なコンテンツを非表示にする*/ 
text-overflow:ellipsis;/* オブジェクト内のテキストがオーバーフローしたときに省略記号 (...) を表示します。overflow:hidden; と一緒に使用する必要があります。 */

-moz-user-select: なし; /* Firefox*/
-webkit-user-select: none; /* webkit ブラウザ */
-ms-user-select: なし; /* IE10 */
-khtml-user-select: none; /* 初期のブラウザ */
ユーザー選択: なし;

垂直方向の配置: 30%;
垂直位置合わせ: 中央;

div{
    幅:400ピクセル;
    高さ:300px;
    位置:絶対;
    上位:50%;
    残り:50%;
    マージン:-150px 0 0 -200px;
}

// js に記述されたリターンキー onclick = 'history.go(-1)';

// ページを強制的に更新します。window.location.reload(true);