HTML&CSS

アイコンフォントを使用するときにFont Awesomeを使う時の注意点です。 Bootstrapを使い慣れるとBootstrap以外のコードでもフロート対象にpull-leftやpull-rightのクラス名を使ってフロートを設定するこ...

contenteditable属性はHTML5で使用できる属性です。contenteditable="true"を指定した要素は、ブラウザで閲覧するユーザーが自由に内容を変更できるものです。 アイデア次第でおもしろいサイトができあがること...

:beforeや:afterとセットで使用するcontentプロパティがありますが、その値にattr()という便利なものがあります。 attr()について あまり使用しないcontentプロパティの値だけに見逃していましたが、使いよ...

HTMLの文書でテキストを均等割付したい場合があります。 読ませる文章よりも見せたい文章にそのような要望が多いかもしれません。 HTMLでは見せる文章も重要な要素です。 均等割付の方法 結論から言うとtext-align: ju...

Facebook Pageの記事を自分のサイトに表示させる方法です。Page Pluginを使うと簡単にできます。 Page Pluginに行きます。 Facebook Page URLに自分のPageのアドレスを入れます。 ...

CSSレイアウトで水平方向の中央揃えはできても、垂直方向の中央揃えは難しいですね。 今回は画像を親要素の垂直・水平方向に中央揃えを行います。 header部分へのロゴの配置などに使えるテクニックです。 position:ab...

ナビゲーションをliで作成して、floatを使用して横並びにする方法はよく使用されます。 面倒なのは横並びのliを中央に揃えることです。 liをfloatして横並びにした例 htmlコード cssコード 中央揃えす...

これはFacebookページに「いいね」してもらうためのものです。 「Like Box」は使えなくなるようです。こちらを使用するようにしましょう。 注：この記事の内容は2015年5月現在のものです。Facebookの仕様は頻繁に変更...

フルードイメージについて Googleのモバイルフレンドリー宣言からレスポンシブWebデザインが当たりまえになりつつあります。 レスポンシブ対応にするためは、画像をブラウザの幅に応じて縮小するフルードイメージの仕組みが使われます。 こ...