HTML5・CSS3 カテゴリ

レスポンシブ対応のサイトを作るときに画像メニューを設置して、ブラウザが縮小されても画像が改行されることなく、1列で固定で、画像の比率を保ったまま縮小表示させる方法です。 cssのdisplay:table-cellで解決 html [php]<ul id="nav"> <li><a href="#"><…

レスポンシブなサイトを作るときに、大きな画面では画像メニュー、スマホなどのサイズでは、テキストメニューにして、メニューボタンに格納したい場合など、画像メニューからテキストメニューにCSSで表示切り替えする方法。 cssの:before attr属性で解決 html [php]<ul id="nav"> <li><a data-tex…

DreamweaverでSCSSファイルの編集をするためにDWの設定を触ったのですが、起動のたびに「ドキュメントタイプ”◯◯◯”は追加されません。使用するファイル拡張子が、既に別のドキュメントタイプに関連付けられているためです。」のエラーが連発するようになりました。 原因 調べてみると、Dreamweaverで編集可能にするために、「MMDocumentTypes.xml」というファイ…

CSS3が使えるようになって、メニューボタンの背景に矢印を表示させることなどが出来るようになりましたが、IEでは効かないものもあります。 背景に矢印を入れる時は、transform: rotate(45deg);のようにborderを回転させるのですが、このtransformがIE9では使えません。 …

HTMLやCSSなどのソースコードを簡単に整形する方法です。 Dreamweaver以外でも出来るソフトがあるようですが、手元のDWを使うのが一番便利そうなので、今回はDWのやり方を紹介します。 …

Google Web Designerってツールのβ版が公開されたようなので、触ってみました。Web Designerって名前が現在の私のイメージとは合わないのですが、Google的には、このツールでサイト一式作れるぜってことなのでしょうか(・・;) Google Web Designerとは 以下、Googleによる、このツールの説明です。Google Web Designer は、…

IEのHTML5対応状況 IE6だけでなく、IE8以下は全てHTML5に対応していません。 それを対応させるために「html5.js」というjavascriptを読み込ませます。 使い方は簡単で以下のコードをタグの前の内に記述します。 [php] <!--[if lt IE 9]> <script src="//html5shim.googlecode.com/…