20211008のHTMLに関する記事は4件です。

【HTML】戻るボタンの実装方法

はじめに 戻るボタンを実装する機会はかなり多いと思うのですが、そのときのための備忘録として残しておきます。 戻るボタンの実装 aタグでの実装 HTML <a href="javascript:history.back();">戻る</a> buttonタグでの実装 HTML <button type="button" onclick="history.back()">戻る</button> type="button"をちゃんと記述しないと、デフォルトでtype=submitとなってしまうので要注意!! formタグでの実装 HTML <form> <input type="button" onclick="history.back()" value="戻る"> </form> おわりに すべてHTML内の実装したい箇所に記述すれば良いので簡単ですね。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

スマホブラウザで「:hover」疑似クラスを無効にする

Web制作持によく使われる:hover擬似クラスですが、レスポンシブ対応させたWebページで タップ操作しかないスマホブラウザでは:hoverのスタイル変化を無効にしたいという場合の実装法です。 めちゃくちゃシンプルですが、 @media screen and (min-width: 600px) { a:hover{ } } のようにメディアクエリの(min-width: ***px)でスタイルを適用する最低画面幅を設定し、 その中で:hoverのスタイルを定義します。 上の例では「600px以上の画面幅があるときは<a>に:hoverを適用してね」ということなので、厳密には「スマホブラウザのみで無効にする」というわけではありませんが、実際問題的にはスマホ表示時には無効にできると思います。 以上、個人的備忘録失礼しました。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

スマホサイトで「:hover」疑似クラスを無効にする

Web制作でよく使われる:hover擬似クラスですが、レスポンシブ対応させたWebページで タップ操作しかないスマホブラウザでは:hoverのスタイル変化を無効にしたいという場合の実装法です。 めちゃくちゃシンプルですが、 @media screen and (min-width: 600px) { a:hover{ } } のようにメディアクエリの(min-width: ***px)でスタイルを適用する最低画面幅を設定し、 その中で:hoverのスタイルを定義します。 上の例では「600px以上の画面幅があるときは<a>に:hoverを適用してね」ということなので、厳密には「スマホブラウザのみで無効にする」というわけではありませんが、実際問題的にはスマホ表示時には無効にできると思います。 以上、個人的備忘録失礼しました。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

PHPで\nを改行させる方法

PHPだと文字列に\nが入っていても改行されない。 ただの空白として出力される。 解決方法 $summary = "abc\ndef\nghi"; //改行されない通常のコード echo($summary); //改行されるコード echo(nl2br($summary)); nl2br関数を使うと、stringに含まれるすべての改行文字(\r\n,\n\r,\n,\r) の前に<br />あるいは<br>を挿入して返してくれる。 参考
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む