「WEB制作」の記事一覧

「text-indent」「overflow」CSSで画像置換を行う方法

Webページでは、テキストを主体として作成を行います。しかし、画像を取り入れた方が、見た目が華やかになって良いですよね。「img要素」を使用して画像を表示する方法もありますが、画像置換というテクニックを使うことも可能です・・・

「display:block;」「display:inline;」要素の表示状態を切り替える

HTMLの要素には、ブロックレベル要素とインライン要素があります。それぞれに表示状態の性質が異なりますから、場合によって使い分ける必要があります。ただ、CSSによって表示状態を変更できるので、色々なレイアウトを作ることが・・・

「position」CSSで意図した場所に要素を配置する

「float」を使ったレイアウトは、要素を浮かせて左右に配置するものです。一方、「position」を使ったレイアウトになると、自分の意図した場所を指定して配置することができます。floatと違って、配置場所を細かく指定・・・

「float」CSSで要素を横に並べる方法

Webデザインは、HTMLで要素をマークアップした後、CSSで装飾やレイアウトを整えていきます。そして、ブロックレベル要素をレイアウトするときに使用されるのが、「float」と「position」となります。 「floa・・・

「margin」CSSで隣のブロック要素との間隔を調節する

ボックスモデルでも紹介しましたが、ボックスには「マージン」と呼ばれる要素があります。マージンとは、隣のボックスとの間の余白のことです。つまり、ボーダーの外側の部分ですね。マージンの値を指定することで、自由にレイアウトを決・・・

「padding」CSSで要素の余白を指定する

ボックスモデルで紹介したように、ボックスにはパディングという要素があります。これは、コンテンツとボーダーの間の余白のことです。適度に余白が無いと文章が読みづらくなりますから、パディングの指定はデザインとしても重要な要素と・・・

「border」CSSで要素に枠を付ける

ボックスモデルでも紹介しましたが、ボックスにはボーダーという概念があります。contentの外枠に該当する部分で、枠を付けたいときに使用します。注意書きやアクセントとして、注目させたい箇所に使用することが多いです。 ボー・・・

「width」「height」CSSで内容の幅と高さを指定する

ボックスモデルの中で、内容の入る「content」では、幅と高さを指定することが出来ます。contentの大きさを指定することで、キレイにレイアウトをまとめることが出来ますから覚えておきましょう。 CSSにおいて、「wi・・・

疑似要素の使い方。「:before」「:after」「:first-line」「:first-letter」

CSSでスタイルを指定するときに、要素の全体ではなく一部だけにスタイルを適用したい場合があると思います。しかし、通常だと全体的にスタイルが適用されてしまうため、部分的に装飾することは出来ません。 そこで、「疑似要素」と呼・・・

CSSでリンクの色を変える方法

ハイパーリンクは、デフォルトの状態だと青色に下線で表示されますよね。かなり見やすい表示ですが、サイトのデザインによっては違和感が出てしまうかもしれません。なので、全体のバランスを考えて、配色や装飾を変える必要があります。・・・

サブコンテンツ

このページの先頭へ