css3
ヘッダーなどナビをhover（ホバー）すると英語⇔日本語に変更させるやり方を紹介します。 cssのdisplay:none;を使用！ 今回はナビで使うように簡単に記載いたします。＜html＞ <nav> <ul> <li><a href="#"><span class="1">Home</span><span class="2">ホーム</span></a></li> <li><a href="#"><span class="1">Menu</span><span class="2">メニュー</span></a></a></li> </ul> </nav> ＜css＞ ul li a .2{…
cssでギザギザの境界線を作るやり方です。⇊⇊ギザギザとは、こういう感じ⇊⇊ 境界線にひと手間加えるだけでPOPになります！ html <div class="gizagiza"></div> css .gizagiza { position: relative; width: 100%; height: 40px; background: transparent; filter: drop-shadow(0 0 0 rgba(…
まずは公式サイトからファイルをDLしてリンクします。 getuikit.comDLしたファイルの中で必要なのは、下記3つです。 <link rel="stylesheet" href="css/uikit.min.css" /> <script src="js/uikit.min.js"></script> <script src="js/uikit-icons.min.js"></script> Ulkitのメディアクエリは4つに設定されております。 変えたい場合はuikit.min.cssの数字を置換するしかないですね… クラス名 uk-hidden@s</link>…
css3でテキストグラデーション、ボーダーグラデーションをかけましょう！ テキストグラデーション html記述 今回はh2をグラデーションにします <h2>タイトル</h2> CSS記述 h2{ color: #ff69b4; /*cssが効かない時のために必須です*/ background: -webkit-linear-gradi…
bxsliderを使用して自分のサイトにあったカスタマイズをしましょう！！ bxslider.comまずは、bxsliderの公式サイトに行き、GitHubのダウンロードからzipファイルをダウンロードしてください。 ダウンロードしたzipファイルには色々入っておりますが、その中…
divなどのブロックレベル要素は通常ソースで書かれた順番に上から下に縦に並びます。 しかしfloatを使う事で要素を浮かす事が出来、さらに左右どちらかの方向を指定する事で横に並べる事が出来ます。 floatを使う事でHTML内の文章構造を変える事なく比較的自…
<style> .container { position:relative; } .box { position:absolute; } </style> </head> <body> <div class="wrapper"> <div class="box"></div> </div> </body>
remを使ったフォントサイズ まずはremを使ったフォントサイズの指定を覚えましょう。 「rem」とは、「em」や「%」の場合、親要素（が基準）に対して相対的に指定する単位になりますが、「rem」は「root em」の略の通り、root要素（最上位の要素）に対して相…
Flexbox（Flexible Box Layout Module）はCSS3の新しいレイアウトモジュールで、複雑なレイアウトを今までより少ないコードでフレキシブルなボックスを組むことが出来ます。以前からあった技術ですが、各ブラウザーによって書き方が違ったり、仕様が変わった…
Retinaディスプレイ Retinaディスプレイの特徴は画面解像度の高さにある。iPhone 4の画面サイズは前モデルのiPhone 3GSと同じ3.5インチのままであるが、Retinaディスプレイの搭載によって解像度は320×480ピクセルから640×960ピクセルに、つまり倍になってい…
CSS3によるアニメーションは大きく分けて、トランジション（transition）とアニメーション（animation）の２つに別ける事が出来ます。CSS3におけるトランジション（transition）とアニメーション（animation）の違い 「transition」 動かすために:hoverなど…
自分でリセットcssを記述するよりもコピペして使用すれば楽です。 sassの場合は、_reset.scssというリセットcssだけのファイルを作りstyle.scssに@inportで呼び出せば cssファイルを作らなくても良いので簡単です。 style.scssに記述する_reset.scssのファイ…
jonsuh.comアイコンの切り替えはjQueryでclass「is-active」をトグルさせるだけです。 <p class="hamburger" id="btn"> <span class="hamburger-box"> <span class="hamburger-inner"></span> </span> </p> サイズや色をカスタマイズするには、hamburgers.cssを自分で書き換える必要があります。
SVGとは？ SVG【 Scalable Vector Graphics 】とは、XMLベースの2Dベクター画像記述言語。2001年9月にW3C勧告として公開された。 ベクター画像は画像をビットマップ形式ではなく、線や面などの図形の集合体として扱うため、見る環境に応じて最適な表示が可能…
object-fitプロパティは、置換要素（img要素やvideo要素など）をボックスにどのようにはめ込むかを指定する際に使用します。 fill 置換要素（img要素やvideo要素など）をボックスサイズに合わせて縦横比を維持しないでリサイズして、全体が見えるようにはめ…
「writing-modeプロパティ」を使用し、縦書きにします。 p { -webkit-writing-mode: vertical-rl; /*ChromeとSafari用のベンダープレフィックス*/ -ms-writing-mode: tb-rl; /*IE用のベンダープレフィックス*/ writing-mode: vertical-rl; /*Firefox用はベン…
css3の「background-clip」と「text-fill-color」を使う事で同じような表現が出来るようになります。 background-clip background-clipプロパティは、背景の適用範囲を指定する際に使用します。テキスト部分に背景画像を適応させたい場合、 -webkit-backgrou…
スマホ時のUIで横スクロールのを採用するアプリやWebサイトをよく見かけます。ある程度のコンテンツ数がある場合に横スクロールを採用する事でスマホの様な小さい画面でも1つ1つの画像をある程度大きく見せる事が出来るというメリットがあります。また、シン…
スマートフォンやタブレットでウェブサイトを見ている時、ボタンにタップすると通話発信ができるようにするためには電話番号用のtelリンクを設定する必要がありますが、一部のスマートフォンでは、telリンクを設定していない、ただの文字列もリンク扱いにな…
divなどの要素に複数のクラス名を付けてcssでコントロールする、という事自体は以前からやって来ましたが、クラス名が増え過ぎてしまうと、逆にコントロールし難くなってしまいます。 そういう場合に正規表現を上手に使う事でコントロールしたい要素を絞り込…
CSS グリッドレイアウトは、 表と同様に簡単に段組等が作れ、グリッドレイアウトによって要素を列と行に整列させることができます。しかし、 CSS グリッドを使用すると、表で実現するよりもより複雑なレイアウトが可能で、あるいは簡単に実現できます。displ…
