今回は知っておくと便利なcssの小技 part15です。 バックナンバー 知っておくと便利なcssの小技 part14 知っておくと便利なcssの小技 part13 知っておくと便利なcssの小技 part12 テキストが空の場合、要素を表示させない テキストがないときにpaddingだけが残って中途半端に表示されてしまう、なんてことがあったりします。 こういう時はCMSで生成されたりしていることが多いので、phpで処理するのが1番よいかとは思いますがそれが難しいときはcss […]

今回は知っておくと便利なcssの小技 part14です。 テキストエリアの装飾について紹介します。 バックナンバー 知っておくと便利なcssの小技 part13 知っておくと便利なcssの小技 part12 知っておくと便利なcssの小技 part11 テキストエリアのリサイズをさせない テキストエリアの右下ですが、ブラウザによってはリサイズ用の領域がありますよね。 リサイズをできると場合によってはレイアウトが崩れていやだ…なんてこともあるかもしれないのでこれを無効にする方法 […]

使用できるパラメーター（2018年10月現在） それぞれのパラメータですが、ブラウザによって効いたり効かなかったりします。 また、スマートフォン端末では、端末仕様によって動作に制限がある場合があります。（例：必ず全画面表示の状態で再生されてしまう、など） ※パラメータの使い方はこちら ※各パラメーターのデモはこちら 「全画面表示」ボタンを非表示に パラメータ 説明 デフォルト値 使用例 fs 全画面表示ボタンを非表示にする。0で非表示、1で表示。 1 ?fs=0 Youtub […]

今回は知っておくと便利なcssの小技 part13です。 バックナンバー 知っておくと便利なcssの小技 part12 知っておくと便利なcssの小技 part11 知っておくと便利なcssの小技 part10 テキストが空の時のみ、『content』でURLを取得し表示させる リンクのテキストがHTML上で空の時に、contentでURLを取得して表示させてくれる方法です。 ベタでURLを貼るようなリンク集…などには使えると思います。 HTML CSS jsを仕込みそうなも […]

今回はちょっと変わった、おもしろいプラグインをまとめました。 程度を守ればエフェクトがあるとサイトも華やかに見えますね。 要素が揺れるアニメーションを実現！『CSShake』 　 このプラグインを使用するとホバー等をした時に要素が揺れるアニメーションを付けることができます。 あまり揺れさせすぎると怖い感じになってしまうので注意してください…。 おもしろ系のサイトなんかではバンバン使えそうですね。 ホバー時に他の要素をぼかす『Item Blur Effect with CSS3 […]

今回は個人的に知っておくと便利だなと思うcssの小技part12 -複数の背景要素-です。 バックナンバー 知っておくと便利なcssの小技 part11 知っておくと便利なcssの小技 part10 知っておくと便利なcssの小技 part9 cssで複数の背景画像・背景色を指定する 1箇所の背景に複数の画像や色を指定したいという事があるかと思います。そんな時に使える方法です。 グラデーションもあるので複雑なように見えるかもしれませんが、案外簡単です。 HTML css とり […]

今回は個人的に知っておくと便利だなと思うcssの小技part11 -ボーダー編-です。 バックナンバー 知っておくと便利なcssの小技 part10 知っておくと便利なcssの小技 part9 知っておくと便利なcssの小技 part8 線の最初だけ色を変える タイトルなどでよくあるボーダーの最初だけ色を変えるあれです。 今までは結構画像などでやることも多かったのですが、レスポンシブが多くなってからはcssでやってしまうのが一番いい感じですね。 HTML css まずは本体に […]

今回は個人的に知っておくと便利だなと思うcssの小技part10 -画像編-です。 バックナンバー 知っておくと便利なcssの小技 part9 知っておくと便利なcssの小技 part8 知っておくと便利なcssの小技 part7 画像をcssでモノクロやセピアにする なんとcssだけで画像をモノクロやセピアにできます。大変便利です。 HTML css filterプロパティを使いモノクロに対しては『grayscale』を、セピアに対しては『sepia』を指定します。 これだ […]

スクロールバーを装飾したい・safariで見た際に常にスクロールバーを表示させたい…という時、手軽に実現させる方法として『::-webkit-scrollbar』があります。 装飾した表示はChromeとsafariのみになってしまいますが、数行のCSSを加えるだけで簡単に実現できます。 HTML まず、スクロールさせるコンテンツを囲みます。 CSS 高さ指定をして『overflow: auto;』で要素をスクロールさせます。 次にスクロールバー自体の装飾の指定をしていきます […]

構造化マークアップもSEO的に無視できなくなりつつある昨今ですが、イベント情報の構造化データをサイトで使用している方は要再チェックです。 Googleのガイドラインに、イベント情報の構造化データに「割引クーポン」を追加するのは違反であるとの記述が明確にされました。（2017年11月末） その他にもイベントと関係ない情報をイベントとしてマークアップすることをやめるように書かれています。 場合によっては、Google側からの手動対策の対象となるため、早めの修正が必要となります。検 […]

CSS3のanimationプロパティと@keyframesを使用すると、CSSのみでアニメーションをすることができます。 複雑なものでなければ簡単にできるので、まずは触ってみましょう。 今回は正方形を長方形にするアニメーションを作成します。 記述例 CSS（記述例） HTML（記述例） 基本の形はこうなります。 まず、@keyframesの記述の後に、アニメーションに対して任意の名前を付けます。 0%は最初に表示される形、100%には最後に表示される形を記述します。 次にア […]

Flexboxを使いこなそう！の第5弾です。 [過去の記事] [第1回] Flexboxを使いこなそう！-基本の書き方- [第2回] Flexboxを使いこなそう！-子要素の並び順を指定する- [第3回] Flexboxを使いこなそう！-子要素の折り返しを指定する- [第4回] Flexboxを使いこなそう！-水平方向の配置指定の仕方- 今回は垂直方向の配置指定についてです。 垂直方向の配置指定 [HTML] [CSS] こちらが基準になるHTMLになります。ここから垂直方向 […]

今回は素敵なCSS3アニメーションを用意してくださっているサイトをご紹介します。 以前紹介した記事はこちら hover時に素敵な動きを加えてくれるcss3アニメーション10選 今回は一部jsやSVGと組合せているものもあります。 また、一部IEや古いブラウザなどに対応していないものが多いので、そちらは各ページをご確認ください。 Creative Button Styles ボタンなどのhoverアニメーションに使えそうなアニメーションです。 押して楽しいボタンがいっぱいありま […]

Flexboxを使いこなそう！の第4弾です。 [過去の記事] [第1回] Flexboxを使いこなそう！-基本の書き方- [第2回] Flexboxを使いこなそう！-子要素の並び順を指定する- [第3回] Flexboxを使いこなそう！-子要素の折り返しを指定する- 今回は水平方向の配置指定についてです。 通常でしたらfloatやtext-align等の指定を行いますが、Flexboxは独自の指定があります。 水平方向の配置指定 [HTML] [CSS] こちらが基準になるH […]

Webサイトで画面をスクロールすると、要素がフェード等のエフェクトがかかって出てくることがありますよね。 jQueryを使うことが主だと思うのですが、『AOS』を使うとjQuery不要で実装ができます。 AOSの使い方 とりあえずサイトからcssとjsをダウンロード、またはCDNでも配布されているのでそちらを読み込みます。 CSSの読み込み jsの読み込み CSSはhead内に、jsはbody内で読み込ませてください。 あとは読み込ませた後ろにAOS.init()の記述をして […]

Flexboxを使いこなそう！の第3弾です。 [第1回] Flexboxを使いこなそう！-基本の書き方- [第2回] Flexboxを使いこなそう！-子要素の並び順を指定する- 今回は子要素の折り返しについて書いていきます。 子要素の折り返し まずは折り返しについてです。 Flexboxは『並べる』ことを前提にした機能なので、デフォルトのままだと外側のサイズ指定したボックスから要素がはみ出してもそのまま横に並び続けてしまいます。 とりあえずどんな感じになるのか見てみましょう。 […]

Flexboxを使いこなそう！の第2弾です。 [前回] Flexboxを使いこなそう！-基本の書き方- 今回は子要素の並び順の指定の仕方についてです。 並びの指定については『flex-direction』プロパティを使っていきます。 これを使えば『1,2,3,4…』と並んだ子要素を『4,3,2,1…』といったように反対側から並べる事もできちゃいます。 子要素の並び順を指定しよう-横並び- 左から右に並べる とりあえず通常通りの左から右に並べる方法です。 […]

仕様も安定していそうだしそろそろ現状のブラウザのシェアのことを考えるとガンガン使ってもいいかなと思うFlexbox。 各プロパティが豊富すぎてよく調べてしまうことになるので、使い方をまとめてみようと思います。 今回はとりあず入門ということで要素を横に並べる方法をご紹介します。 Flexboxって？ Flexboxとは、おおざっぱに言うと要素を簡単にレイアウトできるCSS3の新しい要素です。 今までは可変要素を同じ割合で並べたいときはcalcで計算。 横並びになっている複数個の […]

こんにちは、工藤です。 今回はYouTubeの埋め込み動画をjsでコントロールする方法をご紹介します。 例えば埋め込みの際に『自動再生にした時にミュートにしたい』なんて場合はただ埋め込みではできないのでこちらの方法で実現させます。 IFrame Player APIを読み込ませよう まずjsを読み込みます。 以下は直接htmlの方に記述できる方法 またはjsの方で読み込ませる方法もあります。 お好みの方でどうぞ。 youtubeにアップした動画を表示させる 次にyoutube […]

割と使うタブの切り替え。 単純なものであれば自分でもコードを覚えれば書けないこともないのですがもうちょっと様々な効果を使ってみたい…なんて時もあります。 そんな時に役立つのが『Tabslet』です。 使い方 とりあえずダウンロードしましょう。下記サイトから『DOWNLOAD』ボタンでダウンロードしてください。 Tabslet ダウンロード後はcssとjsを読み込ませます。 ダウンロードしたフォルダにある『jquery.tabslet.js』とdemo＞stylesheetsフ […]