常連

注目の的

質問力

自己紹介

### 前提・実現したいこと
<td>タグの中での改行をしたいんですが、<br>タグは使えるが、好ましくないというサイトを見かけました。

例えばですが、以下のコードで「長文が入力されています。」の中で「長文が」のあとに改行「入力」の後に改行を行って、1つの<td>に3行表示される状態を作り出す事は可能でしょうか？

一定の幅を超えたら文字が折り返すのではなく、自分が決めた文字で折り返すような感じにしたいです。

難しいのであれば、1つの<td>に3行ではなく、3つの<td>を作るべきでしょうか？



### 該当のソースコード

```html
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
</head>

<body>
  <table border="1">
    <tr>
      <th>長文が入力されています。</th>
      <th>長文が入力されています。</th>
    </tr>
    <tr>
      <td>長文が入力されています。</td>
      <td>長文が入力されています。</td>
    </tr>
    <tr>
      <td>長文が入力されています。</td>
      <td>長文が入力されています。</td>
    </tr>
  </table>
</body>
</html>

```

<td>タグの中で改行をしたい場合、<br>タグは使えない？

https://teratail.com/questions/92746#reply-144477
の続き


投稿型のWEBサービスをphpとjsで作りたいのですが、不正アクセスや改ざんウイルスによって、損害賠償請求をされる可能性があると聞き、どうしたらよいか迷っています。

とりあえず初めてなので、inputなどに閲覧者が入れた内容を取得しDOM生成してページ上に表記されればいいのですが、セキュリティ面も考えるとフレームワーク必須でしょうか？

http://ysktec.com/shiguregaki/blog/?p=1329を参考に
laravelをやり始めたのですが、ちょっとした投稿型のWEBサービスを作りたいだけなのに
かなりDBをいじったりlaravel特有のルーティングなどかなり大変です。

PHPはJSと違って、生のコーディングをすることはほぼないと聞いたので、
フレームワーク特有の面で難しくて大変でも、初級本をやったら、生で投稿型のWEBサービスを作ってみるのではなくいきなりフレームワークをやった方がいいのでしょうか？

それとも初級本をやった程度ではとても無理で、フレームワークを少しオリジナルの機能に変更する際に生のphpのソースを変更しないといけないので、まず生で作ってみて、危険なので質問サイトに、
ソースを公表して問題ないか確認してもらいながらサービスを始めてみるのがよいでしょうか？

生のphpを使う事なんて今時ないと聞いたのですが、それは、生のソースはわからなくても使わないから良いという事ではないのですよね？
フレームワークもちょっとオリジナルにいじる場合はlaravel特有の関数、文法ではなくあくまで生のｐｈｐ
の関数、文法で変更するのですよね。

ワードプレスは、プラグインをちょっといじったり、導入したりする際に、Laravel特有の関数ではなく生のｐｈｐの関数文法で行うと聞きます。

そう考えるとワードプレスを使うならやはり生では何も作らずlaravel特有の関数文法だけ覚えても、ワードプレスが出来るようにならないので、どちらでも対応できる生のphpだけまず行い、その後Laravelをやる方が、王道なんですかね。

投稿型のWEBサービスをphpとjsで作りたいのですが、セキュリティ面が心配です。

#1.実現したいこと
スクロールすることでグローバルナビエリアがウィンドウ上部に固定され、ヘッダー高さが縮小される

#2.現状の問題
グローバルナビを固定したいタイミングでclassをつけることで上記を実現しています。
グローバルナビが固定されたタイミングでコンテンツにグローバルナビの高さ分余白をつけることでスクロールのスピードが早い場合は違和感なく表示されるようにしています。
現状の問題点として、グローバルナビが固定された位置からわずかにスクロールされた場合、グローバルナビの高さが取得できず（console.logにて出力し確認すると縮小前の高さしか取得できていませんでした）、余白ができてしまう状態です。上記の問題を解決したく質問させていただきました。
![イメージ説明](b20cb7c07f4f856de5dfe12a57da56d9.png)

#3.コード
```HTML
<body>
	<div class="wrapper">
		<header id="header" class="">
			<div class="header-nofixed">
				<p>非固定エリア</p>
			</div>
			<div class="header-fixed">
				<nav class="header-nav">
					<ul class="header-nav-links clearfix">
						<li><a href="#section1">section1</a></li>
						<li><a href="#section2">section2</a></li>
						<li><a href="#section3">section3</a></li>
						<li><a href="#section4">section4</a></li>
					</ul>
				</nav>
			</div>
		</header>
		<div class="main">
			<section class="section-wrap" id="section1">
				<div class="contents-outer">
					<p>---section1---</p>
				</div>
			</section>
			<section class="section-wrap section-sec" id="section2">
				<div class="contents-outer">
					<p>---section2---</p>
				</div>
			</section>
			<section class="section-wrap" id="section3">
				<div class="contents-outer">
					<p>---section3---</p>
				</div>
			</section>
			<section class="section-wrap section-sec" id="section4">
				<div class="contents-outer">
					<p>---section4---</p>
				</div>
			</section>
		</div>
		<footer  id="footer">
			<div class="footer-inner">
				<p>&copy; xxx.All Rights Reserved.</p>
			</div>
		</footer>
	</div>
</body>
```
```css
@charset "UTF-8";
.contents-outer {
    min-width: 1280px;
    padding: 0 40px;
    margin: 0 auto;
}
/* ---- common ---- */
img {
	width: 100%;
	height: auto;
}

/* ---- header ---- */
#header .header-nofixed {
    padding: 5em 0;
    background-color: #ffffff;
    text-align: center;
}

#header .header-fixed {
    padding: 1.5em 2em;
    background-color: #dddddd;
    transition: 0.5s all ease;
}

#header .header-nav {
    display: flex;
    align-items: center;
    justify-content: center;
}

#header .header-nav ul li {
    float: left;
    padding: 0 2em;
}

/* ナビゲーションfixedスタイル */
#header .header-fixed.fixed {
    width: 100%;
    min-width: 1280px;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0.7;
    padding: 0.5em 0.5em;
}

/* ---- footer ---- */
#footer {
    position: relative;
}

#footer .footer-inner {
    width: 100%;
    padding: 1em 2em;
    background-color: #dddddd;
    text-align: center;
}

/* ---- contents ---- */
.section-wrap {
    background-color: skyblue;
    text-align: center;
    height: 700px;
}

.section-wrap.section-sec {
    background-color: #ffffff;
}

```
```JavaScript
$(function() {
	var $win = $(window);
	var $doc = $(document);
	var $header = $('#header');
	var $header_nofixed = $header.find('.header-nofixed');
	var $header_fixed = $header.find('.header-fixed');
	var $main = $('.main');

	// スクロール量
	var win_sc = $win.scrollTop();

	// 非固定エリア高さ
	var header_nofixed_height = $header_nofixed.outerHeight();

	// グローバルナビ高さ
	var nav_height = $header_fixed.outerHeight();

	function navFixed() {
		win_sc = $win.scrollTop();

		if (win_sc > header_nofixed_height) {
			$header_fixed.addClass('fixed');
            $header_fixed.css("left",-$win.scrollLeft());

            nav_height = $header_fixed.outerHeight();
			$main.css('padding-top',nav_height + 'px');
		} else {
			$header_fixed.removeClass('fixed');
			$main.css('padding-top','0');
		}
	};

	$win.scroll(function() {
		navFixed();
		showTopBtn();
	});

	$win.resize(function(){
		header_nofixed_height = $header_nofixed.outerHeight();
		nav_height = $header_fixed.outerHeight();
		navFixed(header_nofixed_height,nav_height);
	});


});

```