HTML・CSS

下位ページ

Content


リンク

新しいウィンドウ(タブ)で開く
<a href="~" target="_blank"></a>

form


CSS

適用の優先順位

  • 全体に適用されるものと局所に適用される者では、局所に適用されるものが優先される。
    • #xyz > p
    • p#xyz > #xyz
  • 上書きされるので、最後に読み込まれたものが適用される。
  • 強制的に優先順位を上げるには !important を付ける
p {color:red !important;} /*この値が最優先されて有効となる*/

CSSのコメントアウト

/* コメントアウト */
// は使えない(認識する場合もあるらしい)
http://monopocket.jp/blog/css/1278/

モバイルサイト用の表示CSS jQuery Mobile


画像のフィルタ


a aa aaa
b bb bbb

行をつくる→行の中に列をつくる
<table>
<tr><th>...</th><td>...</td></tr>
<tr><th>...</th><td>...</td></tr>
</table>

表をつくる

<table>...</table>

行をつくる

<tr>...</tr>

列をつくる

<tr><td>...</td></tr>

左寄せ、センタリング、右寄せ

<td align="right">}

要素の表示、非表示

タグはあるけれど、表示はされない、という状態をつくる
  • visiblity
  • display


ポップアップ風のメニューを仕込む(主にcssで)

メニューボタン(メニューアイコン)にポップアップルメニューとなるdiv要素を仕込んでおく。そのdiv要素は普段は
display:none
を設定しておく。(もしくはjavascript等でクリックしたときに生成するようにしておく)
クリックしたら
display:block(とか)
で表示させる。この時、
  • レイアウトを崩さないように、position:absolute(メニューボタン位置に連動させるなら、親にposition:relaltiveも)を仕込む
  • z-index を設定して、他の要素より前に出す。
  • 親要素に overflow : hidden が設定してると、親の枠外に飛び出せなくなる。
ので注意する。

エラー時のステータスコード


流行りのUIをコード付きで紹介


ウェブサイトのUIに悩んだときにインスピレーションが受けられるサイト「inspiration ui」


ロゴのジェネレータ


Instagram風の写真加工ができるCSSライブラリ「CSSGram」



簡易なチャートグラフを手軽に描けるサイト「BEAM」


200万点以上のアイコンをベクター形式でダウンロードできるサイト「iconshock」

タグ:

+ タグ編集
  • タグ:

このサイトはreCAPTCHAによって保護されており、Googleの プライバシーポリシー利用規約 が適用されます。

最終更新:2017年10月10日 09:13