トップ  > メモ一覧  > カテゴリ「HTML・CSS」の絞り込み結果 : 92件

92件中 1 〜 10 表示  1 | 2 | 3 | 4 ... 次の10件> 最後»

No.5335 iPhone のキーボードの改行が「検索」と表示される条件を調べた

実験してみたら

formにaction属性の指定がある
かつ
キーワードのinputが
    type属性の値がsearch
OR name属性の値がsearchを含む文字列
OR id属性の値がsearchを含む文字列

という結果となった。
(iPhone6s/10.3.3/Safari)

~~~~
 <!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>HTML5基本テンプレート</title>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
</head>
<body>

<h4>input=text</h4>
<p>NG</p>
<form>
<input type="text" name="hoge">
<input type="submit" name="" value="send">
</form>

<h4>input=search</h4>
<p>NG</p>
<form>
<input type="search" name="hoge">
<input type="submit" name="" value="send">
</form>

<h4>input=text, divあり</h4>
<p>NG</p>
<form>
<div>
<input type="text" name="hoge">
<input type="submit" name="" value="send">
</div>
</form>

<h4>action あり, input=text</h4>
<p>NG</p>
<form action="">
<input type="text" name="hoge">
<input type="submit" name="" value="send">
</form>

<h4>action あり, input=search</h4>
<p>OK</p>
<form action="">
<input type="search" name="hoge">
<input type="submit" name="" value="send">
</form>

<h4>action あり, input=text, name=hoge_search</h4>
<p>OK</p>
<form action="">
<input type="text" name="hoge_search">
<input type="submit" name="" value="send">
</form>

<h4>action あり, input=text, id=hoge_search</h4>
<p>OK</p>
<form action="">
<input type="text"name="hoge" id="hoge_search">
<input type="submit" name="" value="send">
</form>

<h4>action あり, input=text, class=hoge_search</h4>
<p>NG</p>
<form action="">
<input type="text"name="hoge" class="hoge_search">
<input type="submit" name="" value="send">
</form>

</body>
</html>
~~~~
更新:2017/08/03 16:36 カテゴリ: HTML・CSS  > HTML5 ▲トップ

No.5281【引用】まだCSSで消耗してるの? marginとpaddingを使いこなす3つのヒント



まだCSSで消耗してるの? marginとpaddingを使いこなす3つのヒント

 

いざWebデザイナーとしてのキャリアをスタートしても、プロのレベルになるまでには壁がたくさん。PhotoshopやIllustratorなどでは簡単にパーツを配置できるのに、いざコーディングとなると「均等にそろわない」「1ピクセルだけズレてる」「まわり込みがきかない」なんてことはありませんか?
もしかしたらその原因の1つは、基本的なプロパティである「marginとpaddingの使いわけ」ができていないからかもしれません。
こ...

引用元

更新:2016/07/20 09:42 カテゴリ: HTML・CSS  > CSSリファレンス ▲トップ

No.5233 レスポンシブ! 画像幅100% && 一定サイズ以下には縮めない && 画像の中央位置は動かさない

800x500 の画像の想定


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.item {
    position:relative;
    overflow:hidden;
    width:100%;
    height:500px;
}
.item img {
    position:absolute;
    left:0;
    right:0;
    width:100%;
    min-width:800px;
    min-height:500px;
}
@media (max-width: 800px)
{
  .item img {
    left:50%;
    margin-left:-400px;
  }
}
</style>
<title>スマートフォン用基本ページ</title>
</head>
<body>
<div class="item">
<img src="http:/example.com/examples/001.jpg" alt="" />
</div>
</body>
</html>

引用元

更新:2015/02/13 15:22 カテゴリ: HTML・CSS  > CSSリファレンス ▲トップ

No.4696【引用】2011-06-16



■ [ HTML5/CSS ]Modernizr.jsを使ってHTML5のクロスブラウザ問題に立ち向かう!
.csharpcode, .csharpcode pre{ font-size: small; color: black; font-family: Consolas, "Courier New", Courier, Monospace; background-color: #ffffff; /*white-space: pre;*/ }.csharpcode pre { margin: 0em; }.csharpcode .rem { color: #008000; }.csharpcode .kwrd { color: #0000ff; }.csharpcode .str { color: #006080; }.csharpcode .op { color: #0000c0; }.csharpcode .preproc { color: #cc6633; }....

引用元

更新:2013/03/08 11:37 カテゴリ: HTML・CSS  > HTML5 ▲トップ

No.4431【引用】色を変えたい!


色を変えたい!

このサイトから、好きな色を探してみては?
http://bootswatch.com/

Twitter BootstrapではLESSを採用しており、自分で好きな色を決めてコンパイルすることも可能ですが、ちょっと面倒ですよね。
このサイトで、細かく色を決めるのはどうでしょうか?
http://stylebootstrap.info/
公式でも、カスタマイズしたcssをダウンロードすることができます。
http://twitter.github.com/bootstrap/download.html

引用元

更新:2012/04/28 00:50 カテゴリ: HTML・CSS  > bootstorap ▲トップ

No.4415 ページナビゲーションを表示する

bs:ページナビゲーションを表示する

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>study bootstrap!</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="css/bootstrap-responsive.min.css" type="text/css">
</head>
<body>
<div class="container">

<h1>ページナビゲーションを表示する</h1>
<div style="margin-top:40px;">

    <div class="pagination">
        <ul>
            <li><a href="">前へ</a></li>
            <li><a href="">1</a></li>
            <li class="active"><a href="">2</a></li>
            <li><a href="">3</a></li>
            <li><a href="">4</a></li>
            <li class="disabled"><a href="">...</a></li>
            <li><a href="">次へ</a></li>
        </ul>
    </div>

</div>

</div>
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
</body>
</html>



更新:2012/04/15 23:09 カテゴリ: HTML・CSS  > bootstorap ▲トップ

No.4414 プログレスバーを表示する

bs:プログレスバーを表示する

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>study bootstrap!</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="css/bootstrap-responsive.min.css" type="text/css">
</head>
<body>
<div class="container">

<h1>プログレスバーを表示する</h1>

<div style="margin-top:40px;">

    <h4>40%</h4>
    <div class="progress">
        <div style="width:40%;" class="bar"></div>
    </div>

    <h4>バリエーション</h4>
    <div class="progress progress-info">
        <div style="width:40%;" class="bar"></div>
    </div>
    <div class="progress progress-danger progress-striped">
        <div style="width:40%;" class="bar"></div>
    </div>
    <div class="progress progress-danger progress-striped active">
        <div style="width:40%;" class="bar"></div>
    </div>

</div>

</div>
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
</body>
</html>




更新:2012/04/15 23:00 カテゴリ: HTML・CSS  > bootstorap ▲トップ

No.4413 ミニラベルを表示する

bs:ミニラベルを表示する

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>study bootstrap!</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="css/bootstrap-responsive.min.css" type="text/css">
</head>
<body>
<div class="container">

<h1>ミニラベルを表示する</h1>

<div style="margin-top:40px;">

    <p><span class="label">NOTICE</span> 何かを更新しました!</p>
    <p><span class="label label-info">NOTICE</span> 何かを更新しました!</p>
    <p><span class="label label-important">NOTICE</span> 何かを更新しました!</p>

</div>

</div>
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
</body>
</html>





更新:2012/04/15 22:52 カテゴリ: HTML・CSS  > bootstorap ▲トップ

No.4412 アラートメッセージ

bs: アラートメッセージ

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>study bootstrap!</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="css/bootstrap-responsive.min.css" type="text/css">
</head>
<body>
<div class="container">

<div style="margin-top:40px;">
    <h3>バリエーション</h3>
    <div class="alert">更新しました</div>
    <div class="alert alert-error">更新しました</div>
    <div class="alert alert-success">更新しました</div>
    <div class="alert alert-info">更新しました</div>
</div>

<div style="margin-top:40px;">
    <h3>「x」付き</h3>
    <p>x を押すとメッセージが消える</p>
    <div class="alert alert-error">
        <a class="close" data-dismiss="alert">x</a>
        更新しました
    </div>
</div>

</div>
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
</body>
</html>




更新:2012/04/15 22:45 カテゴリ: HTML・CSS  > bootstorap ▲トップ

No.4411 タブメニュー

bs:タブメニュー

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>study bootstrap!</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="css/bootstrap-responsive.min.css" type="text/css">
</head>
<body>
<div class="container">

<div style="margin-top:20px;">
    <div class="tabbable">
        <ul class="nav nav-tabs">
            <li><a href="#menu1" data-toggle="tab">Menu1</a></li>
            <li><a href="#menu2" data-toggle="tab">Menu2</a></li>
            <li><a href="#menu3" data-toggle="tab">Menu3</a></li>
        </ul>
        <div class="tab-content">
            <div id="menu1" class="tab-pane active">M1</div>
            <div id="menu2" class="tab-pane">M2</div>
            <div id="menu3" class="tab-pane">M3</div>
        </div>
    </div>
</div>

<div style="margin-top:40px;">
    <div class="tabbable tabs-left">
        <ul class="nav nav-tabs">
            <li><a href="#menu4" data-toggle="tab">Menu4</a></li>
            <li><a href="#menu5" data-toggle="tab">Menu5</a></li>
            <li><a href="#menu6" data-toggle="tab">Menu6</a></li>
        </ul>
        <div class="tab-content">
            <div id="menu4" class="tab-pane active">M4</div>
            <div id="menu5" class="tab-pane">M5</div>
            <div id="menu6" class="tab-pane">M6</div>
        </div>
    </div>
</div>

<div style="margin-top:40px;">
    <div class="tabbable tabs-below">
        <div class="tab-content">
            <div id="menu7" class="tab-pane active">M7</div>
            <div id="menu8" class="tab-pane">M8</div>
            <div id="menu9" class="tab-pane">M9</div>
        </div>
        <ul class="nav nav-tabs">
            <li><a href="#menu7" data-toggle="tab">Menu7</a></li>
            <li><a href="#menu8" data-toggle="tab">Menu8</a></li>
            <li><a href="#menu9" data-toggle="tab">Menu9</a></li>
        </ul>
    </div>
</div>

</div>
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
</body>
</html>





更新:2012/04/15 22:36 カテゴリ: HTML・CSS  > bootstorap ▲トップ
92件中 1 〜 10 表示  1 | 2 | 3 | 4 ... 次の10件> 最後»

Python

フロントエンド開発

Docker

AWS

nginx

Node.JS

Linux

web開発

サーバ管理

GCP

svn・git

ソース・開発

プロマネ

HTML・CSS

JavaScript

Alexa

webサービス運用

webサービス

Mac

MySQL

PHP

FuelPHP

ツール, ライブラリ

ビジネス

テンプレート

プレゼン

マネタイズ

負荷・チューニング

Windows

メール

メール・手紙文例

CodeIgniter

オブジェクト指向

UI・フロントエンド

cloud

マークアップ・テキスト

Flash

デザイン

DBその他

Ruby

PostgreSQL

ユーティリティ・ソフト

Firefox

ハードウェア

Google

symfony

OpenPNE全般

OpenPNE2

Hack(賢コツ)

OpenPNE3

リンク

個人開発

その他

未確認

KVS

ubuntu

Android

負荷試験

オープンソース

社会

便利ツール

マネー

Twig

食品宅配

WEB設計

オーディオ

一般常識

アプリ開発

サイトマップ

うずら技術ブログ

たませんSNS

rss2.0