Subscribed unsubscribe Subscribe Subscribe

floatした要素が崩れないようにする(他の要素が回りこまないようにする)

padding-bottom margin-bottom でなんとかしていたが、 overflow:hidden; を親か子の最後に指定することで回り込みを防げる. <div class="a"> <div class="b"> <p>xxxx</p> <p>xxxx</p> </div> <div class="b"> <p>xxxx</p> <p>xxxx</p> </div> </div> .b p { float: left; } .b { overflow: hidden; }

正方形を維持しつつCSSだけでレスポンシブ対応する

以下より参照. stackoverflow.com .square { width: 100%; height: 0; padding-bottom: 100%; } 完全に正方形でレスポンシブに可変する.

background-image を複数指定する

カンマ区切りにより, 複数のbackground-imageが指定可能. 区切り線と矢印などに利用. #Menu dt.active { background-image: url("../images/laser/a.png"), url("../images/laser/b.png"); background-position: right, bottom; background-repeat: no-repea…

アコーディオンに矢印をつける

<dl id="Menu"> <dt>aaa</dt> <dd>bbb</dd> <dt>ccc</dt> <dd>ddd</dd> </dl> active classが付いている時とついていないときで表示を分ける. #Menu dt { display: block; height: 50px; text-align: left; cursor: pointer; font-weight: 300; background-image: url("../images/xxx.png"); background-position: ri…

ZeroClipboardを使ってテキストをクリップボードにコピー

ボタンをタップすることで、テキストをクリップボードへコピーする(スマホ除く ZeroClipboard読み込み HTML JS <script src="//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.2.0/ZeroClipboard.min.js"></script> </head> <p>コピーされます</p> <input id="textcp" type="hidden" value="コピーされます"> <div id="btn">Click me</div>

read the font file

@font-face { font-family: '{font_name}'; src: url('/fonts/{font_file.otf}'); } .body{ font-family: '{font_name}'; }

Google mapを埋め込む

地図を埋め込むには、いろいろな方法があります。 一番簡単な方法 Share a map URL or short link - Google Maps Help Share a map URL or short link - Google Maps Help Google マップ - 地図検索 1) Google mapへアクセスし、該当の場所を検索します。 …

画像が反映されない

画像名称、パスは合っているはずなのに、画像が反映されない。 そのような場合は、アクセス権限を見直してください。 ファイルを右クリック > 情報を見る > 共有とアクセス権で、everyoneがアクセス不可となっていたら画像を表示することができません。 読み…

@media

メディアの形態(横が◯◯px以下の画面に適用、画面の向きが変わったら、解像度が◯◯以下になったら)によって適用させたいCSSを記述できます。 max-width min-width @mediaを使う場合、viewportを指定しなければなりません。 viewportはスマホなど画面サイズが…

padding border margin の役割

margin marginを設定することにより、borderより外側に背景や画像を適用させない。 上下の要素間にmarginを設定し、相殺させてより広い方を適用させる。 負の数値が使用できる。 margin-right:auto;``margin-left:auto;を利用することにより、中央に配置でき…

シェアボタン作成

GetShares GetShares カスタマイズして作成可能。

OGP

シェアされる際、表示される情報がOGP(Open Graph Protocol)。 シェアボタンを設置したら、忘れず書く。 <meta property="og:title" content="タイトル"> <meta property="og:type" content="タイプ(websiteなど)"> <meta property="og:url" content="URL"> <meta property="og:image" content="アイキャッチ画像"> <meta property="og:site_name" content="サイト名"> </meta></meta></meta></meta></meta>

IEに互換表示させない

IEはバージョンごとにレンダリングが異なり、互換表示や下位バージョン表示などの機能がついています。 以下を記載することで互換表示をできなくさせます。 <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"></meta>

viewport

viewport PCとモバイル両方に同様のMIMEが指定されると、どちらのサイズにレイアウトを設定するかブラウザへ伝えられなくなってしまいます。 なので、Appleはviewportを起用し、今では業界標準となっています。 モバイルページを利用する場合、viewportを設…

legend | タイトル | html

<fieldset>で囲まれたフォームにタイトルをつけます。 <form enctype = "multipart/form-data" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>"> <fieldset> <legend>編集</legend> <label for="lastname">姓:</label> </fieldset></form></fieldset>

input type="file" | ファイル送信 | HTML

ファイルを送信するときは、以下のようにマルチパートで画像を送れるエンコーディングタイプを指定します。 <form enctype="multipart/form-data" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>"> <label for="pic">写真:</label> <input type="file" id="pic" name="pic" /> </form> 糸 (中島みゆき - Bank Band)PsalmClassical¥250provided courtesy of iTunes

input type #text #radio #password #checkbox #submit #table #tr #td

<body> <form action="#" method="post"> <table> <tr> <td>name:</td> <td><input type="text" name="name" size="20" maxlength="10"></td> </tr> <tr> <td>password:</td> <td><input type="password" name="pass" size="10" maxlength="6"></td> </tr> <tr> <td>grade:</td> <td> </td></tr></table></form></body>

HTML #head

■ 要素 属性 性質 HTMLでは、文書を作成する際に要素をタグで指定していきます。 要素(element)とは該当のタグで仕切られた空間の中で、どのような役割を持つかを決めます。 要素には属性(attribute)を指定でき、各要素に性質を持たせることができます。…

フォームを作ろう

・action属性 フォームに入力されたデータを処理 フォームを送信する input type="submit"やinput type="image"などの時はそちらが優先 ・enctype属性 データを送信する際、どのようにエンコードするのか、MIMEタイプ指定 デフォルト application/x-www-form…

HTML タグ名が混乱しないように

ul li ol hr pre table thead tbody tr th td dl dt dd ↓↓↓

IEのモード指定 #X-UA-Compatible

レンダリングモード 最近のブラウザは、HTML・CSSの表示の仕方を変えられ、Standard(標準)、Quirks(互換)、Almost Standard(中間)モードに切り替えられる。 Standard ソースコードを仕様通りに判別するモード。 Quirks CSSが普及していない過去のブラウザを…