【html】インライン要素内の画像に発生する余白を除去する
vertical-align: bottom
インライン要素内に記述したimg要素で表示された画像は、デフォルトではテキストのbaselineに合わせて整列されます。
HTML
<p><img src="image.png"></p>
CSS
p { background-color: #CCCCCC; }
レンダリング結果
そのため、画像のみをインライン要素に含めると、画像下部分に隙間ができてしまいます。
これを解消するためには、img要素にvertical-align: bottomを設定します。
CSS
p { background-color: #CCCCCC; } img { vertical-align: bottom; }
これによって、img要素がインライン要素の下端に合わせられ、隙間がなくなります。
参考文献
【html】インライン要素ボックスに対するプロパティ指定の特徴
inline要素
<div>などのブロックレベル要素とは異なり、<span>などのインライン要素はコンテンツを分断せずにタグを挿入することができます。
<p>キャンペーン実施中！詳しくは<a href="#">こちら</a>！</p>
レンダリング結果
キャンペーン実施中！詳しくはこちら！
このとき挿入されたインライン要素に対するプロパティ指定には、以下の特徴があります。
インライン要素には
widthheightプロパティを設定しても無視されます。paddingプロパティを設定すると、ブロックレベル要素のように上下左右に余白が適用されます。ただし、文字列中にインライン要素を適用されている場合、文字列に対する余白は適用されません（罫線などに対しては適用されます）。marginプロパティを設定すると、上下にのみマージンが設定されます。左右には設定されません。
Ex.
<p>吾輩わがはいは猫である。名前はまだ無い。 <a id="link" href="#">どこで生れたかとんと見当けんとうがつかぬ。</a> 何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。 吾輩はここで始めて人間というものを見た。</p>
a { width: 500px; /* widthは無視 */ height: 300px; /* heightは無視 */ padding: 30px; /* paddingは上下左右に適用 */ margin: 30px; /* marginは左右にのみ適用 */ background-color: yellow; }
inline-block
display:inline-blockを設定すると、インライン要素のようにコンテンツを分断せず、
- width, heightを設定可能
- padding/marginが上下左右に有効
になります。
【AngularJS】$httpでformによるPOSTリクエストを再現する
AngularJSの$httpメソッドでHTTPリクエストを発行する時、
コンテンツの形式をサーバ側と一致させなければサーバ側に正しくデータを受け取ってもらえない。
例えば、サーバ側がformタグのsubmitによってデータが送られていること想定しているとする。
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>input test</title> </head> <body> <form name="form-example" method="get" action="hoge/fuga"> <input id="input-tel" name="inputTel" type="tel"/> <input type="submit" value="submit"/> </form> </body> </html>
Server(JavaEE servlet)
public class HogeServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // パラメータを取得 String inputTel = request.getParameter("inputTel"); //... } }
このとき、formを使わずに他の方法でHTTPリクエストを送りたいのであれば、formと同じデータタイプを明示的に指定する必要がある。
angular.module('myApp',[]) .controller('myController', [function(){ // request $http.get( url: 'hoge/fuga', method: 'get', headers: {'Content-Type': 'application/x-www-form-urlencoded'} data: {} ); }]);
上記コードはAngularJSでformと同じ形式のHTTPリクエスト送出を表している（おそらく$httpの仕様で、他のヘッダ属性で違うところもあるが）。
デフォルトのformタグは、HTTPヘッダのContent-Typeにapplication/x-www-form-urlencodedを設定する。任意のHTTPクライアントでformと同様のリクエストを送りたい場合は、同じようにHTTPヘッダのContent-Typeを編集する必要がある。
参考文献
【AngularJS】入力フォームの値を正規表現でバリデーションチェックする
ng-pattern
HTML5ではinputタグに対して様々な値チェック機構を標準で備えている。
特に、inputタグの属性typeを指定すると、一部のtypeに対しては
HTML5標準の入力規則が適用される。
<!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="utf-8"> <title>input test</title> </head> <body ng-controller="myController"> <form id="formExample"> <!-- 電話番号 --> <input name="inputTel" type="tel"/> <div ng-show="formExample.inputTel.$error.tel">電話番号入力エラー</div> <!-- URL --> <input name="inputUrl" type="url"/> <div ng-show="formExample.inputUrl.$error.url">URL入力エラー</div> <!-- メールアドレス --> <input name="inputEmail" type="email"/> <div ng-show="formExample.inputEmail.$error.email">メールアドレス入力エラー</div> </form> </body> </html>
'use strict' angular.module("myApp", []) .controller('myController', [ function(){ $scope.formExample. = document.formExample; }]);
このように標準でも入力チェックの仕組みが用意されているが、よりアプリケーションに特化した入力を指定したい場合、ng-patternによって正規表現を使ったバリデーションを行うことができる。
<!-- 8~20文字のパスワードのみを受け付ける例 --> <input name="inputPassword" type="password" ng-pattern="/^[0-9a-z]{8,20}$/"/> <div ng-show="formExample.inputPassword.$error.pattern">パスワードは半角英数字８〜２０文字で入力</div>
上記のHTMLでは、inputタグの欄に入力された文字列がng-patternにマッチしない場合、警告メッセージを出す。
標準の入力チェックでカバーできないような入力であれば、こちらがおすすめ。
【git】tracked状態のファイルのみaddする
git add -u
メモ。
新規ファイルや削除済みファイルなど、gitがトラッキングしないファイル変更差分をステージングしたくないときに使う。
# 変更差分 $ git status On branch hoge-branch Changes not staged for commit: (use "git add <file>..." to update what will be committed) (use "git checkout -- <file>..." to discard changes in working directory) modified: hoge/fuga/piyo.css modified: hoge/fuga/piyo.html Untracked files: (use "git add <file>..." to include in what will be committed) hoge/fuga/piyo.js no changes added to commit (use "git add" and/or "git commit -a") # trackedな変更差分のみステージング $ git add -u # untracked filesはステージング状態にならない $ git status On branch hoge-branch Changes to be committed: (use "git reset HEAD <file>..." to unstage) modified: hoge/fuga/piyo.css modified: hoge/fuga/piyo.html Untracked files: (use "git add <file>..." to include in what will be committed) hoge/fuga/piyo.js
【HTML】マージンの相殺
上下で隣り合うマージンは重なり合う
HTMLタグに設定するマージンは、隣り合う上下のマージンは重なり合い相殺されるという特徴を持ちます。
例えば以下の2つのようなタグが上下に並んでいるとします。
上のタグの下マージンは30px、下のタグの上マージンは20pxとなっています。
このとき、各タグ間のマージンサイズはどのようになるのでしょうか？
直感的には、各タグのマージンサイズの合計で30+20=50pxとなりそうです。しかし実際には、タグ間のマージンはより大きいマージンサイズである30pxに合わせられます。これは各々のマージンが重なった状態になるためです。
入れ子構造でも同様の現象が発生します。
ただし、横マージンに関しては重なり合いが発生しません。
Sample
HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>title</title> <link rel="stylesheet" href="../common/css/sample.css" /> </head> <body> <div id="bg_tag1">margin:30px</div> <div id="bg_tag2">margin:20px</div> <div id="tag_container"> <div id="tag1">タグ1</div> <div id="tag2">タグ2</div> </div> </body> </html>
CSS
body { color: #666666; } #tag_container { width: 100%; position: absolute; } #tag1 { width:200px; height: 30px; text-align: center; margin: 30px; border: solid 1px #888888; background-color: #ffccdd; } #tag2 { width:200px; height: 30px; text-align: center; margin: 20px; border: solid 1px #888888; background-color: #ffccdd; margin-left: 30px; } #bg_tag1 { width:260px; height:90px; position: absolute; text-align: center; background-color: #ccddff55; border: dashed 1px #333333; } #bg_tag2 { width: 240px; height:70px; position: absolute; text-align: center; background-color: #ffccdd55; border: dashed 1px #333333; margin-top: 70px; margin-left: 10px; }
