HTMLとCSSだけでタブのメニューをかんたんに作る方法をご紹介します。
このタブメニューは、画面を遷移しないで表示内容のコンテンツを切り替えます。JavaScriptは使いません。
これは、タブを切り替えるときに、Webサーバーにリクエストを送信しないので、Webページのパフォーマンスを上げることができます。
続きを読むCSS3で困っている人のために情報を発信します。
CSSは、HTMLで定義されたウェブコンテンツに装飾を付ける技術です。
スマホやタブレットなどいろいろなデバイスに対応する(レスポンシブデザイン)ことが必須になって、ますます専門性・重要性が高まっています。
CSSはプログラミングでないことに注意。(あくまで定義ファイルのフォーマット)
HTMLとCSSだけでタブのメニューをかんたんに作る方法をご紹介します。
このタブメニューは、画面を遷移しないで表示内容のコンテンツを切り替えます。JavaScriptは使いません。
これは、タブを切り替えるときに、Webサーバーにリクエストを送信しないので、Webページのパフォーマンスを上げることができます。
続きを読む<q>や<blockquote>で作る引用のデフォルトの引用符のマークや背景色はサイトのデザインと合わないことが多いし、ちょっとダサいです。カスタマイズをするのが当然の部類に入るもののひとつ。
引用符や背景色の変更はCSSでかんたんにできます。サンプルコードを交えながらご紹介します。
続きを読む画像を使わずに、HTMLとCSSだけで円を作る方法です。とてもかんたんです。
画像を読み込む必要がないので、応答時間やページの表示時間が少しだけ短縮できます。
一番のメリットは、CSSでサイズや色をかんたんに変更できること。デメリットはそんなに使うことはないこと。
(意味ねーじゃんと言わないでください。)
続きを読む画像を使わずにHTMLとCSSだけで吹き出しを作る方法です。漫画のセリフを入れるところに使われ、バルーンとも呼ばれます。
画像を読み込まないので、応答時間やページの表示時間が少しだけ短縮できます。
CSSで形や色味をかんたんに変更できるのもメリット。
続きを読むHTMLとCSSだけでレスポンシブに対応するWebページの基本フォーマットを作成しました。
の4パターンを用意。
cssクラスを1か所変えるだけでパターン変更ができて、スマホになるとサイドメニューが下の方に表示されるようにしています。
続きを読むGoogleMapやYouTubeを埋め込むときに使うiframeタグ。これを縦横比(アスペクト比)を変えずにレスポンシブに対応する方法です。
iframeはスマホで見るとはみ出ることがあるので必須。(これが起きるサイトは有名なところでも意外と多い。)
HTMLに少し修正を加えてあとはCSSで対応します。
続きを読む