4月スケジュール公開!

こんにちは。
先日前から行きたかった有名なパティスリー(リリエンベルグ)へ。
到着するとそこには行列が・・・!
そして生ケーキはすでに完売。
残るは焼き菓子のみとのこと。
2週続いた大雪の翌週で、
いつも以上にお客さんが集中してしまったようです。。。
お目当てのザッハトルテはお預けになりましたが
美味しい焼き菓子を買ってご満悦のスタッフ「な」です。

さて、大変長らくお待たせしてしまいました!
4月の開講スケジュールを公開しました!
開講スケジュール
https://www.vanfu-vts.jp/cgi-bin/course/schedule.php

4月には多くの会社で新入社員を迎えることと思います。
弊社でも新人教育を実施しておりますが
通常業務をしているとなかなか教える時間をとるのも
難しい場合がありますよね。
そんなときはぜひ、
バンフートレーニングスクールの講座を
ご活用下さい!

短期間で基本操作から習得することが出来るので
初心者という新人さんにもぴったり☆
かつ、現場で良く使うスキルも身に付くので、
職場でもすぐ役に立ちます♪
制作スキルを身に付けたいけど時間がない!
という現場での社内研修にぴったりです。
イラストレーター
フォトショップ
インデザイン
WEB基礎
ドリームウィーバー

★★★直接指導だから理解度が違う!★★★

イラストレーター (Illustrator) / フォトショップ (Photoshop)
WEB基礎 (HTML+CSS) / ドリームウィーバー (Dreamweaver)
インデザイン (InDesign) / フラッシュ(Flash)

短期間×低価格×バンフートレーニングスクール
=仕事で使える制作スキルがすぐ身につく!!
―☆入学金0円☆教材費0円☆ ―

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ

[CSS3]角丸 border-radius

2週連続の大雪、大変でしたね。未だ交通がままならない場所もあるそうで、いち早い復旧をお祈りしております。

私スタッフ「ほ」は、1回目の大雪の日は、仕事は休みでしたが、自宅で延々と雪かきをしておりました。

その後、性質の悪い風邪にやられてしまい(インフルエンザではありませんでした)、2回目の雪の時はダウンしてました。。今でも声がガラガラ気味です。

お聞き苦しい授業となってしまうので、一日も早く治すように、毎日どっさりと、薬&のど飴をなめております。

さて、受講後のアンケートでもご要望が増えてきました「CSS3」。マンスリー講座でもテーマにあげてみようかな、と思いますが、こちらのブログでも、ちょこちょこネタを出していこうかと思います。

今回、テーマにしてみたいのが「角丸ボックス」。講習でも少しだけご紹介していますが、今回はもうちょっと掘り下げてみたいと思います。

まずは、HTMLで、段落をひとつ用意します。


<p class="rounded-box">角丸ボックス</p>

CSSでは、以下のように指定を行います。


.rounded-box {
      background-color:green;
      color:white;
      width:8em;
      line-height:2;
      text-align:center;

}

ここまでで、ボックスは以下のようになると思います。

角丸ボックス

それでは、ここに角丸を追加してみましょう。


.rounded-box {
      background-color:green;
      color:white;
      width:8em;
      line-height:2;
      text-align:center;
      border-radius:10px;
}

ここで、表示が以下のように変化すると思います。

角丸ボックス

この10pxという値は、角の丸みの指定です。
角丸の半径と表現した方がいいでしょうか。
少しわかりづらいので、図解します。

こんな感じです。
数値が大きいほど角の丸みが強くなります。

さらに、上記の指定では、四つ角すべてに等しく丸みが設定されますが、角それぞれで指定を行うことも可能です。


.rounded-box {
      background-color:green;
      color:white;
      width:8em;
      line-height:2;
      text-align:center;
      border-top-left-radius:10px;
      border-top-right-radius:10px;

}

結果は以下のようになります。

角丸ボックス

ナビゲーションのタブ表現に使えそうですね。

ショートハンドでの表現も可能です。


.rounded-box {
      background-color:green;
      color:white;
      width:8em;
      line-height:2;
      text-align:center;
      border-radius:0 10px 10px 0;

}

角丸ボックス

4つ数値を並べて指定します。
左上 右上 右下 左下の順で適用されます。
「左上を基点にして時計回り」と覚えちゃいましょう

また、値にはパーセントの指定が可能で、ボックスの幅と高さに対するパーセンテージが指定できます。

例えば、以下のように50%の指定を行うと…


.rounded-box {
      background-color:green;
      color:white;
      width:8em;
      line-height:2;
      text-align:center;
      border-radius:50%;

}

以下のようになります。

角丸ボックス

ボックスを正方形にした場合は


.rounded-box {
      background-color:green;
      color:white;
      width:8em;
      line-height:8em;
      text-align:center;
      border-radius:50%;

}

正円になります。

角丸ボックス

さらにさらに!
角丸の丸は楕円にすることも可能です。

水平方向と垂直方向で指定をするのですが、わかりづらいので、こちらも図にしました。

スラッシュで区切って、水平方向と垂直方向の半径を指定します。


.rounded-box {
      background-color:green;
      color:white;
      width:8em;
      line-height:2;
      padding-top:1em;
      text-align:center;
      border-radius:50% 50% 0 0 / 100% 100% 0 0;

}

↓こんな形状になります。

角丸ボックス

とまぁ、実はいろいろ指定ができる角丸。
実装しているブラウザも増えてきました。

スマートフォンでもバッチリ表現されます。
うまく活かすことで、画像ファイルを減らすことができ、ファイルサイズの軽減、ページ表示速度の向上につながります。

使えるシーンがあったら、がんがん使っていきましょう。

あ、ちなみに画像にも使えますよ。

適用前

角丸50%で適用

「んーー、そもそもCSS自体がよくわかってない…」という方は、ぜひぜひバンフーのホームページ作成講座へ!


バンフートレーニングスクールでは、ホームページ制作講座を開講しています。

このブログで記事を書いているスタッフ「ほ」が特別なアプリケーションを使わずに基本的なWebページを構築する方法をレクチャー。

まったくの初心者の方大歓迎!ステップアップ編としてDreamweaverというアプリケーションを使った実践編もご用意しております。

詳しくは、下記詳細ページをご覧ください。

ホームページ制作基礎講座の詳細

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ