css

css

知っておくとかなり使える!複数行の文字を丸めるcssプロパティline-clamp

はじめにあるブロック範囲内にテキストを収めたい場合、cssプロパティtext-overflow: ellipsis;を設定するとはみ出した文字は…(3点リーダー)として表示されます。WordPressなどの記事の抜粋を表示するサイト制作の際にとても役にたつプロパティなのですがtext-overflow:ellipsis...
stylus

レスポンシブフォントサイズをstylusで関数化。サンプルコードはこちら

はじめにレスポンシブのサイトを作る際にフォントサイズの指定はどのようにしているでしょうか?この記事ではメディアクエリを使用せず画面幅に合わせたフォントサイズを指定するコードを紹介します。CSSではなくnode製altcssのstylusのコードになります。各要素に気軽に設定できるようにmixinになっています。styl...
HTML

ちょっと待って!!知っていますか?input type=numberの落とし穴

はじめにユーザーに何かを入力してもらいたい画面を作成する場合にinputタグのtypeは何にしていますか?数字を入力してほしい場合にtype属性の値をnumberにするべきだと安直に考えてはいけません。input type=numberには落とし穴があります。input type=numberの落とし穴Chromeでs...
javascript

新しいページトップボタンの処理の書き方。【CSS】scroll-behaviorと【JS】scrollIntoViewを使ったスムーズスクロール

WEBサイトの定番部品の「ページトップへ戻るボタン」。だいたいのWEBサイト、ランディングページ(LP)で必要なので使い回している人も少なくないはずです。jQueryのanimateを利用している人、そのコードもう古いかもしれません。IE11がサポート外になった今、もっと簡単な新しいコードで書いていきましょう。ページ内...