[CSS]画面内の一部だけをスクロール
投稿日時:2012年10月31日
夏が終わってから時間の流れの体感が明らかにおかしいスタッフ「ほ」です。 あれ?今年もあと2ヶ月?って感じです。 それだけ、人生の濃度が薄いってこと?いやいや、そんなはずは… さて、気を取り直して今日の話題です。 授業後によく受ける質問のひとつに「画面内の新着情報の部分だけをスクロールするようにしたい」といったものがあります。 中に書かれる文字量が増えることでページ全体のレイアウトバランスがおかしくなってしまうのを嫌うときに使う手法ですね。 この対処には、ボックスに対して、あふれた情報をどのように処理するかを決める「overflow」プロパティを利用します。 ソースは以下のような感じになります。…
[CSS]:focus 疑似クラス
投稿日時:2012年9月20日
あれ?と思っている間に、夏が終わっちゃいました。 秋が一番好きな季節なので、だんだんワクワクしているスタッフ「ほ」です。 さて、今回のネタは「CSS」。 授業でご紹介している疑似クラスの補足情報です。 講習では、以下の疑似クラスをご紹介しています。 a:link … 未訪問のリンク部分の装飾を指定する a:visited … 訪問済みリンクの装飾を指定する a:hover … リンク部分にマウスポインタが重なった時の装飾を指定 a:active … リンク部分をクリックした瞬間の装飾を指定 上記の4指定を行うことで、リンク部分に効果的な装飾を施すことが可能です。 で、実はこの4つ以外にもいくつ…
[HTML/CSS] 意外と忘れやすいリストの設定
投稿日時:2012年6月29日
すみません、かなり長い間、ブログサボっておりました。 スタッフ「ほ」です。 いや、ほんとすみません。 といいつつ、今回もブログにがっつり時間がとれず、ちょいネタです。 すみません。 HTMLでマークアップするリストには「箇条書きリスト」「番号リスト」そして「定義リスト」の3つがあります。 今回、定義リストはちょっと置いておいて、箇条書きリストと番号リストにスポットを当てます。 まず、それぞれの違いですが、「箇条書きリスト」は以下のようなマークアップを行います。 <ul> <li>箇条書きリスト</li> <li>箇条書きリスト</li>…
[CSS]リンク下線を点線に
投稿日時:2012年5月9日
みなさま、GWはいかがお過ごしでしたでしょうか? 私は、シフトに恵まれ、しっかりと連休をいただくことができたので、 完全に頭も体もリフレッシュしてきましたっ! お久しぶりです。スタッフ「ほ」です。 さて、今日はCSSで、リンクの装飾に関するネタです。 通常、文字に対してリンクを張ると、文字の色は青くなり、下線が設定されます。 通常はリンクの線は一本線で、この種類を変更することはできないのですが、ちょっと変則的な方法を利用すると、線の種類を別の線種に変更できます。 先に手順だけを書くと 1.リンク文字の下線を消す 2.リンクのボックスが持つ下罫線を設定する の2つです。 まずはHTMLのファイル…
[CSS]クラスの複数指定
投稿日時:2011年9月27日
とある限定キャンペーンのため、一晩で某コンビニを約50軒まわったというちょっと痛い記録を更新したスタッフ「ほ」です。 最近、急に涼しくなりましたが、みなさまお風邪など召されてませんでしょうか? 私は思い切り風邪ひきました…orz さて、今日はWebネタでいきたいと思います。 CSSで装飾を行う際に個別の装飾を担当してくれるクラス。 実は1つの要素に対して、複数のクラスを適用できたりします。 例えば、以下のような4つのクラスを作ったとします。 .hot { color: #FFF; background-color: #F90; border: 3px solid #F00; } .cool {…