【CSS】見出しが変に改行しない！スマホのfont-size指定にvminを使ってみよう
スマホのfont-sizeの指定で良さげな指定方法を見つけたのでご紹介いたします。 特に見出しなんかの大きな文字を使用する場面で活用できそうです。 スマホあるある見出し改行しちゃう問題 スマホのコーディングしてると、見出しやキャッチコピーなどちょっと大きい文字がデバイス幅によっては改行位置が意図しない場所になってしまうことってありませんか？ スマホデバイスの多様化に伴い結構直面する問題な気がします。 せっかくのデザインがそれだと残念ですよね。 fontをvminで指定すると改行せずに文字サイズを小さくもできる そこで登場するのがvminです。これをfont-sizeの指定に使うことで改行せずに見出しをコーディングする事ができます。 百聞は一見にしかず。早速デモを見てみましょう。 font-sizeをvminで指定したデモ デモを作りブラウザ幅の変化によってどう変わるかをGIFアニメにしてみ
CSSのfilterプロパティを使ったメイン部分がぼけるサイドメニューの作り方
こんにちは、井畑です。 前々から好きでよく見ているデザインギャラリーサイトMUUUUU.ORGでサイドメニューがぬっと出てきてメイン部分の背景がぼやけるのかっこいいなーと思ったので、実装できるか挑戦してみました。 調べたところ、CSSのfilterを使うのがお手軽な感じだったので、それを採用しています。それではどうぞー!! サイドメニューがぬっと出て来てぼやけるサイドメニューの作り方 順を追って説明します。まずは基本的なサイドメニューの作り方です。 まずは、サイドメニューを作る 今回はぼやけるのを確認しやすくするために、背景を写真にして作成しました。ねこねこ。右上の「menu」を押すとサイドメニューが現れます。 See the Pen 普通のメニュー by Tetsuya Ihata (@tihata) on CodePen. サイドメニュー作成時のポイント ポイントはメニューとメインの部
Photoshopでスマートオブジェクトを元のデータに素早く戻す方法(スクリプト使用)
creative memomemo Webデザインtips,Photoshoptips,クリエイティブでステキなものをまとめているブログ。 こんにちは。Phothoshopとボールは友達！最近フットサルをはじめました井畑です。 今回は以前記事にもさせてもらったPhotoshopのスマートオブジェクトを元のレイヤーのデータに素早く戻す方法を見つけたのでご報告させていただきます。 スマートオブジェクトは便利ですが、一度スマートオブジェクト化してしまうと、元のPSDデータにスマートオブジェクト化する前のデータをもってくるのがめんどくさいものでした。(スマートオブジェクトのレイヤーをダブルクリックし展開して、そのデータを元のPSDデータにもってくるっていう)それをワンタッチでできる方法です。 僕は意外とスマートオブジェクトを元のレイヤーデータにもどして、複製したい場合があったりするのでこの時短は結
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
