他言語サイト
翻訳はみつかりませんでした

上級者 - 最高のWebマスター

何かを言える立場にありません。もしかしたら役に立つかもしれない情報を発信するだけです。

HTML&CSS: レスポンシブ対応の基本フォーマットを作成した

HTML5 CSS3 ロゴ

HTMLとCSSだけで、レスポンシブに対応したWebページの基本フォーマットを作成しました。

  • 1カラム
  • 2カラム(左メニュー、右メニュー)
  • 3カラム(両端メニュー)

の4パターンを用意しています。

cssクラスを1か所変えるだけでパターン変更ができて、スマホサイズになるとサイドメニューが下の方に表示されるようにしています。

続きを読む

HTMLとCSSだけで簡単に作る。軽量なタブで表示内容を切り替え

HTML5 CSS3 ロゴ

HTMLとCSSだけでタブのメニューを簡単に作る方法をご紹介します。このタブメニューは、画面を遷移しないで表示内容のコンテンツを切り替えます。JavaScriptは使いません。

これは、タブを切り替えるときに、Webサーバーにリクエストを送信しないので、Webページのパフォーマンスを上げることができます。

続きを読む

  • by Google Ads

HTMLとCSSだけで簡単に作る。軽量な開く・閉じる切り替えボタン

HTML5 CSS3 ロゴ

HTMLとCSSだけで『開く・閉じる』の切り替えボタンを簡単に作る方法をご紹介します。このボタンは、画面を遷移しないでコンテンツを開いたり閉じたりします。JavaScriptは使いません。

これは、コンテンツを制御するときに、Webサーバーにリクエストを送信しないので、Webページのパフォーマンスを上げることができます。

続きを読む

HTMLとCSSだけで簡単に作る。軽量な閉じる・すべて表示ボタン

HTML5 CSS3 ロゴ

HTMLとCSSだけで『閉じる・すべて表示』ボタンを簡単に作る方法をご紹介します。このボタンは、画面を遷移しないでコンテンツを閉じたり追加表示します。JavaScriptは使いません。

これは、コンテンツを制御するときに、Webサーバーにリクエストを送信しないので、Webページのパフォーマンスを上げることができます。

続きを読む

HTMLとCSSだけで作る軽量サンプルのまとめ(:checked疑似クラス)

HTML5 CSS3 ロゴ

CSS3のchecked疑似クラスを使えば、JavaScriptを使わない、軽量なコンポーネントを作ることができます。

閉じるボタンやタブ機能などのサンプルを用意しました。これは処理を制御するときに、Webサーバーにリクエストを送信しないので、Webページのパフォーマンスを上げることができます。

続きを読む

  • by Google Ads

php: HTMLを出力する3つの方法

PHP ロゴ

phpのHTML出力には3つの方法があります。はじめに思いつくのは"echo"ですね?

それ以外にもヒアドキュメント、バッファリングの方法があります。それぞれのメリット・デメリットをご紹介しながら見ていきます。

続きを読む

  • by Google Ads

WordPress: Ajaxの使い方(公開サイト 編)

WordPress ロゴ

WordPressの公開用サイトでAjaxを実装する方法を、サンプルコードを使って説明します。

WordPressは公開用サイトでAjaxを使うことをあまり想定していません。しかし、実装する方法はあってその方法は簡単です。

続きを読む

この記事を気に入ったらぜひシェアも!!