牛丼デザイナーのときめきデザイン

典型的O型なデザイナーがぐだぐだと無様に生きている様子をお伝えします。めんどくさがりでもデザインは出来るのよ！

これって何pxだよ！！角丸の半径を簡単に調べる方法

デザインのお話 コーディング実験室

どうも、牛丼デザイナーのぽてこです。

お酒を飲んだあとって、なぜか無性に牛丼が食べたくなりますよね。
食欲の秋、牛丼の秋。
またしても季節を感じます。
どうも、バカです。

これって何pxの角丸？

さて。
今日はタイトル通り、角丸の大きさの調べ方をご紹介します。


コーディングをしよう！
送られてきたPSDを確認しよう！！
角丸だね〜CSSでちょんちょんしようね〜〜
…この角丸の半径、何pxやねん。


うまい方法もわからなかったぽてこは、
いちいち自分でシェイプを使って角丸を作りながら確認していました。
でもこれじゃ、時間もかかるし……
ちゃんとしたサイズが確認できない場合もあります。

…ということに気づいてしまったので、
うまい方法を先輩に聞いてみました！！！

ツールのご紹介。選択ツールって便利なんです

このブログでは、基本的にPhotoshopを使って説明していきます。
なので今回もPSを基準に説明していきまっせ。


というわけで、
今回使うツールは選択ツールのみです。
(四角いシェイプでも可能。)

f:id:moriyamakuru2:20151011211717p:plain
選択ツールは、
選択範囲に合わせた形をつくることもできるし、
マスクを使って切り抜きをするときにも便利です。
また、サイズを測るモノサシ代わりにもなるので、
コーディングのときなどにも使えますぞ。

ツールのご紹介。選択ツールって便利なんです

前置きが長くなってしまいましたが。。。

角丸の半径が何pxなのか調べる方法は、意外と簡単。


画面を拡大してみて、
角丸がどこから始まっているのかを確認します。
どこからはじまっているのか確認できたら、
はじまっている部分の大きさを選択ツールなりシェイプなりで確認します。
そこで確認した大きさが角丸の半径となります。
f:id:moriyamakuru2:20151011204217p:plain


たったこれだけで角丸の半径が調べることができました！

CSSで角丸をつくる。

角丸の半径がわかったらあとはCSSで設定するだけです。

簡単にですが、おなじみの角丸CSSも置いておきます。
参考にしてみてください。


【CSS】

.kadomaru {
  width: 263px;
  background-color: #73c1d3;
  /* 角丸用CSS */
  border-radius: 20px; 
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
}

体育の日ってなんで体育の日なの

今日のひとりごと

どうも、牛丼のぽてこです。
タイトルがくだらないのは許してください。


皆様、三連休たのしんでいますか？
ぽてこは最近忙しかったのもあり、お家でゆっくりまったりしております。
同居人がいるのであまり退屈はせず不思議な休日を過ごしております。


ところで、本日10月12日(月)は体育の日ですね。
この体育の日って数年前までは10月10日でしたよね。
なぜ祝日が変わってしまったのかについてしらべてみました。


ちなみに。僕は10日が誕生日だったりするので泣きました。


そもそも、体育の日って……？

体育の日は元々、
日本・アジア初のオリンピック「東京オリンピック」の開会式が行われた日に因んでいました。

1964年に開催されたこの東京オリンピック。
これを記念して、国民の祝日として体育の日が制定されました。


今年の体育の日って何日？規則性はあるの？

今年の体育の日は10月12日(月)です。

2000年から「ハッピーマンデー制度」の適用によって、
10月の第2月曜日に共通化されました。
必ず三連休になるので嬉しい制度ですね。


余談::ハッピーマンデー制度とは

ハッピーマンデー制度、ご存知でしょうか？
10年以上も前からある制度なのでご存知の方も多いと思います。

簡単にいうと、
週休2日制度が浸透したなら、月曜休みになれば嬉しいやーん
みたいなそんな制度です。

いや、本当はもっとちゃんとしているんですよ……！
ほら、ぽてこらしく、簡単にてきとーに説明してみただけであって……！！ね！！


体育の日には、何をしたらいいの？

さて、この体育の日ですが。
具体的には何をしたらよいのでしょうか……？

す、スポーツ……？

国民の祝日に関する法律の第2条によれば
「スポーツにしたしみ、健康な心身をつちかう
」
という趣向があるようです。

せ、せやな。
ひきこもりには関係ないんやけどな。。。
そんなぽてこですが。
先月久しぶりにテニスをしたら足をやってしまいまして。
運動とは程遠いあれです。


まとめと小話

そんな体育の日についての解説でした。

誕生日が祝日じゃなくなったのは
少しショックですが、三連休ウレシイナーという小並感。


ちなみに、
東京オリンピックなのですが
当時の日本は戦後の復興期が終わり、高度経済成長期の真っ只中だったようです。
なので東京オリンピックは日本の復活を象徴する一大イベントだったのです。
そんな裏話を見かけたので、体育の日がハッピーマンデー制度で変更されてしまうのは少し惜しいな。と思った僕でした。


ちゃんちゃん。

ちょっとだけ凝ってる下線つきリストを作る3つの方法

デザインのお話 コーディング実験室

ども、ぽてこです。

最近、体に脂がノってきて……秋だなぁと感じます。
体重の変化はないのですがね。。。
さすがに危機感を感じたので、テニスを始めようと思い体験レッスンに行ったのですが、足を怪我してしまいました。
しかもなかなか治りません。


そんなぽてこですが、今日も元気にブログを書いていきます！


下線つきリストが作りたいよ。

下線のついたリストって、結構作る機会が多いと思います。

f:id:moriyamakuru2:20151008124755p:plain
こんな感じ。


ただ単純に下線をつけるだけなら簡単なのですが
画像のように、一番上の要素は下線のみ、一番下の要素は下線なし、という指定があった場合は工夫が必要になってきます。


class名を追加してborderを取り除いちゃう。

li要素にborder-topを指定し、一番上のli要素だけにclass名を追加してborder: none;にする方法。

コーディング初心者でもすぐ思い浮かぶ方法だと思います。
ぽてこもいつもこれを使っていました。


【HTML】

<ul>
  <li class="border_none">10月8日　今日のご飯は牛丼でした。</li>
  <li>10月7日　ブログをリニューアルしました</li>
  <li>10月6日　デザインたのしいです。</li>
  <li>10月5日　コーディングも割と好きです。</li>
  <li>10月4日　ぽてこです。</li>
</ul>


【CSS】

.li {
  border-top: dotted 2px #cecccd;
  list-style: none;
}
li .border_none {
  border: none;
}


【私的メリット】
・頭を使わずにできる。
・複数のStyleを適用することができる。
・2番目のli要素だけに適用などもできる。

【私的デメリット】
・HTMLソースが少し汚くなる。
・class名を増やしすぎると混乱する。


overflow: hidden;を使って見えなくしちゃう。

裏技的な使い方ですが、overflow: hidden;を使う方法もあるみたいです。

liにネガティブマージンをかけて、わざとulの箱からはみ出させます。
そして、そのはみ出した部分を見えなくするためにulにoverflow: hiddern;をかけると…あら不思議。
線が見えなくなっちゃいますぜ。
…という技。

ネガティブマージンかける分がちょこっとずれちゃうので、heightの指定があるときは少し注意が必要かも。


【HTML】

<ul>
  <li>10月8日　今日のご飯は牛丼でした。</li>
  <li>10月7日　ブログをリニューアルしました</li>
  <li>10月6日　デザインたのしいです。</li>
  <li>10月5日　コーディングも割と好きです。</li>
  <li>10月4日　ぽてこです。</li>
</ul>


【CSS】

ul {
  overflow: hidden;
}
li {
  margin-top: -2px;
  border-top: dotted 2px #cecccd;
  list-style: none;
}


【私的メリット】
・HTMLソースが綺麗。
・意味が理解できれば意外と簡単。
・:first-childに対応していないブラウザでも使える。

【私的デメリット】
・ネガティブマージンを使うのでheight指定があるときは少し注意が必要。


擬似要素:first-childを使ってborderを消しちゃう。

:first-childは、親要素のなかで一番最初にでてくる子要素にStyleを適用してくれる擬似要素です。

li要素に擬似要素をつければいいだけなので、訳あってulにoverflow: hidden;が使えないときなどにも使えるかも。
後から見返したときにわかりやすい方法だなと思います。


【HTML】

<ul>
  <li>10月8日　今日のご飯は牛丼でした。</li>
  <li>10月7日　ブログをリニューアルしました</li>
  <li>10月6日　デザインたのしいです。</li>
  <li>10月5日　コーディングも割と好きです。</li>
  <li>10月4日　ぽてこです。</li>
</ul>


【CSS】

li {
  border-top: dotted 2px #cecccd;
  list-style: none;
}
li:first-child {
  border : none;
}


だけど、:first-childは柔軟性に足りるかも。。。

ただし、子要素が複数種類ある場合。

たとえば…

<div>
  <p>子要素１</p>
  <p>子要素２</p>
  <span>子要素３</span>
  <span>子要素４</span>
  <span>子要素５</span>
</div>

この場合、一番最初に登場するspanタグに擬似要素をつけようとしても出来ないのです。
試しに、div span:first-child { border: none; } と記述してみたら、何も適用されずに泣きました。
わかってはいたけどちょっと寂しいぽてこです。

正しい記述は div p:first-child { border: none; } ですな。
divは省略可能です。


結局、どれを使えばいいのか。

3種類の方法をご紹介しましたが、どれを使えばいいのか悩みますよね。
なので、自分的にこの方法ならこの時に使うだろうってのをまとめてみました。


【classを追加する方法】
・一番上以外にもStyleを追加する可能性があるとき。
・複数のStyleを追加しなければいけないとき。

【overflow: hidden;を使う方法】
・borderが見えなければいいというだけのとき。
・ulタグに何かしらのStyleを適用させているとき。

【擬似要素を使う方法】
・li要素だけで完結させたいとき。
・要素にStyleを適用させたことを一目で確認できるようにしたいとき。


以上、自分のお好みに合わせて使ってみてくださいね。

はじめまして、どうも、ぽてこです。

最初に。

f:id:moriyamakuru2:20150923080212p:plain

こんにちは、こんばんわ。


はじめての方は、はじめまして。
どこかでお会いした方はお久しぶりです。


どうも。ぽてこです。


ぽ……ぽてこ？

アプリ開発とかいろいろしている会社のデザイナー（自称）です。


前職は、広告代理店であはんうふんなバナーを作っていました。
バナー以外にも自社サイトやらのデザインとか、情報メディアの運営とか編集とかライティングとか、本当いろいろしてたり……w


そんなぽてこですが、学校もデザイン系ではなかったのでまだまだぺーぺーすぎるデザイナーです。


こんなブログ。

このブログでは、ぺーぺーにも分かりやすい、痒いところに手が届くようなデザイン情報を書いたり。
おえかきとかデザインとか適当に垂れ流したり。
デザイナー目線のコーディング情報とか（そんなんあるんか？）
てきっとうな日記とかも書いたり……。
SEO大好き野郎なので、そっち系の記事もあるかもとか。


なんでも書く場所にしたいなと思っています。


おわりに。

そんなこんなで、てきとーに頑張るのでガラスハートのぽてこをよろしくお願いしますね。

以前からのお付き合いがある方はまた遊んでいただけたら嬉しいです。(こっそり)