webページの作成において、ユーザーインターフェイスを構成するのはHTMLです。 その際、見栄えはCSSで調整し、ページに動きをつけたいといった場合にはJavaScriptを用います。 要は「HTML」「CSS」「JavaScript」のうち、中枢を担うのはHTMLであり、CSSやJavaScriptはwebページの操作性を向上させるための飾りです。 デザイナーにとって、CSSやJavaScriptの作りこみは腕の見せどころではありますが、反面とても面倒な作業でもあります。 そこで、「Boostrap」というCSSのフレームワークを使うことにより、面倒な作業を必要とせず、効率的にCSSを仕上げることが可能となります。 Boostrapとは Bootstrapとは、レスポンシブデザインを採用した HTML/CSS/JavaScriptのフレームワークです。 レスポンシブデザインというのはPC

WordPressの定番プラグインJetpackを高速化するカスタマイズです。統計情報など、裏方機能しか使ってない方にオススメ。 久光さやかです。 WordPressにJetpack入れてみたら微妙に動作が重くなって1年になります。お互いのニーズに合致しそうだと思い、連絡してみました。 …って「1年経った」しかかかってないし。 えーと。Jetpackは超有名なプラグインですが、多機能すぎて遅くなるのが悩みの種です。普及率は高い一方、それぞれのサイトで実際に使われてる機能は数えるほどでしょう。 おち研でも動作を軽くするために不要な機能をガンガン止めていった結果、フロントエンドに出る機能を全く使ってないことに気付いてしまいました。 あれ？これって…もしかしてJetpackが独立して出力しているCSSを切っても特に問題ないのでは？( ；・`д・´) Jetpackが出力するCSSを無効化する J

Googleマップをスマホサイトに埋め込むとはみ出す時の対処法レスポンシブのスマホサイトに Google map を埋め込むと、はみ出してしまう。 これをはみ出さないようにしたい。 共有から iframeのタグをコピペする。 <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d23796.650854092717!2d140.75646100404356!3d41.79423516221846!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x5f9ef46bcb8d5525%3A0xa9e4bd2d96c4d502!2z54m55Yil5Y-y6Leh5LqU56ic6YOt6Leh!5e0!3m2!1sja!2sjp!4v1460702096429"

縦に長いコンテンツが大量に存在する時、ユーザーの意思で見るかどうか選ばせたい時は「もっと見る」や「続きを読む」といったボタンがあると、見たくない場合にスラスラスクロールできます。 CSSだけで実装が可能なので、デモとソースコードをご紹介します。 CSSだけで「続きを読む」のデモ 続きを読むを実装したデモをご確認ください。 ソースコード HTML <div class="readmore"> <input id="check1" class="readmore-check" type="checkbox"> <div class="readmore-content"> 中身のテキスト </div> <label class="readmore-label" for="check1"></label> </div> チェックボックスのid値とlabelのfor値を揃える必要があります。 特に、

HTMLバーを1つずつ開閉させるにはinputのid名とlabel名を連動させるのがポイント。 つまり3つ目を増やすときはcssにmenu_bar03を追加する。 <div class="menu"> <input type="checkbox" id="menu_bar01" /> <label for="menu_bar01">バー01</label> <ul id="links01"> <li>内容01-A</li> <li>内容01-B</li> <li>内容01-C</li> </ul> <input type="checkbox" id="menu_bar02" /> <label for="menu_bar02">バー02</label> <ul id="links02"> <li>内容02-A</li> <li>内容02-B</li> <li>内容02-C</li> </u

jQuery のカルーセルライブラリ slick.js をそのまま使うと slick.js file の読み込みと .slick() method の実行が完了するまで、カルーセルのレイアウトにならず ul, li タグで囲んでいる画像が全て表示されてしまうという問題に直面しました。 これを解決するには 1 枚目の画像だけ src で画像 URL を指定します。

ページのメインビジュアルとしてもおなじみのスライダー（カルーセル）。 jQueryのプラグインも数多くありますが、グランフェアズでよく使っているレスポンシブ対応のスライダープラグイン、「slick」についての備忘録をお届けします。 slickの公式サイトはこちら。 当記事では基本の設置方法は割愛しています。公式サイトの「get it now」からダウンロードして、「demos」を参考に好きなスライダーを作ってみましょう。 slick – the last carousel you’ll ever need slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more! ロード時に一瞬縦並びに

よく見かけるスライダー（自動再生） See the Pen 【jQuery】スライダープラグイン「slick」よく見かけるスライダー（自動再生） by 125naroom (@125naroom) on CodePen. HTMLとjQueryはこちら <div class="sliderArea"> <div class="regular slider"> <div><img src="https://125naroom.com/demo/img/itukanokotonokoto01.jpg" alt="125naroom"></div> <div><img src="https://125naroom.com/demo/img/itukanokotonokoto02.jpg" alt="125naroom"></div> <div><img src="https://125naroo

CSSで使えるかわいい見出し・タイトルをまとめてみました。 codepenから引用しています。 かわいい見出し・タイトル　コピペで実装 ただかわいいだけじゃつまらない！ すごすぎるアニメーションをプラスしたデザインをまとめちゃいました あわあわな文字 なんと自分で見出しをつくれちゃう…?! See the Pen Shape Shifter by Kenneth Cachia (@kennethcachia) on CodePen. おしゃれアンドロイド風 やってきては飛んでいく See the Pen text color draw by CJ Gammon (@cjgammon) on CodePen. 冬のホタル 幻想的…雪のようなホタル See the Pen Title sequence demo by Ryan Buckley (@ryanbuckley13) on CodeP

見出しデザインの使い方・コピペする場所 使い方ですが、下記にあるそれぞれのHTMLとスタイルシート（CSS）を、指定の場所にコピペします。 WordPressなら HTML：記事投稿のテキストタブ CSS：ダッシュボードの外観 → テーマの編集 → style.css です。 HTMLは全て <h2>見出し</h2> であることを仮定したコードになってます。