Newer
Older
2022-KEGO / mycgi / gomi.css
@”Sato ”Sato on 12 Jan 2023 3 KB fix
.gazo1
{margin:0 0 0 380px;}

/* .gazo2
{text-align:center;
margin: 0 0 0 0;} */

.gazo3
{text-align:center;
margin: 70px 0 0 0 ;}

/*フォーム全体*/
.form1{
    position:relative;/*フォームの相対位置*/	
    Max-width:270px;/*フォームのサイズ*/
    margin-bottom:15px;/*フォームの下に余白*/	 
    }
    
    /*検索ボックス*/
    .sbox{
    display: inline-block; /* なくても大丈夫だけど、念の為 */
    position: absolute;/* 基準値とする */
    left: 660px;
    top:0; 	
    outline:0;/*クリック時の青い枠線消す*/	
    height:50px;/*検索ボックスの高さ*/	
    width: 200px;
    padding:0 10px;/*テキスト位置調整*/	 
    border-radius:2px 0 0 2px;/*検索ボックスの角を丸める*/		
    background:#eee;/*検索ボックスの背景カラー*/		
    }
    
    .sbox::before {
      content: "";           /* 疑似要素に必須 */
      width: 100px;           /* アイコンの横幅 */
      height: 16px;          /* アイコンの高さ */
      background: url(kensaku.png) no-repeat center center / auto 100%; /* 背景にアイコン画像を配置 */
      display: inline-block; /* 高さを持たせるためにインラインブロック要素にする */
      position: absolute;    /* 相対位置に指定 */
      top: 40px;              /* アイコンの位置。微調整してね */
      left: 50px;             /* アイコンの位置。微調整してね */
    }
    
    .sbox input {
      padding: 3px 0 3px 2em; /* アイコンを設置するため左の余白を多めに指定*/
    }
    
    /*検索ボタン*/
    .sbtn{
    width:70px;/*検索ボタンの横幅*/ 
    height:54px;/*検索ボタンの縦幅*/ 
    position:absolute;/*検索ボタンの絶対位置*/  
    left:885px;/*検索ボタンの位置調整*/  
    top:0;
    border-radius:0 2px 2px 0;/*検索ボタンの角を丸める*/ 
    background:#7fbfff;/*検索ボタンの背景カラー*/ 
    border:none;/*検索ボタンの枠線を消す*/ 
    color:#fff;/*検索ボタンのテキストカラー*/ 
    font-weight:bold;/*検索ボタンのテキスト太字*/ 
    font-size:16px;/*検索ボタンのフォントサイズ*/ 
    }
    /*検索ボタンマウスオーバー時*/
    .sbtn:hover{
    color:#666;/*検索ボタンマウスオーバー時のフォントカラー*/ 
    }
    /*リセットボタン*/
    .rt{
    width:70px;/*検索ボタンの横幅*/ 
    height:54px;/*検索ボタンの縦幅*/ 
    position:absolute;/*検索ボタンの絶対位置*/  
    left:956px;/*検索ボタンの位置調整*/  
    top:0;
    border-radius:0 2px 2px 0;/*検索ボタンの角を丸める*/ 
    background:#9ACD32;/*検索ボタンの背景カラー*/ 
    border:none;/*検索ボタンの枠線を消す*/ 
    color:#fff;/*検索ボタンのテキストカラー*/ 
    font-weight:bold;/*検索ボタンのテキスト太字*/ 
    font-size:16px;/*検索ボタンのフォントサイズ*/ 
    }
    /*リセットボタンマウスオーバー時*/
    .rt:hover{
    color:#666;/*検索ボタンマウスオーバー時のフォントカラー*/ 
    }