css

css

斜め線の入った見出し

パターン1:両側に同じ向きの斜め線 h1.mihon2{margin-top:50px;padding-left:1em; box-sizing: border-box; font-family: '游明朝','Yu Mincho',YuM
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

【レスポンシブ】列数が多いテーブルの対応策(横スクロール等)

以前、レスポンシブ対応の2列のテーブルを入れるときのコードをコピペ用に記載しましたテーブルが2列、構成によっては3列とかなら上記のやり方でうまくいきますがこんなテーブルならスマホのときどうするか↓ ↓ ↓ ↓ ↓ 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;}リストの背景画