質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.52%

  • JavaScript

    16348questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    8930questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    5758questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

PCとスマホで文章を変える方法はあるのでしょうか?

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 630

Sky_Hat

score 5

cssでサイズ指定をして、そのサイズの時は設定を変えるという事は可能ですが、
文字も同じように変更は可能なのでしょうか?

具体的にやりたいことは、
・PC => 文字に改行をいれない
・スマホ => 文字に改行をいれる

ということがしたいです。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

+5

はい、可能です。
スマホサイズの場合のみ文字に改行をいれたい場合、スマホサイズ以上になったらBRタグが非表示になるようなCSSを書いて下さい。

<html>
<head>
<style>
@media (min-width: 600px) {
  .responsive-visible {
    display: none;
  }
}
</style>
</head>
<body>

<div>hello. <br class="responsive-visible"> world.</div>

<div class="responsive-visible">スマホ表示中</div>

</body>
</html>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/04/03 16:49

    ご回答、ありがとうございます。

    自分のやりたいことを実現するのに一番簡単な方法であり、
    一番早く、回答して頂けたのでベストアンサーとさせて頂きました。

    キャンセル

+3

質問者さんの実現したいことは、javascript, jQueryならば以下のように行うことができると思いますが、いかがでしょうか?
javascript

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>タイトル</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<div id="box1">
    テキストテキストテキスト<br>
    テキストテキストテキスト<br>
    テキストテキストテキスト
</div>
<script>
    let text = "";

    document.addEventListener("DOMContentLoaded", function () {
        text = document.getElementById("box1").innerHTML;
        document.getElementById("box1").innerHTML = (window.matchMedia("(max-width: 800px)").matches ? text : text.replace(/<br>/g, ""));
    });

    window.matchMedia("(max-width: 800px)").addListener(function () {
        document.getElementById("box1").innerHTML = (window.matchMedia("(max-width: 800px)").matches ? text : text.replace(/<br>/g, ""));
    });
</script>
</body>
</html>


jQuery

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>タイトル</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<div id="box1">
    テキストテキストテキスト<br>
    テキストテキストテキスト<br>
    テキストテキストテキスト
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
    $(function () {
        let text = $("#box1").html();
        $(window).on("load resize", function () {
            (window.innerWidth > 800) ? $("#box1").html(text.replace(/<br>/g, "")) : $("#box1").html(text);
        })
    });
</script>
</body>
</html>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/04/03 16:54 編集

    ご回答、ありがとうございます。
    javascript、jQueryを学習中でしたので、こちらの方法は大変参考になりました。
    ありがとうございます!

    ただ今回は、自分のやりたいことに最短距離で辿り着く方法を提示して頂いた、
    他の方をベストアンサーとさせて頂きました。
    大変、申し訳ありません。

    今回は改行をどうにかしたかったのですが、
    タイトル通りに文章を変更するとなった場合には有効ですので、応用力は上かと思います。
    なので、こちらの方法も覚えておこうかと思います。

    キャンセル

  • 2017/04/03 16:58

    javascriptの方もjQueryの方も試しまして、どちらも上手く行きました。
    javascript、jQueryを使用しての実現方法を教えて頂きありがとうございます!

    キャンセル

+2

わたくしの場合は、出来るだけソースを汚したくないので、

@media only screen and (max-width : 767px) {
  #box p span {
    display:block;
  }
}
<div id="box">
  <p>テキスト<span>改行させるところを囲む</span></p>
</div>


のようにしています。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 解決済

    PHPでブール型のサイズは何になりますか?

    PHPでブール型のサイズは何になりますか? 整数のサイズは、下記の定数で確認できます。 PHP_INT_SIZE ブール型だとどうなるのか教えて下さい。宜しくお願いします。

  • 受付中

    Android 画面デザインについて

    Androidのボタンの大きさについて質問です。Gravityがcenterなのに、画像の通り、真ん中に表示されません。プレビューだとうまくいくのですけれどね、、、 どうしてでしょ

  • 解決済

    Swift addSubviewしたボタンのサイズ変更か、消す方法を教えてください

    以下の操作で追加した、ボタンのサイズを変更するか、一度消して再描画したいんですが、消せない、サイズも変えられない•••どうしたらいいのでしょうか? button11からbutto

  • 解決済

    PHP ファイルアップロードについて

    PHP.iniの設定でサーバーにファイルをアップする容量を決める upload_max_filesizeの部分の数値を上げれば、アップできる容量を増やす事ができるのですが、他人のシ

  • 解決済

    PHPのlog_errors_max_lenが効いていない

    サーバのフォルダが100%になってしまい 原因を調べた所、PHPのエラーログが50GBにも膨れ上がっていました php.iniは以下のとおりとなっております log_er

  • 解決済

    BufferedImageで画像のコピー

    javaでbufferのreadで読み込んだ画像をwriteにコピーするようなプログラムを作りたいです。(この後からwriteにsetRGBでさらに色を変えたいので作っています。)

  • 受付中

    [iOS] UIImageがメモリを多くとってしまう。

    開発も終盤にさしかかり、メモリをウォッチし始めたのですが、あるタイミングでメモリ使用量が跳ね上がるので何が原因か探ると、UIImageVIewでした。 カメラロールから取得し

  • 受付中

    XCode iOSエミューレが小さく表示されてしまう

    今日、久しぶりにXCodeを起動して、作りかけのアプリを実行したら iOSエミュレータが小さく表示されるようになってしまいました。 元の大きさに戻す方法がわかりません。 同じ

同じタグがついた質問を見る

  • JavaScript

    16348questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    8930questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    5758questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。