サンプルコード:HTML/CSS一般

ページ内の指定した場所へジャンプする

縦に長いページなどで同じページの指定した場所にジャンプする時や、他ページの指定した場所にジャンするコードです。ジャンプする場所にa要素を設け、name属性でラベルをつけます。そしてリンク先としてそのラベルを指定します。

iPhoneの自動文字サイズ調整機能を無効化する

iPhoneでは画面を横向きにした時、デフォルトでは自動文字サイズ調整機能が働いて文字が大きくなってしまいます。
これによりレイアウト崩れなどが発生する恐れがある場合はCSSで無効にしておきます。

画像の配置を横方向中央揃えにする

画像を横方向に中央揃えにするには、img要素に対してCSS設定します。
img要素をpタグで囲んでいる場合はp要素に対してCSS設定します。

floatを解除するmicro clearfix

floatを使用している親要素にclearfixクラスを適用することで、floatを解除します。
古いブラウザには対応しないシンプルなコードのmicro clearfixです。

リスト内のイメージ要素を上下左右中央揃えにする

画像の左右中央揃えは簡単ですが、上下左右となると少し工夫が必要です。
リスト内のimg要素をCSSの設定で上下左右中央揃えにするコードです。

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>

特集記事

  • WordPress Image

    WordPress の基礎から応用まで
    Webサイト制作ツールとして圧倒的な人気を誇るWordPress。利用するにあたって必要な知識を体系的にまとめた記事です。
  • jQuery Mobile Image

    jQuery Mobile を基本から覚える
    スマホサイト制作に最適なフレームワークの利用方法を解説。DEMOページ・サンプルコードで動作を確認できます。

スポンサーリンク

ページの先頭へ