どうも7noteです。supやsubだと下線がずれるので、対策方法を考える 上付き文字を指定できる<sup>や、 下付き文字を指定する<sub>などがありますが、 これらに下線を指定すると表示がちょっとおかしくなってしまいます。 【崩れてしまう例の画像↓】 index.html <p>水の化学式はH<sub>2</sub>O<sup>※</sup>である</p> style.css p { text-decoration: underline; } このようにsupやsubでは表示位置が上下にずれてしまうため下線がまっすぐ続きません。 これをまっすぐ線を引くための方法を考えていきます。 解決方法①： テキストをすべて画像にする 画像にすれば万事解決ですね。何の問題もありません。 しかしテキストの修正やSEOの事を考えるとあまり最適な方法とはいえなさそうです。 解決方法②： 下線をborderや疑似要素で再現する 下線がずれるのは、text-decoration: underline;を使っているからなので、この指定を使わずに下線を引けば問題ないはずです。 style.css p { line-height: 1.2; /* borderの位置はline-heightを使って微調整が必要 */ display: inline-block; border-bottom: solid 1px #000; } 解決方法③： vertical-alignを使って表示位置を微調整する（※subのみ） subにしか使えない方法ですが、vertical-alignの指定を変えることで下揃えにすることが可能です。 style.css sub { vertical-align: baseline; } 妥協案①: 対象部分の下線を消す inline-block要素にすることで、下線をつけないようにすることができます。 style.css sup,sub { display: inline-block; } 下線がずれたままよりはまだ見栄えがいいですね。指定が簡単なので妥協案の1つとしてはOKかなと思えます。 まとめ 解決方法3つ+妥協案1つを考えました。もしかしたら他にももっと良い方法があるかもしれませんので、もし「こうすればもっと簡単に下線がきれいになるよ！」という案があればぜひコメントください。 まとめとしては、 <sup>、<sub>では下線がずれる borderを下線の変わりに使用できる inline-block要素には下線が出ない このようなところでしょうか？ ぜひ他にもアイデアあればコメントください。 おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ
はじめに ある日、レスポンシブで正方形を作り、さらにその中央にSVGのアイコンがあるスタイルの実装をしたときに難しく感じたので記事にしました。 ソースコード HTML index.html <body> <div class="container"> <div class="box"> <img src="./icon.svg" class="icon"> </div> <div class="box"> <img src="./icon.svg" class="icon"> </div> <div class="box"> <img src="./icon.svg" class="icon"> </div> <div class="box"> <img src="./icon.svg" class="icon"> </div> <div class="box"> <img src="./icon.svg" class="icon"> </div> <div class="box"> <img src="./icon.svg" class="icon"> </div> <div class="box"> <img src="./icon.svg" class="icon"> </div> <div class="box"> <img src="./icon.svg" class="icon"> </div> <div class="box"> <img src="./icon.svg" class="icon"> </div> </div> </body> CSS styles.css .container { display: flex; flex-wrap: wrap; } .box { padding-bottom: calc(100% / 3); width: calc(100% / 3); height: 0; position: relative; } .icon { position: absolute; width: 50%; height: 50%; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } 画面 分かりやすいように背景色をつけました 最後に レスポンシブで正方形を保ちつつ、中のSVGアイコンの大きさも保つのが難しかったです みなさんも良い正方形ライフを！ おわり
はじめに こんにちわ、dtakkiyです! 今回、css fwameworkの1つであるtailwindcssを使って、サイトのレスポンシブ対応を行ってみました。 当初、tailwindcssに用意されたクラスだけで、実際のサイトのレスポンシブ対応がどこまでできるのか疑問だったのですが、実際に書いて学習を進めてみると、ほぼcssファイルに独自クラスを記述する必要がなくなりました。 以下は、その過程で学んだことをまとめたものです。 そもそもレスポンシブデザインとは？ 「レスポンシブデザイン」とは、PC、タブレット、スマートフォンなど、異なる画面サイズの幅であっても、１つのソースから自動的にサイトを見やすく最適な表示にする技術です。 ブレイクポイント について ブレイクポイントとは、区切り点を意味します。 ここでは表示切り替えに使用する画面幅と考えて下さい。 tailwindcssのブレイクポイント tailwindcssには標準で５つのブレイクポイントが用意されています。 - sm: 640px // @media(min-width: px) - md: 768px // @media(min-width: px) - lg: 1024px // @media(min-width: px) - xl: 1280px // @media(min-width: px) - 2xl: 1536px // @media(min-width: px) tailwindcssでは、画面幅がそれぞれのブレイクポイントのしきい値を超えると設定したスタイルが適用されます。 sm:〜、 md:〜、 lg:〜と記述します。 下記の例では、lgが指定されているので画面幅が1024pxを超えると、背景色が青→赤に切り替わります。 <div class="bg-blue-500 sm:bg-red-500"> sample </div> ブレイクポイントの追加 tailwindcssはブレイクポイントの追加・変更などカスタマイズが可能です。 tailwind.config.jsに記述を追加すると任意の設定を追加することができます。 module.exports = { theme: { screen: { 'pc': '1024px', 'desktop': '1280px', } } } 詳しくは、公式ドキュメントを参照下さい。 レスポンシブ対応 ここからは実際行ったことと、お手本となったサイトから学んだことをお伝えします。 どの画面幅から実装するべきか？ 想定する最小の画面幅から実装しました。 tailwindcssのブレイクポイントは、min-widthに設定されています。 単純に考えて一番小さい画面幅のものから着手し、徐々に大きな幅に対応させれば、表示の崩れなど大きな破綻は発生しないと考えました。 実装の単位 ヘッダーやフッターなどセクション毎に分けて実装しました。 セクションをまたいだコンテナー的な要素がなかったためです。 最大画面幅 セクション毎に最大画面幅を設定しました。 <section class="max-w-4xl mx-auto"> <div> ・・・ </div> </section> 背景画像(background-image: url(); margin-top: 100px;)をクラスを使わずにどう表現すればいいのか？ relativeとabsoluteの組み合わせ表現しました。 ここでは背後に背景画像を、最前面にタイトルなどの文字列を表示します。 <div class="relative"> <div class="absolute"> <div> <img src="/images/bg.png" alt="" width="1000" height="500" /> </div> </div> <div class="py-12"> <div> <h2>タイトル</h2> <p>・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・</p> </div> </div> </div> もし背景画像に余白などの調整が必要な場合は、imgを囲っているdivタグにマージン値を記述します。 ただ、tailwindcssはｐｘ単位のマージンやパディングの定義を用意していないので、使用する場合はtailwind.config.jsファイルに項目の追加が必要です。 ブレイクポイントによって要素の表示、非表示の切り替えるには？ ブレイクポイントを使って、要素の属性をhidden↔blockで切り替えます。 blockの状態で要素が表示されます。 <div> <div class="hidden sm:block> A </div> <div class="block sm:hidden"> B </div> </div> あるブレイクポイントを超えたら、Grid表示（横並び）に切り替えたい。 ここでは、幅がlgを超えたらGridを有効化させるよう記述しています。 <div class="lg:grid lg:grid-cols-3"> <div class="sm:col-span-1"> A </div> <div class="sm:col-span-1"> B </div> <div class="sm:col-span-1"> C </div> </div> おわりに ここまで読んでくださってありがとうございました！ tailwindcssの機能を使いこなせば、cssファイルを併用せずにtailwindcss単体で十分にレスポンシブデザインを実現することがわかりました。 ぜひあなたもトライしてみて下さい。
Material-UI + Styled Componentsでスタイリングを少しでも楽に コピペしたいコピペしたいコピペしたいコピペしたいコピペしたいコピペしたいコピペしたいコピペで完結させたい… って常に思ってる。とくにCSS。 細部の調整は必要でもできうる限り楽したい。 できうる限り何とかしてみた。 とはいうもののmaterial-UIもstyled components使った事無いので何回かに分けて使い方まとめる 今回は導入方法絞る ざっくり説明 Material-UI Google が提唱する Material Design に準拠したコンポーネントライブラリ Material-UIのCSSの記述がオブジェクトスタイルがめんどくさい Styled Components CSS 記法のまま CSS in JSを行うことができるライブラリ 今回はこの二つを組み合わせて楽する 使い方 Material-UIのインストール yarn add --save @material-ui/core @material-ui/icons styled-componentsのインストール yarn add --save-dev styled-components @types/styled-components babel-plugin-styled-components cross-env typescript-styled-plugin 上記の詳細は以下 @material-ui/core material-uiのコアライブラリ @material-ui/icons Font Awesomeのmaterial-ui版 (要らないなら省く) @types/styled-components styled-componentsを使ってTypescriptを使うためのライブラリ。 babel-plugin-styled-components styled-componentsのclass名を分かりやすくしてくれるライブラリ。 cross-env MacとWindowsで同じコマンドで環境変数を設定するためのライブラリ。 typescript-styled-plugin VS Code 上でテンプレート リテラル による CSS 定義の入力補完に必要。 引用元
はじめに 副業先でCSSの見直しを行うことになりました。 主に自分の確認用ですが、チーム開発の時の基準になるかもと思い、CSSの命名規則について整理しました。 副業先がBEMを使用しているので、命名規則もBEMを意識したものになっています。 また、入れ替わりの激しい職場ということもあり、共通認識を持ち難い環境のため、ルールをシンプルにすることを優先しております。（結果、class名が冗長になる場合があります） 命名規則 シングルクラスで記述する 複数の単語の組み合わせはケバブケース 単語は省略しない 予測しやすい名称（見た目や場所ではなく意味で） 最初からコンポーネントを意識しない シングルクラスで記述する 1つの要素に対して、1つのclassを指定する（多くても2つまで）。 <!-- OK --> <div class="hoge1">〜</div> <!-- NG --> <div class="hoge1 hoge2 hoge3">〜</div> 複数の単語を組み合わせる時はケバブケース 単語を組み合わせるときは-（ハイフン）使う。 <!-- OK --> <div class="hoge-title">〜</div> <!-- NG --> <div class="hoge_title">〜</div> <div class="hogeTitle">〜</div> <div class="HogeTitle">〜</div> 単語は省略しない class名に使用する英単語は、長くても省略せずに記載する。 （省略する内容に個人差が生まれやすいため） <!-- OK --> <div class="title">〜</div> <!-- NG --> <div class="ttl">〜</div> 予測しやすい名称（見た目や場所ではなく意味で） HTMLの構造や色が変わったときに破綻しないように、できる限り意味でつけるようにします。 意味でつけるようにすることで、なんのstyleかも予測しやすくなると思います。 <!-- OK --> <div class="text-attention">〜</div> <!-- NG --> <div class="text-red">〜</div> 具体的な命名については、A/HC/LC pattern を参考にしています。 Action (A)に相当するものがない場合は、UIや要素の名前を代用しています。 以上です。 最後までお読みいただき、ありがとうございました。 私もまだまだ勉強中で「これだ！」と確信できる部分は少ないものの、ある程度ルールを決めておくことで、見通しの良いデータに近づくのではないかなと思っています。 お世話になったサイト BEM命名をルール化 & HTML5要素を正しく使う CSSの命名規則BEMについて
前書き ReactNativeで開発を行った際に、得たTipsをまとめています。 目次 1.複数のstyleをあてたい 2.要素を上下中央揃えにしたい 3.Androidでshadowが当たらないことがある 4.Android（機種依存かも）でダークモードにするとアプリのstyleが変更されてしまう 5.height、maxHeightを両方充てたのに、最大値がうまく機能しない 6.Androidで文字が見切れてしまう 7.デバイスのサイズを取得する 8.ScrollViewのスクロールバーを非表示にする 1. 複数のstyleをあてたい 用途：その要素だけ、共通のスタイルに加えて個別のスタイルをあてたい // 方法１：オブジェクト <View style={Object.assign({}, style1, style2)}> /* 略 */ </View> // 方法2：配列 <View style={[style1, style2]}> /* 略 */ </View> 公式では、方法２が記載されているので、方法２で記述するのが良いと思います 2. 要素を上下中央揃えにしたい width: '90%', maxWidth: 500, marginLeft: 'auto', marginRight: 'auto', marginTop: 'auto', marginBottom: 'auto', 3. Androidでshadowが当たらないことがある 実際のケース：TouchableWithoutFeedbackタグの子要素のViewに対してshadowを付与したが当たらなかった // 解決策：TouchableWithoutFeedbackとshadowをあてるViewの間にViewを挟む <TouchableWithoutFeedback> <View> <View style={{shadowColor: 'rgba(181,173,165,1)'}}> /* 略 */ </View> </View> </TouchableWithoutFeedback> ※ 実際はshadowColor以外も設定する必要があります 4. Android（機種依存かも）でダークモードにするとアプリのstyleが変更されてしまう 実際のケース：xiaomiのスマホでダークモードに設定すると、アプリの色も変更されてしまった <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your theme here. --> <item name="android:forceDarkAllowed">false</item>" </style> 5. height、maxHeightを両方充てたのに、最大値がうまく機能しない <View style={{ width: (screenWidth > 500 ? 500 : screenWidth) * 0.9, height: screenWidth > 500 ? 300 : 400, }}> ※ maxHeightを使用せずにheightの値を動的に切り替えるように実装を変えました 6. Androidで文字が見切れてしまう 実際のケース：fontSizeとlineHeightに同じ値を指定していた場合、iOSだと正常に見えるがAndroidだと文字が見切れる <Text style={{fontSize: 16, lineHeight: 20}}>Androidで文字が見切れる</Text> Androidの場合はlineHeightを[文字サイズ] * 1.1かそれ以上に指定しましょう 7. デバイスのサイズを取得する /** * Function Componentを利用していて、画面の横向きも考慮する必要がある場合 **/ import { useWindowDimensions } from 'react-native' const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = useWindowDimensions() /** * デバイスの向きを変えたイベントでサイズを取得したくて、Class Component **/ import { Dimensions, ScaledSize } from 'react-native' // スクリーン幅の保存する処理 const handleScreenWidth = (window: ScaledSize) => { this.setState({ screenWidth: window.width }) } componentWillMount() { Dimensions.addEventListener('change', ({ window }) => handleScreenWidth(window)) } componentWillUnMount() { Dimensions.removeEventListener('change', ({ window }) => handleScreenWidth(window)) } /** * デバイスの向きを変えなくてもいい場合 **/ import { Dimensions } from 'react-native' const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window') 8. ScrollViewのスクロールバーを非表示にする <ScrollView horizontal={false} showsVerticalScrollIndicator={false}> /* 省略 */ </ScrollView> ちなみにhorizontal={false}を書いておくと横方向へのスクロールが禁止されます 逐次更新しますー
これは何 要素のレイアウトでdisplay: flexが大活躍している2021年において、floatプロパティをどう使うかを書いた記事です また、記事投稿イベント「3000文字Tips - 知ると便利なTipsをみんなへ届けよう」への投稿記事でもあります リポジトリとGitHub Pages この記事を書くために書いたコードは全て公開しています。 実際の見た目はGitHub Pagesからどうぞ。 画像にテキストを回り込ませたいときが1番使うと思われる このようなレイアウトを組むときにfloatが使えます。 以下に簡略化したコードを載せておきます。 <body> <h1 class="title">floatをあえて使うなら</h1> <div class="container -left"> <img src="https://picsum.photos/160?random=1" alt="" width="160" height="160" class="image -float-left" /> <h2>float: left</h2> <p class="paragraph">Lorem ipsum ~~~</p> </div> <div class="container -right"> <img src="https://picsum.photos/160?random=2" alt="" width="160" height="160" class="image -float-right" /> <h2>float: right</h2> <p class="paragraph">Lorem ipsum ~~~</p> </div> </body> body { background-color: #f2f2f2; display: grid; gap: 16px; grid-template-columns: 1fr 400px 400px 1fr; padding: 32px; } .title { grid-column: 2 / 4; } .container { background-color: #fff; border-radius: 8px; padding: 24px; } .container.-left { grid-column: 2 / 3; } .container.-right { grid-column: 3 / 4; } .container.-two-column { grid-column: 2 / 4; } .image { background-color: #dcdcdc; border-radius: 4px; } .image.-float-left { float: left; margin-right: 16px; } .image.-float-right { float: right; margin-left: 16px; } .paragraph { margin-top: 2px; } 昔ながらの、要素を横並びにする使い方は駄目？ 駄目というほどではありません。 思った通りのレイアウトができて、コードを書く人同士が上手く連携できるなら何も問題は無いはずです。 しかし複数の要素をfloatで横並びにする際、最後の要素のfloatは解除してあげる必要があります。 画像に一律でfloat: left 最後の画像にはfloatをかけていない 実現したいのが左のレイアウトなら良いのですが、どちらかといえば右のレイアウトを意図する方が多いのではないでしょうか？ ちなみに右のコードは以下のように書きました。 <div class="container -two-column"> <img src="https://picsum.photos/160?random=3" alt="" width="160" height="160" class="image -traditional-float" /> <img src="https://picsum.photos/160?random=4" alt="" width="160" height="160" class="image -traditional-float" /> <img src="https://picsum.photos/160?random=5" alt="" width="160" height="160" class="image -traditional-float" /> <h2 class="traditionl-float-headline">横並びとしてのfloat</h2> <p class="paragraph">Lorem ipsum ~~~</p> </div> .image.-traditional-float:not(:last-of-type) { float: left; margin-right: 16px; }
