[Web]小さなアイコンを文字として扱う
投稿日時:2015年6月1日
6月になりました。蒸し暑い日が増えてきましたね。夏の気配がしておきております。 春と秋のような季節が好きなスタッフ「ほ」にとっては、ちょっとだけつらい季節の到来です。 さて、本日はとってもナイスなWebサービスをご紹介です。 —— 例えば、ナビゲーションボタンに小さなアイコンを入れたい場合、みなさんならどうしますか? グラフィックソフトなんかでGIFファイルを作成して利用する、もしくはボタンそのものを画像で作成する、なんてのが一般的かなと思います。 ただ、グラフィックで作成すると、フォントサイズが変わった時にまた画像をリサイズして作り直す必要がありますし、色を変えたい場…
[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インチサイズを買ったので、今のところ有意義に活用できています。 さて、今日はまだまだ終わってなかったセレクタシリーズです。 今日は「属性セレクタ」です。覚えるとかなり便利に使うことができます。 指定した属性を含む要素部分のみを装飾することができます。 むむむ…やっぱり文字にするとわかりづらいですね。 例を挙げていきましょ…