セカヤサブログ世界で一番初心者に優しいWeb制作のメディア。HTML/CSS/JavaScript、WordPress、Web制作の考え方を解説します。コピー2022.08.13こんにちは。昨今プログラミングやコーディングにおいて様々な情報が見られるようになりました。そんな環境でもまだまだ学習と仕事、案件には差があるように思います。そこでこの記事では、実際に案件で求められることの多い細かなコーディングのテクニックをまとめていこうと思います。それぞれデモサイトを載せており(説明することが少ない場合を除く)、紹介したテクニックを「使っていない状態」と「使った状態」を対比させる形になっています。紹介するコードもこのデモサイトのものです。コードは全部をベタで載せると記事が非常に長くなるので一部開閉する形式にしています。解説も長くなりがちなので、場合によっては後々別記事にまとめ直すかもしれません。項目は思いつき次第、または要望次第で追加していくつもりですのでよろしくお願いします。項目と内容を大幅に加筆、修正したものをzennさんの本として公開しました。お手に取ってみてください。loadingコード要素のサイズを完璧にレスポンシブにするまとめ要素の比率を維持する少し古いSafariを無視できるならaspect-ratioを使いましょう。*/}しかし残念ながら、多くの場合そうもいかないでしょう。そこでpadding-topを使った方法を紹介します。padding-topは%で指定を行う時、親要素の横幅を基準にします。よって以下のように指定すると比率を維持した要素が作れます。padding-topを使っているということは中の要素はその分下に押し出されます。そこでpositionを使って中の要素の位置を調整します。ブログサイトの記事一覧におけるサムネイル画像ですね。管理画面から投稿される画像は、まちまちのサイズになります。どんなサイズの画像が投稿されても比率が崩れたりしない方がいいですね。20px;}まずimgタグのサイズを決めます。次にobject-fitで画像のサイズを、object-positionで画像の位置を決めます。ほとんどの場合object-fitはcoverが望ましいでしょう、imgタグに余白が出ないように画像が広がります。object-positionは要件によりけりですね。前述の比率維持の方法と組み合わせても良いです。20px;}長いアルファベットの文字列でも改行させる長いアルファベットは、それで1単語と見なされてしまい改行が起こりません。デフォルトでは単語の途中で改行するルールになっていないからです。このケースは記事のタイトルなど、ユーザーが投稿できうるコンテンツにありがちです。いう場合では改行ルールをCSSによって指定しましょう。overflow-wrapというプロパティを使います。break-word;を指定すると長いアルファベットでも強制的に改行を行います。break-all;という指定もよく紹介されていたと思いますが(この記事でも元々はそちらでした)、その指定では単語の途中でも問答無用で改行してしまいます。break-word;はなるべく単語の途中では改行しないようにします。読みやすさの観点でこちらの方が良さそうですね。3点リーダーによる文章の省略これも記事一覧のタイトル、ないしは抜粋部分にありがちな要求ですね。文章が長くても、レイアウトを崩さないようにしたい場合があります。いう時は、行数を指定してそれ以上の部分は3点リーダーで省略することができます。親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。そんな無闇をしたと聞く人があるかも知れぬ。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。