はてなブックマーク

PCだと1文改行なしで、スマホでは区切りのいいところ改行したい、という時よくあるかとおもいます。 そういうときに<br class="sp-only" />で実装しがちですが、他にも2パターンあるので記事にまとめます。 具体的には以下の3パターンになります。(一番上が<br class="sp-only" />) brタグとメディアクエリを使う... おそらく一番定番?の実装方法。 <style> @media (min-width: 572px) { .sp-only { display: none; } } </style> <p> こちらは長めのテキストの文章になります。<br class="sp-only" />スマホになるとここで改行します。 </p> ただ、この方法だとメディアクエリの設定が結構面倒です。 文字サイズにあわせてメディアクエリを追加するなども場合によっては必要だったり

Figmaで作成したデザインデータを自動的にコード化するロマンは誰もが夢見ていることかと思います。 ただ、Reactとかあまり書けないWebサイト制作がメインのコーダーやデザイナー的にFigma APIをバリバリに使うのはなかなか学習や検証に時間がかかり...。 「とりあえずFigmaで作成したカラーやタイポグラフィの情報だけでもSassの変数として使えれば...!」と思っていたところ、zeroheightが結構便利で役立ちました。 そこで今回は、Figmaのデザイントークンをコード化する方法としてzeroheightを使ってみたという話と、おまけで最近試しているコード出力方法なども紹介できればと思います。 zeroheightでFigmaのデザイントークンをコード出力する zeroheightはスタイルガイド・ドキュメント作成ツールです。 Figmaのコンポーネントを一覧で表示させたり、コンポー

現在、本業・副業ともにWEBデザイナーとしてデザイン・コーディングをしているゆるけーです。 本業で携わっているWEBサービスが割と高齢者向けのサービスで、ITリテラシーやUIが今の自分と考え方が異なるよなーと思っているなか、『高齢者のためのユーザインタフェースデザイン』という書籍に出会いました。 高齢者関係なく普通にアクセシビリティの観点でも重要な視点がたくさんあり、とてもいい書籍だったので、ざっくり大事だと思った箇所を抜粋しつつ自分で探した事例等をざっと記事にまとめていきますー。 視覚 高齢者になると視力が低下する傾向があります。ただ、視力の低下=フォントを大きくするだけではありません。 視力の低下は老眼や光覚の減少などより複雑です。 主な視力の低下の具体例は以下のような点。 老眼:近く・遠くのものの焦点が合わない 周辺視野のぼやけ:画面の端に気づきにくい 中心視野の損失:画面の中央が暗

ブログやメディアサイトではほとんどが実装しているSNSシェアボタン。 公式のプラグインを使うと、簡単にシェアボタンを作成することができます。 しかし、デザインがプラットフォームによってバラバラであることや文言の調整が難しい点からスクラッチでつくりたいなーと思い、CSSで自由にカスタマイズ可能なHTML側のコピペ用SNSシェアボタンのコードをまとめてみました。 スクラッチでつくれば、統一したデザインでつくれるので、ぜひ参考にしていただければと思います。 SNS ボタンをスクラッチでつくる際の注意点 ボタンをつくってデザインを編集する際、一旦SNSのプラットフォーム側のブランドガイドラインを確認しましょう。 公式のブランドガイドラインには、アイコンを斜めにしてはいけない・視認性の悪い組み合わせにしない等のルールが書いてあります。 あと、現在開いているページのURLをシェアするにはJavaScr

FLOCSSは、OOCSSやSMACSS、BEMなどのコンセプトを取り入れたCSS設計のことです。 様々なCSS設計の概念やメリットを取り入れているため、管理や運用が破綻しにくい一方で、概念として理解しにくい点も多々あります。 なので、今回は、FLOCSSの構成やSass×ばつFLOCSSの運用方法についてまとめました。 皆さんのコーディングの参考になれば幸いです。 FLOCSS の構成 構成は Foundation、Layout、Object で構成されます。 Foundation foundation は、リセット系 css の読み込みや、そのサイトの基本となるスタイルを定義します。 大概は_base.scssや変数を定義するファイルが入ります。 Layout layout は、ヘッダー、フッター、コンテンツエリアなど、サイト全体の共通部分となるものを定義します。 接頭辞は l-をつけて、

WEBサイトをつくっているとぶつかる問い合わせフォーム制作案件。 問い合わせフォームのためだけにWordPress使うのも面倒だし、かといってGoogle Formは便利だけどそのまま埋め込むと味気ない。 デザインのトンマナが崩れがちだし手抜き感も出る...。 今回はこの埋め込みをHTML/CSSでコーディングしてそれっぽい感じでデザインする方法について紹介します。 実はこれもGoogle Form! ▶デモページ 目次 Google Formを作成する Google Formから必要な情報を抜き出す HTMLの問い合わせフォームに反映させる THANKSページを実装する 1まずはGoogle Formを作成する まずはGoogle DriveでGoogle Formを作成しましょう。 (もう作成済みの方は2に移動してください。) GUIで簡単に操作できるので詳しくは説明しませんが、テキストを

脱jQueryが叫ばれる昨今、HTMLやCSSが進化したことでjQueryはおろかJavaScriptが無くてもWEBサイトの簡単な機能が実装できるようになってきました。 ただ、そのたびに「アコーディオンメニュー CSSだけ」とかで検索するのはとても面倒なので、今回よく使う機能とそのコピペ用のコードをまとめました。 今回紹介するHTMLとCSSでできるJavaScriptっぽい機能は以下の6つ。 スムーズスクロール アコーディオンメニュー タブメニュー ハンバーガーメニュー モーダルウィンドウ 順番にデモサイトやコードを紹介していきます。 スムーズスクロール <a href="#about">のようにaタグでページ内のスクロールをスムーズにする機能はCSSに一行足すだけで実装できます。 htmlに直接scroll-behavior:smooth;を実装すると、ページ全体のaタグが全てスムー