HTML&CSS

contenteditable属性の使い方〜HTML5

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

svgが表示されない〜サーバーの設定

svg画像をimgタグで表示させたいのだけれども、サーバーにアップした途端に表示されなくなる場合があります。 これはサーバーがsvgを画像と認識していないためです。 この場合は .htaccessファイルに次の記述をすると表示されるようになります。 AddType image/svg+xml .sv  >>続きを読む

content:attr()と独自データ属性を使い方〜CSS

:beforeや:afterとセットで使用するcontentプロパティがありますが、その値にattr()という便利なものがあります。 attr()について あまり使用しないcontentプロパティの値だけに見逃していましたが、使いようによってはスクリプト的に使えて便利かもしれません。 attr()の  >>続きを読む

均等割付の方法〜HTML

HTMLの文書でテキストを均等割付したい場合があります。 読ませる文章よりも見せたい文章にそのような要望が多いかもしれません。 HTMLでは見せる文章も重要な要素です。 均等割付の方法 結論から言うとtext-align: justifyを使用します。ちょっと前までwebkit系のChromeやSa  >>続きを読む

垂直・水平方向に子要素を中央揃え

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

フロートしたナビを中央揃えする方法

ナビゲーションをliで作成して、floatを使用して横並びにする方法はよく使用されます。 面倒なのは横並びのliを中央に揃えることです。 liをfloatして横並びにした例 htmlコード <nav class="global"> <ul> <li&  >>続きを読む

Facebook 「Page Plugin」の設定

これはFacebookページに「いいね」してもらうためのものです。 「Like Box」は使えなくなるようです。こちらを使用するようにしましょう。 注:この記事の内容は2015年5月現在のものです。Facebookの仕様は頻繁に変更されますので、コード類の記述方法は気を配っておく必要があります。 「  >>続きを読む

フルードイメージで起こる問題点〜画像が縮小されない??

フルードイメージについて Googleのモバイルフレンドリー宣言からレスポンシブWebデザインが当たりまえになりつつあります。 レスポンシブ対応にするためは、画像をブラウザの幅に応じて縮小するフルードイメージの仕組みが使われます。 これは簡単で imgに対してmax-width:100%とheigh  >>続きを読む

ナビゲーションの中央揃え

グローバルナビなどのナビゲーションを中央揃えにする方法です。 ナビゲーションが固定幅なら両サイドのマージンをautoにすれば済みます。 ナビゲーションを中央揃えにするサンプル CSSコード *{ list-style: none; margin:0; padding:0; } nav{ backgr  >>続きを読む