小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。*/}後ろ4行が省略のためのコードです。-webkit-line-clampが行数を決めていて、1行で省略させたければ1を、3行で省略させたければ3を指定しましょう。詳しくはこちらの記事をご覧ください。【複数行対応】たった4行のCSSで、長すぎる文章を3点リーダーで省略するこんにちは。ブログサイトを作るとき、記事一覧にタイトルや本文の抜粋が載っていると思います。それらの文章が長すぎるとレイアウトを崩す原因になってしまいますから、何らかの方法で省略をする必要があります。バックエンドアプリケーション側で...itokoba.com2022.04.13改行を考慮したline-heightの指定これは記事や利用規約ページの見出しにありがちです。見出しは、ある程度のサイズの画面で見れば1行だが幅を縮めていくと2行になる、というケースがよく起きます。その場合にline-heightが指定していないと見栄えが微妙になることがあります。改行もきちんと想定しておきましょう。見た目デモはこちらコードコードはただline-heightを指定するだけなので、割愛します。line-heightの余白を打ち消すline-heightは文章の上下に余白を作ります。8px分を上下に分けます。4pxづつ余白が生まれます。デザインファイル上では上下の余白がない形で置かれているケースが多いです。いうわけで、この余白分を考慮しないとデザイン通りの数値を使ってもズレが発生することになります。やり方は説明すると大変長いので詳細は別記事に譲る(後述)として、まずは見た目とコードをご覧ください。親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。そんな無闇をしたと聞く人があるかも知れぬ。親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。そんな無闇をしたと聞く人があるかも知れぬ。見た目の部分、特にグレー背景の上下をよく見てください。余白の調整をしたパターンは文章部分の上下の余白がなくなり、背景色がぴったりになっています。htmlを2重にして、親側(=.Text2)には上下に透明のborderを指定します。子側(=.Text2__Inner)には打ち消したい余白分の負のmarginを上下に設定します。これの計算がまあややこしいんですが、以下の形です。-1;詳しい解説は以下の記事から。line-heightの邪魔な上下の余白をこの世から消すこんにちは。html上のテキスト、文字の行間を調整するcssプロパティ、line-heightってありますよね。記事の見出しや、トップページの各セクションにおける見出しでありがちな実装です。通常、日本語の文章の場合改行は1文字づつ起きます。文章の内容によっては、できれば単語の途中で改行はしない方がいいケースがあります。利用規約ページがイメージしやすいでしょうか。(参照:https://qiita.com/terms)利用規約ページのような、おしゃれさやデザイン性が重視されないページでどこまで改行を気にすべきかはさておき、「本規約に」と「ついて」の間で改行してくれた方が読みやすくはなるでしょう。要するにこのようなケースのことを指します。見た目デモはこちらこのように、任意のブロックごとに改行させることができます。>とても長い文章を見出しに使いたい場合に、今回の方法は使えます。class="InlineBlock">使えます。inline-block;}このように、改行の単位にしたいものをspanタグで囲いinline-blockにします。これで改行をうまく制御できます。マークアップ的にも問題ないはずです。アクセシビリティ面で若干問題があり、読み上げツールがspanタグで区切った部分をそのまま変に間を空けて読んでしまうようです。よって、現状は改行の見やすさと読み上げのスムーズさがトレードオフになってしまっているのでその点だけ注意してください。(両取りできる方法があればぜひコメントで教えてください。)文章を両端揃えする要するに、こういうことです。justify;一部注意しないと見た目が崩れるケースもありますが、詳しくは以下の記事をご覧ください。【両端揃え】たった1行のCSSで文章の見栄えを美しくするこんにちは。今回はHTML上でどのように文章の両端揃えを行うかを解説します。指定はとても簡単で、1行追加するだけです。これだけで両端揃えを実現できます。英語や数字が混ざっていても概ね...itokoba.com2021.11.04letter-spacingを使った時のズレletter-spacingといえば文字の余白を調整するプロパティですが、文字の右側に余白を作る仕様になっています。最後の文字でも余白を作るので、単にletter-spacingだけを指定すると中央に揃わなくなります。中央揃えにする場合は、padding-leftで同等の余白を追加しましょう。3em;}このように、letter-spacingと同じ数値をpadding-leftに指定すれば文字の位置がいい感じに揃っていますね。実際はここまで大きいサイズのletter-spacingを指定することはないので、微調整してあげるような形になります。ハンバーガーメニューが開いている時に裏のスクロールを止めるハンバーガーメニューの開閉自体は作れるという方は多いと思いますが、裏のスクロールを止める実装はちゃんと毎回していますか?意外と世の中のサイトでも、この実装がされていないケースはよく見ます。裏のスクロールを止めた方が絶対的に良いとまで言い切るのはちょっと怪しいのですが、せっかくなら覚えておきましょう。ちなみに、ハンバーガーメニュー自体の作り方も解説しているので以下からご覧ください。【徹底解説】5歳でも分かる、ハンバーガーメニューの作り方(jQuery編)こんにちは。今回はヘッダーのメニューとして良く使われるハンバーガーメニューの作り方を徹底的に解説していきます。この記事は僕が書いている5歳でも分かるシリーズの1つです。こちらにスライドショーやタブメニューなどの作り方も載っていますのでぜひ...itokoba.com2021.10.20以下で紹介する方法も上記の記事で詳しく解説しています。hidden付け外しです。hidden;になるようにします。この実装にはJavaScriptが必要です。hidden;になるとスクロールができなくなるため、それを利用しています。loadingこれはいわゆる画像の遅延読み込みです。近くまでスクロールされて初めて画像を読み込むことにより、全体の表示速度を改善するための手法です。昔はJavaScriptのライブラリなどでなんとか実現していましたが、今はHTML側が進歩し非常に簡単に実現できるようになりました。/>このようにimgタグのloading属性にlazyを指定するだけです。他にも実装方法があり、content-visibilityプロパティを使う方法などがあるようです。参考:https://techblog.yahoo.co.jp/entry/2020090830016393/なお、どの方法でもSafariは非対応の模様。要素のサイズを完璧にレスポンシブにするレスポンシブ対応する時に、どうしても綺麗に要素が収まらない時ってあると思います。いう時にブレイクポイントを追加しないで綺麗に表示できる方法があります。結論から言えば以下の形です。650px)詳しくはこちらの記事をご覧ください。皆さんは、レスポンシブ対応の時にどうしてもデザイン通りに要素が収まらず仕方なくブレイクポイントを追加して対応したことはありませんか?僕はあります。気をつけないとすぐ要素がはみ出したり重なったりしますよね。装飾が賑やかなほど起こりやすい傾向...itokoba.com2022.08.17まとめというわけでコーディングテクニックのまとめでした。他にこんなケースの解説があったら嬉しいというものがあればぜひコメントでお知らせください。プログラミングを学ぶのに本はいらないのか【おすすめの本も紹介】こんにちは。ここ数年、各種言語に関してはWebだけでも相当いろんな教材や記事が見られるようになりました。fixed;が効かない理由を暴くこんにちは。fixed;が効かない理由とその対処法をまとめていきます。こんなヘッダーを作ろうとしています。...2021.12.09HTML/CSSを学ぶHTML/CSSを学ぶ【効かない原因を完全解明】aspect-ratioの正体を暴くみなさんこんにちは。HTML/CSSにおいて、4:3や16:9など比率を維持した要素を作ることは長年の課題でした。padding-topを使ってハック的に比率を維持する方法(記事の最後に軽く紹介します)が使われていましたが、少し前...2023.12.20HTML/CSSを学ぶHTML/CSSを学ぶmarginとpaddingの違いと正しい使い分け方を完全解説こんにちは。marginとpddingって、どちらも余白を作るCSSプロパティですよね。そんなmargi...2024.08.27HTML/CSSを学ぶHTML/CSSを学ぶ要素をコンテンツ幅をはみ出して画面いっぱいにするスマートな方法こんにちは。今回はデザインで時々見かける、「コンテンツ幅は決まっているけど一部の要素は画面いっぱいになる」デザインのスマートな実装方法を紹介します。次の画像のようなレイアウトです。type=”date”で、どこをクリックしてもカレンダーが表示されるようにする。今回はinputタグについてです。最近仕事で出くわしたので紹介します。(ブラウザによっては動作しない可能性があります。Grid編)みなさんこんにちは。先日、widthの基本について徹底的に解説しました。gridなどと組み合わさった場合について解説していこうと思います。上記の記事をまだ読ん...2023.09.05HTML/CSSを学ぶスポンサーリンク駆け出しエンジニアを自称する諸君。プログラミングを学ぶ前に、そのナメた根性を叩き直しなさい。あと日本語も勉強して。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。秀樹フリーランス8年目|「世界一初心者に優しい」→セカヤサ。初心者が5年後も10年後も仕事を奪われない人になるための発信中。最新情報まとめWeb制作役立ちツールホーム検索トップサイドバータイトルとURLをコピーしました。