[CSS3]box-sizingプロパティ
投稿日時:2015年3月2日
3月になりました。 春が待ち遠しい、桜が大好きなスタッフ「ほ」です。 さて、本日はWebネタです。 Web作成の授業をしていると、どうしても皆様の前に立ちはだかるボックスサイズの壁。 通常、CSSでボックスのサイズを指定する場合、ちょっとした計算が必要になります。 たとえば、DIVボックスを用意して、 div { width:300px; } という指定を行ったとします。 この場合、ほかの指定がなければ、 width = ボックスの幅 ということになります。 ただ、このままではボックスの内側の文字まわりに余白がまったくないために窮屈な印象を受けます。 そこで、ボックスにpaddingの指定を行…
[CSS]ユーザースタイルシート
投稿日時:2015年2月5日
今日は雨と雪が交互に降っていますね。 本日、夜の講習でご来校される方は、足元に気をつけてお越しください。 もちろん日程変更も可能ですので、お気軽にお電話ください。 スタッフ「ほ」です。 今日はちょっと制作時のテクニックとは違うのですが、「CSSを覚えるとこんなこともできるんだよ!」ということを知っていただきたいので、ユーザースタイルシートをご紹介します。 みなさんは、どこかのサイトを閲覧しているときに、「文字の色が薄くて見づらいなぁ」とか「背景画像がごちゃごちゃしていて見づらい…」なんて感じたことないでしょうか? ほかにも「プリントアウトすると、広告バナーだらけのせいでプリント枚数に無駄がでる…
[CSS]リストマーカーの位置
投稿日時:2015年2月2日
先週雪が降ったときは、昨年の大雪を思い出してドキドキしましたが、あまり大雪にはならずにすんでほっとしたスタッフ「ほ」です。 さて、今日は受講生の方からいただいた質問がありましたので、ご紹介です。 HTMLでリストのマークアップを行うと、各リスト項目の先頭にマーク(リストマーカーといいます)が自動的に表示されます。 普段はあまり意識しないのですが、このリストマーカーはli要素が持っているボックスの外側についています。※厳密にはブラウザによって異なったりもしますが… 上記は、li要素を見やすく赤いボーダーをつけた例です。リストマーカーがボックスの外側にあるのがわかると思います。 レイアウトの都合な…
[css]属性セレクタ
投稿日時:2014年9月29日
最近、ノートPCを買いましたスタッフ「ほ」です。 かなり昔に買ったノートPCがダメになってからは、持ち歩いてなかったのですが、やっぱり移動中の時間を有効に使いたいのと、スマホやタブレットではどうしてもやりたいことが満たされないので、思い切って買いました。 持ち運びにも便利な11インチサイズを買ったので、今のところ有意義に活用できています。 さて、今日はまだまだ終わってなかったセレクタシリーズです。 今日は「属性セレクタ」です。覚えるとかなり便利に使うことができます。 指定した属性を含む要素部分のみを装飾することができます。 むむむ…やっぱり文字にするとわかりづらいですね。 例を挙げていきましょ…
[CSS]隣接セレクタ
投稿日時:2014年9月18日
今日から、東京ゲームショウが始まりますね。 私自身、大のゲーム好きというわけではありませんが、好きなタイトルの新作がお披露目になるようで、楽しみです。 ゲームはだんぜんRPG派のスタッフ「ほ」です。 さて、ここのところ、このブログがWebネタで埋まりつつありますが、きっと「の」が挽回してくれるはずなので、私は空気を読まずにCSSネタでいきます。 セレクタ祭りはまだまだ続きます。 今回は「隣接セレクタ」 自分が指定した2つの要素が隣り合った場合に装飾を行います。 【HTML】 <h2>見出し</h2> <p>リード文リード文リード文</p> <…