プロのコーダーによる長文の改行方法はCSSで行うべき?

このQ&Aのポイント
  • プロのコーダーは、仕事の時長い文章を改行したり、インデントを入れたりする方法として、主にCSSを使用します。
  • しかし、br要素や全角空白を使用する方法もありますが、それよりもCSSを使った方法の方が一般的です。
  • したがって、CSSで長文の改行やインデントを行う方法を使用している場合、WEB制作会社で働く際に問題にはなりません。
回答を見る
  • ベストアンサー

プロのコーダーは、仕事の時長い文章を改行したり、イ

プロのコーダーは、仕事の時長い文章を改行したり、インデントを入れたりする時すべてCSSでやるものなのでしょうか? それともbrや全角空白でやったほうが早いのでこちらで良いのでしょうか? 私は下記のようにCSSでやっているのですが、下記のようなやり方でもWEB制作会社で働く場合問題にならないでしょうか? p.indent,dd.indent,dt.indent { text-indent: 1em; margin-top: 0px; margin-bottom: 0px; } p.indentnewline,dd.indentnewline,dt.indentnewline { text-indent: 1em; margin-top: 0px; } dt.indentnewline { text-indent: 1em; margin-top: 0px; padding-bottom: 1em; } p.newline,dd.newline,dt.newline { margin-top: 0px; padding-bottom: 1em; }

noname#226032
noname#226032
  • CSS
  • 回答数2
  • ありがとう数2

質問者が選んだベストアンサー

  • ベストアンサー
  • ak2000
  • ベストアンサー率25% (1/4)
回答No.1

殆どがclassやIDを振ってCSSで処理しますね あとあと調整が面倒ですし全角空白を連続で入れるコーダーは みたことないです(笑) とりあえず最初に*{ padding:0; margin:0; }等ですべてを0にしてから 改めてclass,IDでマージンなどは調整します

noname#226032
質問者

お礼

上記のやり方で問題ないということですね。 ありがとうございます。お忙しい中大変ありがとうございました。 むしろインデントを全角スペースで作るほうが実際の現場でもまずいのですね。

その他の回答 (1)

noname#187595
noname#187595
回答No.2

私もほとんどの場合、cssでします。 だって閲覧する人がフォントサイズを大きく(小さく)したら、へんなところで改行や空白が入っちゃうじゃないですか。 ユーザビリティを良くしようとしたら、フォントサイズをがちがちに固定擦るなんてもってのほかだし。 「プロとして」例外なのは、クライアントが「そうしろ」って強要してきた場合ですかね。 もちろん、そうしたら上記のような弊害がありますよ、オススメできません、って説得した上で、それでもダメだったらですけど。

noname#226032
質問者

お礼

ありがとうございます。お忙しい中大変ありがとうございました。 CSSがよさそうですね。

関連するQ&A

  • 横並びしたいのですが

    横並びしたいのですがdd.sub内のテキストがwidthサイズを超えて2段になった場合や 改行(<br>)を入れた場合それ以降のclear: both;が効かない状態になってしまいます。 dl, dl dd { padding-left: 20px; padding-bottom: 15px; } dl dd.sub { float: left; clear: both; width: 55em; } dl dd.page { margin-left: 55em; margin-bottom: 10px; } <dl> <dt>1 あああ</dt> <dd class="sub">サブ1</dd> <dd class="page">p1</dd> <dt>2 いいい</dt> <dd class="sub">サブ2</dd> <dd class="page">p2</dd> <dt>3 ううう</dt> <dd class="sub">サブ3</dd> <dd class="page">p3</dd> </dl> 理想の並びとしては 1 あああ  サブ1 p1 2 いいい  サブ2 p2 3 ううう  サブ3 p3 のようにしたいのですがCSSをどのようにすれば可能でしょうか? 仮に<dd class="clear"></dd>を追加すれば回り込みの解除はできるのですが 無駄に要素を入れたくないもので他にいい方法はないものかと悩んでおります。

    • ベストアンサー
    • HTML
  • CSSを使ってスクロールバーつきのボックスを作成していますが、設定が一

    CSSを使ってスクロールバーつきのボックスを作成していますが、設定が一部反映されません。 詳しい方ご教授願います!! ・スクロールバーが出ずに指定した高さを超えてデカデカと表示される ・ボックスを囲む線が表示されない ・その他の設定(余白、色、フォント・・・)は指定通り表示される 外部CSSの記述は下記の通りです。 ----------------------------------- #main dl.info { height: 130px; overflow: auto; margin-right: auto; margin-left: auto; padding: 10px; border: 1px solid #cccccc; margin-bottom: 1em; } #main dl.info dt { font-weight: bold; float: left; } #main dl.info dd { border-bottom: 1px solid #cccccc; padding-left: 8em; } ----------------------------------- ちなみに、mainは下記の通りです。 ----------------------------------- #main { float: left; margin-top: 20px; margin-left: 40px; width: 500px; } #main h2 { font-size: 110%; background-image: url(images/h2bg.gif); background-repeat: no-repeat; background-position: bottom; padding-left: 10px; color: #696969; clear: both; } #main p { padding: 2px; } ----------------------------------- htmlファイルへの記述は下記の通りです。 ----------------------------------- <div id="main"> <h2>更新情報</h2> <dl class="info"> <dt>2010/11/11</dt> <dd>ここに文章</dd> <dt>2010/11/11</dt> <dd>ここに文章</dd> <dt>2010/11/11</dt> <dd>ここに文章</dd> <dt>2010/11/11</dt> <dd>ここに文章</dd> <dt>2010/11/11</dt> <dd>ここに文章</dd> <dt>2010/11/11</dt> <dd>ここに文章</dd> <dt>2010/11/11</dt> <dd>ここに文章</dd> </dl> </div> <!--/main--> ----------------------------------- いくら見直しても書き直してみても、直りません・・・ きっと私がどこか抜けているか間違っているのだと思うのですが・・・ 宜しくお願い致します!

  • 改行がある場合不揃いになる

    以下のように改行があっても下線を揃えられる方法ってないでしょうか? <dl> <dt>あああ</dt> <dd>いいい</dd> <dt>ううう<br />ううう</dt> <dd>えええ</dd> <dt>おおお</dt> <dd>かかか</dd> </dl> dl { padding: 0.5em 0; width: 390px; } dl dt { float: left; width: 65px; margin-bottom: 15px; padding: 5px 0 8px 15px; clear: both; border-bottom: 1px dotted #736357; } dl dd { margin-left: 80px; margin-bottom: 15px; padding: 5px 0 8px 10px; width: 289px; border-left: 1px dotted #736357; border-bottom: 1px dotted #736357; } 現在このような状況なのですが改行が入ると下線(border-bottom)がずれるのでバランスが悪く なってしまいます。 全てdlでくくってやれば問題ないのですが上記の場合でも揃えられる方法がありましたら 教えてください。

  • CSSの記述でのクラスの定義で

    CSSの記述の中で .yoko1 { padding : 0 0 5px 10px; border-bottom: 4px solid #00ffff; margin-top: 1em; margin-bottom: 2em; } とクラス名が付いています p.yoko1 { padding : 0 0 5px 10px; border-bottom: 4px solid #00ffff; margin-top: 1em; margin-bottom: 2em; } こっちはタグ名に応じたクラスを定義していますが タグ名に応じたクラスを使用するメリットはなんなのでしょうか? 全てはじめに書いたクラスをしようしても問題はないように思うのですが、、まだ勉強始めたばっかりで疑問に思い質問させていただきました。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • CSS 背景が表示されない、IEでflotが適用されない

    dlタグで3×3のカラムで表示を行いたいのですが上手くいかず困っています。 dlに指定したfloat:left;がFierfox3では適用され横並びにddの内容が表示されるのに対し、EI6ではfloat:left;が適用されず縦並びになってしまいます。 そしてファイルをサーバーにUPした所、文字自体に文字化けも起こります。 背景にいたっては、EI・Fierfox共に表示されず。 と、目も当てられない状態です。 そこで、試しに別のサーバーにファイルをUPした所、float:left;はIEでも問題なく適用され、文字化けも解消されました。 ただ、背景だけは表示されないままでした。 別サーバーにUPした事でIEのfloatが適用され、文字化けも解消たという事は、サーバー固有の設定等に対応していないファイルをUPしてしまっていたと言う事なのでしょうか?それともCSSに問題があるのでしょうか? 背景は何故表示の理由等も含めて、どなたかお分かりの方がいらっしゃいましたらよろしくお願い致します。 -html-------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=Shift_JIS"> <link href="index.css" rel="stylesheet" type="text/css" /> <title>タイトル</title> </head> <body> <div align="center"> <div id="top_box"> <dl> <dt class="name">タイトル</dd> <dd class="comment">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd> <dd class="data">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd> </dl> <dl> <dt class="name">タイトル</dd> <dd class="comment">テキストストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスキストテキストテキスト</dd> <dd class="data">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd> </dl> <dl> <dt class="name">タイトル</dd> <dd class="comment">テキストストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスキストテキストテキスト </dd> <dd class="data">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd> </dl> </div> </div> </body> </html> --css------------------------------------------------ /* CSS Document */ body { font-size:small; font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "MS ゴシック", "Osaka‐等幅"; color:333; background-position: center; background-image:url(images/back.gif); background:#FFF; text-align: center; text-indent: 0px; padding: 0px; margin: 30 0 0 0; } #contents { margin: 0px auto; width: 870px; } form { margin: 0px; padding: 0px; } div { margin: 0px; padding: 0px; font-size:0.9em; color:#666666; letter-spacing:0.08em; line-height:1.4em; } img { border: 0px; } .box { width:745px; text-align:left; } .title { width:870px; text-align:left; } #top_box{ width:800px; height:400px; background-color:#ffffff; } /*font-sizeは固定*/ dl{ margin:0px; margin-left:10px; margin-right:10px; margin-bottom:1em; padding:0px; float:left; width:225px; font-size:12px; border-width:1px 1px 0px; border-style:solid; border-color:#ffffff; } dt{ margin:0px; padding:0px; } dd{ margin:0px; padding:4px 0.5em; border-color::#fff; border-bottom:0px solid; text-align:left; } dd.name{ height:3.0em; } dd.comment{ height:3.0em; background-color:#ffffff; } dd.date{ height:3.0em; border-style:none; }

  • CSS backgroundが反映されません

    CSS初心者です。 CSSレイアウトで問題にぶつかりました。 下記CSSをIE6で見るとbodyに書いた 「background-image:url(images/flower.png); 」が反映されません。 IE10では反映されました。 いったい何故でしょうか。。。 調べてみたのですがいまいち分かりませんでした。 よろしくお願いいたします。 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ * { margin:0; padding:0; } body { background-image:url(images/flower.png); background-repeat:no-repeat; background-position:bottom; background-attachment:fixed; background: rgb(#00000); color: rgb(76, 76, 76); } body{ text-align:center; } div#container { background-image:url(images/sora.jpg); background-repeat:no-repeat; box-shadow: 10px 10px 10px rgba(0,0,0,0.4); #000; box-shadow: 10px 10px 10px rgba(0,0,0,0.4); #000; } div#container{ width: 770px; margin: 0 auto; text-align: left; border: 3px solid rgb(228, 225, 219); } .photo{ margin: 0px; padding: 0px; left: 600px; top: 970px; width: 141px; position: absolute; } .photo2{ margin: 0px; padding: 0px; left: 400px; top: 970px; width: 141px; position: absolute; } p { line-height: 2em; font-size: 0.8em; } .p1{ font-weight: bold; letter-spacing: 0.1em; } .h1{ text-align: center; } h1 span { display:none; } h2 span { display:none; } h3 { line-height: 1.2em; padding-top: 2.4em; padding-bottom: 1em; font-size: 1em; font-weight: bold; } h3 { background-image:url(images/h3.png); background-repeat:no-repeat; background-position:0px 35px; padding-right: 40px; padding-left: 30px; } h2 { line-height: 1.3em; padding-top: 1em; padding-bottom: 1em; font-size: 1em; font-weight: bold; } a{ color:#0000ff; font-style:normal; text-decoration:underline; } a:link { color: rgb(90, 120, 255); font-style:normal; text-decoration:underline; } a:visited { color: rgb(165, 188, 255); text-decoration:underline; } a:hover { color:#ff0000; font-style:normal; text-decoration:underline; } acronym { border-bottom-color: currentColor; border-bottom-width: medium; border-bottom-style: none; } #intro { padding: 0px 79px 0px 86px; } #participation p { padding-right: 40px; padding-left: 10px; } #intro { padding-top: 50px; } #preamble p { padding-right: 40px; padding-left: 15px; } #explanation p { padding-right: 40px; padding-left: 15px; } #preamble { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #explanation { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #participation { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #benefits { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #requirements { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #quickSummary p{ padding-right: 40px; padding-left: 10px; } #footer { text-align: center; line-height: 1.5em; padding-top: 10px; padding-bottom: 40px; font-size: 0.9em; } #footer a:link { color: rgb(133, 126, 112); } #footer a:visited { color: rgb(133, 126, 112); } #footer a:hover { color: rgb(133, 126, 112); } #footer a:active { color: rgb(133, 126, 112); }

    • ベストアンサー
    • CSS
  • このCSSで間違いがありますか?

    下記のCSSで上手く認識しません。 どこか間違いがありますでしょうか? お詳しい方宜しく願います。 table.cal tr td{ padding:2px; border-style:none; color:#575757; } tr.out{ margin:20px 20px 10px 20px; text-indent:0em; font-size :12px; letter-spacing:0.2em; line-height:1.5; color:#575757; } td.outs{ margin:20px 20px 10px 20px; text-indent:0em; font-size :12px; letter-spacing:0.2em; line-height:1.5; color:#575757; }

  • どなたか知恵を貸していただけないでしょうか。

    どなたか知恵を貸していただけないでしょうか。 定義タグを使って以下のような文書を作ってます。 (1)テキストテキストテキストテキストテキストテキストテキストテキストテキスト   テキストテキスト (2)テキストテキストテキストテキストテキストテキストテキストテキストテキスト   テキストテキスト (3)テキストテキストテキストテキストテキストテキストテキストテキストテキスト   てきすとてきすとてきすとてきすと   てきすとてきすとてきすと 1.<dl><dt> ~ </dt></dl>で囲みました。 テキストが長すぎて、改行した時に↓次の行の先頭文字が(1)と同じところまできてしまうので困っています。 (1)テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキスト (2)テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキスト (3)テキストテキストテキストテキストテキストテキストテキストテキストテキスト   てきすとてきすとてきすとてきす   てきすとてきすとてきすと もともとの<dt>タグは改行した時、インデントが次の行にも効かないものでしょうか。 以前は効いていたページもあったのですが、スタイルシートが変わって <dt>タグにいろいろ設定してしまったので、もともとの設定が効かなくなったのでしょうか。 2.<dt><dd>の横並びという方法も考えました。 XHTML <dl class="list309"> <dt>(1)</dt><dd>テキストテキスト......</dd> <dt>(2)</dt><dd>テキストテキスト......</dd> <dt>(3)</dt><dd>テキストテキスト......</dd> </dl> dl.list309 dt { clear: left; float: left; margin: 0 0 0 1em; width: 1em; padding-left: 0px; } dl.list309 dd { margin-bottom: 1em; margin-left: 0.5em; } ところが、(3)の本文中↓で<dd>を使いたいので困っています。 「  てきすとてきすとてきすとてきす    てきすとてきすとてきすと」 いったいどうすればよいでしょうか。

    • ベストアンサー
    • HTML
  • スクロールバーによって表示がズレます。

    下記のようにCSSを書きました。 topとしてテーブルクラス指定した中に、areaの領域をとって内容を流し込んでいるのですが、ブラウザにスクロールバーがつく場合とつかない場合とで表示が中央からスクルーロバー分、広くなったり狭くなったりします。(IEはOKなのですが・・・) どうすれば表示がずれないようにできるでしょうか。 --------------------------------- body { margin-top: 0; margin-right: auto; margin-left: auto; margin-bottom: 0; padding: 0; color: #333333; text-align: center; background-color: #FFFFFF; } #area { padding-top: 2px; padding-bottom: 30px; padding-left: 10px; padding-right: 10px; } table { margin: 0; padding: 0; } table.top { margin-top: 5px; margin-right: auto; margin-left: auto; margin-bottom: 0; width: 780px; text-align:center; background-color: #FFFFFF; } table.top td { text-align:left; vertical-align: top; }

    • ベストアンサー
    • HTML
  • CSSの優先順位について

    うまく説明できるかわかりませんが・・・ XHTMLとCSSでページを作成しています。 デザインは全て外部CSSを参照しているのですが、 トップページだけ、一部個別設定したいと思っています。 リストメニューのデザインを現在このようにしています。(外部CSS) ul{ list-style-type:none; margin-left:0; padding-left:0; padding:0; margin-top:30px; width:120px; float:left } li{ padding-right:10px; font-size:0.75em; margin-bottom:10px; border-bottom:solid 1px #66aa66 } --------------------------------------- トップページだけ、 ul{ list-style-type:none; margin-left:0; padding-left:0; background-color:#efef77; padding:3px 20px; margin-top:0 } li{ display:inline; padding-right:10px; font-size:0.75em } ----------------------------------- この設定にしたいので、トップページヘッダーにこちらを入力しました。(外部CSSよりヘッダーを優先するとテキストに書いてありました) しかし、 li{ display:inline; } だけは、外部CSSを参照してしまいます。 なぜでしょうか?? 優先させる為に li display:inline !important; } としてみましたが、ダメでした。 どなたかご教授願いますm(__)m

専門家に質問してみよう