はてなブックマーク

モバイル時のUIで横スクロールのを採用するアプリやWebサービスも増えてきており、デザイナーやコーダーの方は実装する機会もあるかと思います。 今回はCSSだけで横スクロールを実装する方法と気にするべきポイントをご紹介します。 横スクロール(horizontal scroll)とは 上記の画像の様なUIのことです。アプリの方が見る機会は多いと思いますが、WEBサービスでも最近はよく見るかと思います。 横スクロールが見れるWEBサービス（2017/09現在） ・Google ・Airbnb ・TripAdvisor ・Bookingtable ・zomato 実装時の気をつけるポイント 横スクロールだと画面の横にコンテンツを配置するため、縦のスペースを取らずにコンテンツを配置することができます。ですが、アプリなどでよく使用されるUIだとはいえ、まだまだ横スクロールに慣れていないユーザーもいるか

購入フォームなどで何個かステップがある場合、それを分けて表示する際にユーザーが現在どの作業中か知らせるプログレスバー。勝手にステッププログレスバーと名付けましたが、なんかしっくりきたので以下ステッププログレスバーと呼ぶことにします。 今回はそのステッププログレスバーをcssで実装してみましたので、もし今フォームの実装をしていて、かつステッププログレスバーを必要としている人はコピペしてどんどん使用してください。 DEMO コード html <div class="container"> <ul class="progressbar"> <li class="">Basket</li> <li class="active">Delivery</li> <li>Confirm</li> <li>Done</li> </ul> <ul class="progressbar_02"> <li cla

久々の記事更新となります。この記事はリハビリとして書いているのでなんか変なこと書いてるかもしれませんがご了承ください。あまり身の上のことは書かないのですが人生の節目だったこともあり書かせてもらいます。 今回、初の転職活動でしたのでその時得たポイントなどをシェアしてこれから転職する人、特に２０代後半の人に向けてかけたらと思います。 ・経緯 カナダのバンクーバーで働いていたのですが、27歳というタイミングで日本に本帰国することを決断しました。 当初の考えでは30歳をめどに日本に帰国しようと考えていたのですが、自分のキャリア・英語の伸びしろ・日本への恋しさなど色々ものを考慮した結果、本帰国という決断をしました。 本帰国するとなったので、帰ったらスムーズに転職活動（面接）できるようカナダにいるころからちょくちょくリサーチやエージェントとの連絡などを行っていました。まず僕がした転職活動での全体的な流

CSSもだんだんと発展してきてCSSだけで文の省略ができるようになりました。今回は、CSSでの長くなった文を…にする方法と、その他CSS以外でやる方法をまとめました。 パフォーマンスの観点からだとそこまで差は出ないと思いますがCSSでやったほうが早いのではないかと思っています。また、PHPやJSなどで文を省略してしまうと実際の文字列を操作しているのでSEO的に若干の影響はあるのではないかなと思っています。 とりあえず今のところは好きな方法で実装すれば今のところ大丈夫かと思います。 1.CSS　一行を…に省略する { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } こちらはどのブラウザもサポートしているので、使用しても問題ないと思います。ただ複数行になる場合はこの方法は使用できませんのでご注意ください。 使用