-
1:ID:1UjfKc · 2018-02-21

正直今時だめなのはわかってるんだけど、PC版のときは画像テキスト・スマホのときは打ち文字テキストっていうコーディングをする予定です。以前はPCの画像はbackground要素としてPC用CSSに指定、テキストはPCの場合は非表示、スマホの場合は表示とdisplayで切り替えていました。しかしこの方法はあんまりにもあんまりかなと思って最近はどういったコーディングがいいのかお聞きしたいです。
本当はテキスト部分はwebフォントを使いたいのですが、予算の都合でできない状態です。

13 件の回答

2:ID:Tgz512 · 2018-02-21

状況がよくわかんない。
背景消すだけなら、displayとか要らないんじゃない?

3:ID: · 2018-02-21

PCの場合:画像(テキストを画像にしたもの)を表示する
スマホの場合:テキストを表示する

という表示にしようとしている。
スマホの場合はPCで使用した画像を消さなければいけない。
PCの場合はスマホ時に表示するテキストを非表示にしないといけない。
最近はWEBフォントが普及してるから見出しテキストを画像にすることなんてあまりないけど、ちょっと前はよくあった。

ごめん、説明下手かな…。

4:ID:Tgz512 · 2018-02-21

Re:3
あー、なんとなくわかったけど、下記のような事なら、文字はspanで囲ってdisplay:none; でいいんじゃない?
<h1><img ... alt="タイトル">タイトル</h1>

<h1><img ... alt="タイトル"><span>タイトル</span></h1>

コーディングを気にするなら、画像やめてテキストにしたらいいのに。

5:ID:N7xHqY · 2018-02-21

SVGにしたらええやん

6:ID:6Fi4ze · 2018-02-22

Foundationに、interchangeって機能あるよ。これだけ抽出して使うこともできる。
JSで書き換えるけど、ソースコード汚さないしフォールバックもできるから、主さんの要望に近いんじゃないかな、と思う。

https://foundation.zurb.com/sites/docs/interchange.html

7:ID:GcTSao · 2018-02-22

Re:6
フレームワークありなら、べつにfoundationじゃなくてもいけるでしょ。
結局jsだし。

8:ID:6Fi4ze · 2018-02-22

Re:7
「これだけ抽出して使える」って言ってるので、フレームワーク使えとは言ってないよ。
むしろこの手の実装するのにinterchange以上に痒いところに手が届くのあるんだったら教えてほしい。
ってか、JS使っちゃいけないシバりなの? この話って?

9:ID:GcTSao · 2018-02-22

Re:8
縛りが無い話なら、この主フレームワークやJS知らねえって事か?

>正直今時だめなのはわかってるんだけど、
>あんまりにもあんまりかなと思って
つーか、日本語もむかつくんだよ。

10:ID:6Fi4ze · 2018-02-22

Re:9
なんで君そこまでイライラしてんの?
まあ落ち着けよ

11:ID:gXsk0t · 2018-02-22

わたしもPCとスマホのをどっちも書いて、
画面サイズで区切ったdisplay:none;のクラスを置いてます・・・

12:ID:oHI5SI · 2018-02-23

media queryが使えないということ?

13:ID:NR5iKf · 2018-02-24

Re:5
問題解決になってない

14:ID:Ro3alA · 2018-02-24

スマホもPCも幸せやろRe:13

コメントの受付は終了しました。

一緒に読まれている質問

ページ上部に戻る