Create Guten BlockでGutenbergのカスタムブロック開発環境を構築する | webOpixel
Create Guten BlockでGutenbergのカスタムブロック開発環境を構築する WordPressの新エディター「Gutenberg」のカスタムブロック開発環境を高速で構築できる、「Create Guten Block」という開発ツールキットのご紹介を致します。 投稿日2018年08月24日 更新日2018年08月24日 Gutenbergブロックの開発環境の構築 GutenbergはReactとというJavaScriptのフレームワークで開発されています。 素のJavaScriptでも開発はできますが、ReactはJSXという独自構文があったり、ES6での開発が一般的になっています。 Create Guten Block を使用するとこの辺りの環境も簡単に構築し、プラグインとしてすぐに使用できるようになります。 Node.jsは入ってなかったらインストールしてください。 C
自作のjQueryスクリプトをプラグイン化しよう
Posted: 2011.06.13 / Category: javascript / Tag: jQuery, Plugin 自作したjQueryコードは作成した本人なら簡単にパラメーターの調整などを行いカスタマイズできると思いますが、Webに公開して他の人に使用してもらう場合はなかなかむずかしかったりしますよね。 そこでプラグイン化をすることで誰でも簡単に扱えるようにしてみましょう。 外部ファイル化 たとえば「#hide-btn」をクリックすると「#view」がフェードアウトして消えるという簡単なスクリプトがあります。 jQuery script $(function() { $('#hide-btn').click(function(){ $('#view').fadeOut(1000); }); }); まずは外部ファイル化しましょう。 jQueryプラグインは「jquery.プラ
アイコンフォントセットまとめ10種
アイコンフォントセットまとめ10種 CSSで設定するだけですぐに使えるアイコンフォントセットをまとめてみました。 投稿日2017年01月30日 更新日2017年01月30日 Font Awesome Font Awesome は Bootstrap で採用されていることから一番有名なフォントセットなのではないでしょうか。 現在675個のアイコンを使用することができます。 ローディングなどCSS3でアニメーション設定されているアイコンもあります。 Font Awesome Foundation Icon Fonts 3 CSSフレームワーク Foundation で使用されいるアイコンです。 Foundation Icon Fonts 3 Ionicons Ionic という モバイルアプリを開発するフレームワークで使用されてます。 そのためiOS風なアイコンが多いです。 Ionicons
Vue.jsでTableをソートしたり検索したりしてみる
Vue.jsでTableをソートしたり検索したりしてみる Vue.js 2.0 を使用してTableで並べたリストの検索フィルターとかソートなどをやってみます。 投稿日2017年01月16日 更新日2017年01月16日 データをテーブルに表示する 最初に表示するデータを作成して、tableにシンプルに表示してみましょう。 大まかにデータを入れる(data)、ボタンクリック時などに実行される（methods）、フィルター処理を記述する（computed）を作成していきます。 JavaScript var app = new Vue({ el: '#app', data: { }, methods: { }, computed: { } }); ではdataに表示するデータを記述していきましょう。 今回はタスクリストを想定して作成してきます。 JavaScript data: functio
jQueryでスクロール量に応じて拡大するヒーローイメージ
jQueryでスクロール量に応じて拡大するヒーローイメージ 最近はトップページでメインビジュアルを画面いっぱいに表示することが多いですよね。 ヒーローイメージというらしいですが、今回はjQueryを使用してスクロール量に応じて画像を拡大する方法をご紹介します。 投稿日2016年12月28日 更新日2016年12月28日 HTML 画像はCSSので配置するのでscale-bgというクラス名の空のdivを配置します。 fixedで固定表示するので他の要素とは別にしておきます。 HTML <div class="scale-bg"></div> <h1>Title</h1> <div class="contents"> ・・・ </div> CSS scale-bg に fixed、contents に relative を指定して位置を調節します。 CSS .scale-bg { backgr
Flexboxでコンテンツ量が少ない時はフッターを画面下に固定する
Flexboxでコンテンツ量が少ない時はフッターを画面下に固定する コンテンツがウィンドウの高さより少ない時だけ画面下にフッターを配置する方法はいろいろありますが、CSS3のFlexboxレイアウトを使用すればかなりスマートにできます。 投稿日2016年11月28日 更新日2016年11月28日 HTML header,article,footer が並んでいて footer を固定したいとします。 HTML <header> Header </header> <article> Article </article> <footer> Footer </footer> CSS 「display: flex;」だけだと横並びですが「flex-direction: column;」を指定することで、縦並びのFlexレイアウトができます。 html{ height: 100%; } body{
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
