css 斜め線の入った見出し
パターン１：両側に同じ向きの斜め線 h1.mihon2{margin-top:50px;padding-left:1em; box-sizing: border-box; font-family: '游明朝','Yu Mincho',YuM
css
css css ハンバーガーメニューでクリックすると×になるタイプの作り方（メニューも一緒に）
こういうのです↓※右上にメニューがありますDEMOHTML<nav class="global-nav"> <ul> <li><a href="index.html">トップ</a></li> <li><a href="works.html
css hoverで下線を引く（アニメーション）
PC用仕様ですが こういうの↓ ↓ ↓ ul.lt{overflow:hidden;}ul.lt li{list-style-type:none;float:left;}ul.lt li a{margin-right:2em;text-de
css 【レスポンシブ】列数が多いテーブルの対応策（横スクロール等）
以前、レスポンシブ対応の２列のテーブルを入れるときのコードをコピペ用に記載しましたテーブルが２列、構成によっては３列とかなら上記のやり方でうまくいきますがこんなテーブルならスマホのときどうするか↓ ↓ ↓ ↓ ↓ 3月4月5月6月7月8月9
css レスポンシブデザインのページをPCビューの状態で印刷するためのメディアクエリの書き方
レスポンシブデザインのページは何もしないでいると印刷するときにスマホビューになってしまいますがPCで見たままを紙で出したいというご希望もありますその解決法として モバイルファーストのcssに限るやり方ですがメディアクエリの記述に初めからpr
css Googleマップをレスポンシブで埋め込み。色をなし（白黒）にする方法も
毎回同じやり方なのでメモGoogleマップ埋め込み（レスポンシブ）HTML<div class="ggmap"><iframe src="Googlemapのアドレス" style="border:0;" allowfullscreen="
css 縦横比を保ったまま画像をトリミング「object-fit」
<img>タグでこんな画像を挿入しby 写真ACさらに画像を正方形にしたい、などというとき<div class="box"> <img src="inu.jpg"></div>.box img{ width:200px; height:20
css 背景画像を複数設定して位置も替える
右上の鳥を背景01（bird01.png）左下の鳥を背景02（bird02.png） 全体に敷いてあるものを背景03（back.jpg） として.content { background-image: url("bird01.png"),
css 見出しの前（または後）に画像を付ける
beforeとafterを活用HTML<h1>見出しの内容</h1>CSSh1:before{content:url('画像のパス');position:relative;right:10px;/*本来の位置より左に10pxずらす*/}h1
css リストマーカーに画像を指定
ul li{list-style:none;background:url('画像のパス') left center no-repeat;background-size:20px auto;padding-left:25px;}リストの背景画