カウンセリング[css]マージンの相殺
投稿日時：2013年8月9日
毎日暑いですね。 こんにちは、スタッフ「ほ」です。 みなさま、夏休みはすでに取られましたでしょうか？それともこれからでしょうか？ 私は、大型連休ではなく、中型連休を２回いただくことができそうです。どこかに旅行に行くわけではないのですが、ちょくちょく近場で出かける用事があるので、毎日忙しく過ごせそうな予定です。 どこかで見かけたら声かけてください。 授業の中で、とある生徒さんからの質問を受けたので、今回のエントリーで解説をしておこうと思います。 たとえば以下のようにdivボックスが２つ上下に並んでいたとします。上のボックスを「boxA」、下のボックスを「boxB」としておきます。 それぞれのボッ…
[CSS]ネガティブマージン
投稿日時：2013年2月27日
一年で春と秋が大好きです。 暑いのと寒いのは苦手です。早く！早く！春よ来い！ こんにちは。基本的にガッツが足りないスタッフ「ほ」です。 今回のネタはCSSで行きます。 ネガティブマージン。 知っておくと、デザインにちょっとした変化がほしい時に役立ちます。 「マージン」というのは、オブジェクトにつける外余白のことです。 例えば、こんな感じの入れ子のボックスがあったとして・・・ この黄色いボックスに「左マージン」を設定すると、黄色いボックスの左側に外余白が発生するので、ボックスが右に押し出されます。 このようにして余白を発生させたり、ボックスを移動するのが目的で利用しますが、このマージンの値には「…
[CSS]画面内の一部だけをスクロール
投稿日時：2012年10月31日
夏が終わってから時間の流れの体感が明らかにおかしいスタッフ「ほ」です。 あれ？今年もあと２ヶ月？って感じです。 それだけ、人生の濃度が薄いってこと？いやいや、そんなはずは… さて、気を取り直して今日の話題です。 授業後によく受ける質問のひとつに「画面内の新着情報の部分だけをスクロールするようにしたい」といったものがあります。 中に書かれる文字量が増えることでページ全体のレイアウトバランスがおかしくなってしまうのを嫌うときに使う手法ですね。 この対処には、ボックスに対して、あふれた情報をどのように処理するかを決める「overflow」プロパティを利用します。 ソースは以下のような感じになります。…
[CSS]:focus 疑似クラス
投稿日時：2012年9月20日
あれ？と思っている間に、夏が終わっちゃいました。 秋が一番好きな季節なので、だんだんワクワクしているスタッフ「ほ」です。 さて、今回のネタは「CSS」。 授業でご紹介している疑似クラスの補足情報です。 講習では、以下の疑似クラスをご紹介しています。 a:link … 未訪問のリンク部分の装飾を指定する a:visited … 訪問済みリンクの装飾を指定する a:hover … リンク部分にマウスポインタが重なった時の装飾を指定 a:active … リンク部分をクリックした瞬間の装飾を指定 上記の４指定を行うことで、リンク部分に効果的な装飾を施すことが可能です。 で、実はこの４つ以外にもいくつ…
[HTML/CSS] 意外と忘れやすいリストの設定
投稿日時：2012年6月29日
すみません、かなり長い間、ブログサボっておりました。 スタッフ「ほ」です。 いや、ほんとすみません。 といいつつ、今回もブログにがっつり時間がとれず、ちょいネタです。 すみません。 HTMLでマークアップするリストには「箇条書きリスト」「番号リスト」そして「定義リスト」の３つがあります。 今回、定義リストはちょっと置いておいて、箇条書きリストと番号リストにスポットを当てます。 まず、それぞれの違いですが、「箇条書きリスト」は以下のようなマークアップを行います。 <ul> <li>箇条書きリスト</li> <li>箇条書きリスト</li>…