@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.eot);
  /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
    url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
    url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}

/* 幅の制限を設定する
html{max-width:900px; margin:0 auto; background: #eee; position: relative;
} */


/* boxの角を丸くする */
.box1 {
border-radius:10px;
}

.box2 {
border-radius:30px;
}

.scroll table{
width:100%;
}
.scroll{
overflow: auto;　　　　/*tableをスクロールさせる*/
white-space: nowrap;　　/*tableのセル内にある文字の折り返しを禁止*/
}
.scroll::-webkit-scrollbar{　　/*tableにスクロールバーを追加*/
 height: 5px;
}
.scroll::-webkit-scrollbar-track{　　/*tableにスクロールバーを追加*/
 background: #F1F1F1;
}
.scroll::-webkit-scrollbar-thumb {　　/*tableにスクロールバーを追加*/
 background: #BCBCBC;
}

 /* フォントサイズ */
.font1 {
 font-size: 10px;
}

.font2 {
 font-size: 6px;
}

 /* 文字装飾 */
.frame1 {
  font-size: 14px;
  color: red;
  border: solid 1px red;
  padding: 0 4px 0 4px;
  border-radius:4px;
}


 /* css追加練習　開始 */
 /* lavender */
.bg-maincolor {
  background-color: #e6e6fa !important;
}

 /* YWV会報カラー */
.bg-ywvcolor {
  background-color: #76923c !important;
}

.bg-mytheme {
  background-color: #007bff !important;
}

a.bg-mytheme:hover, a.bg-mytheme:focus,
button.bg-mytheme:hover,
button.bg-mytheme:focus {
  background-color: #0062cc !important;
}
  
.px {
  font-size: 40px
}
.em {
  font-size: 1.5em
}  
  
.hr1 {
 height: 4px;
 color: orange;
 width: 90%;
 margin: auto;
 border: none;
}

 /* テーブル */
table{
  border-collapse:collapse;
  border: 2px solid green;
}

th{
    border-bottom: 1px solid green;
    border-right: 2px solid green;
}

td{
    border-bottom: 1px solid green;
    border-right: 1px solid green;
}

table th {/*table内のthに対して*/
  padding: 10px;/*上下左右10pxずつ*/
}

table td {/*table内のtdに対して*/
  padding: 3px 10px;/*上下3pxで左右10px*/
}

/* テーブル end */
 /* css追加練習　終了 */ 

 /* リンク箇所にアンダーラインを入れない */
a{
text-decoration: none;
}

 /* カーソルを置いた時だけアンダーラインが入る、は適用しない
a:hover {
text-decoration: underline;
}
 */

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  /* Preferred icon size */
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  display: inline-flex;
  vertical-align: middle;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

/***追従するトップへ戻るボタン start ***/
#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 0;
  bottom: 0;
  background: #198754;
  opacity: 0.6;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

/***トップへ戻るボタン end ***/ 

/***横スクロール***/ 

.scroll table{
width:100%;
}
.scroll{
overflow: auto;　　　　/*tableをスクロールさせる*/
white-space: nowrap;　　/*tableのセル内にある文字の折り返しを禁止*/
}
.scroll::-webkit-scrollbar{　　/*tableにスクロールバーを追加*/
 height: 5px;
}
.scroll::-webkit-scrollbar-track{　　/*tableにスクロールバーを追加*/
 background: #F1F1F1;
}
.scroll::-webkit-scrollbar-thumb {　　/*tableにスクロールバーを追加*/
 background: #BCBCBC;
}


/* Rules for sizing the icon. */

.material-icons.md-36 {
  font-size: 36px;
}

.text-shadow {
  text-shadow:1px 1px 3px #000;
}
  
.table > :not(caption) > * > * {
  vertical-align: middle;
}

/* フローティングメニュー */

.floating-nav {
  position: fixed;
  width: 50px;
  right: 0;
  top: 10%;
  cursor: pointer;
}

.floating-nav a {
  color: white;
  writing-mode: vertical-rl;
  text-orientation: upright;
  text-decoration: none;
}

<style type="text/css">
.showbox {
   display: inline-block;
}
.showbox p {
   text-align: center;
}
.showbox img {
   border: 2px solid skyblue;
}
</style>