akira_maruのブックマーク - はてなブックマーク

脱jQueryの道その２:あの機能は素のJavaScriptでどうやるんだろ編

脱jQueryの道その２:あの機能は素のJavaScriptでどうやるんだろ編脱jQueryの道の第二弾です。プラグインを使うまでもない小さな機能はjQuery使わない場合どう書くんだろう。ということでやてってみたいと思います。投稿日2019年04月18日更新日2019年04月19日アニメーションはJavaScriptで制御する方法もありますが、極力CSSでおこないます。ちなみに脱jQueryの道第一弾はこちら。脱jQueryの道初級編タブメニューディスプレイnoneとblockをフェードインで切り替えたいときはキーフレームアニメーション使うと簡単です。 JavaScript (() => { document.querySelectorAll('.tab-block').forEach((tabContents) => { let activeIndex = 0; c

akira_maru 2019/04/19

リンク

脱jQueryの道初級編

Posted: 2019.02.12 / Category: javascript いつもはjQueryを使用していますが、素のJavaScriptでクリックイベントやクラスの切り替えを行ってみます。要素取得するセレクタで指定したid・classの要素を取得してみましょう。これがないと始まりませんね。要素を一つだけ取得する以前は、idがgetElementByIdで、classはgetElementsByClassNameを使用していましたが、最近はquerySelectorが主流です。 CSSのセレクタのように要素名を指定するか、.でclass、#でidを取得できます。 JavaScript // 要素名で取得 document.querySelector('div'); // classを取得 document.querySelector('.example'); // id

akira_maru 2019/04/19

リンク

SASS/SCSSで基本カラーを設定して効率よくカラーバリエーションを作成する

SASS/SCSSで基本カラーを設定して効率よくカラーバリエーションを作成する SASS/SCSSには様々なカラーコントロール機能がありまして、この機能を利用すればカラーバリエーションの作成やカラー修正など効率的に行うことができますよ。投稿日2013年06月27日更新日2013年06月28日共通のSCSSファイルを作成するカラー設定は他のSCSSファイルから共通して使用すると効率が良いです。なのでカラー設定用のSCSSファイルを最初に作成します。共通の変数は「_variables.scss」というファイル名にします。「_」で始まるファイルはコンパイルされません。 _variables.scss $base-color: #536A97; とりあえず「$baseColor」という変数を一つ作成しました。変数を使用するさきほどカラー設定した変数を使用してみましょう。 base

akira_maru 2018/10/27

あとで読む

リンク

WordPressのショートコードを自作してみる

Posted: 2010.07.11 / Category: WordPress / Tag: ショートコード Wordpressで記事を書いていると、投稿記事からテンプレートタグを使いたくなったり、自作のプログラムを動かしたいくなる場合があると思います。そんなときに便利なのがショートタグです。ショートタグは投稿記事に[]（ブラケット）内にショートコード名を記述することで、あらかじめ設定しておいた関数を呼び出すことができます。で、肝心の関数を記述する場所はというと、プラグインとして読み込ませたり、テンプレートフォルダのfunctions.phpに記述します。プラグインというとちょっと大げさな気がするので、今回はfunctionsファイルの方を試してみたいと思います。たぶん一番シンプルなショートコードショートコード第一号は呼び出すと決められた文字列を返すだけという、実用性0のコー

akira_maru 2018/10/16

リンク

WordPressの新エディターGutenbergでカスタムブロックを作成する[初級編]

WordPressの新エディターGutenbergでカスタムブロックを作成する[初級編] WordPress5.0でデフォルトになる予定の新エディター「Gutenberg」。ブロックを組み合わせてページを作成できることが特徴となっていますが、このブロックをオリジナルで作成してみたいと思います。投稿日2018年08月29日更新日2018年08月29日 Gutenbergブロックの開発環境の構築 Create Guten Blockという開発ツールキットを使用するとモダンな開発環境が簡単に構築できます。よかったらこちらの記事もご覧ください。 Create Guten BlockでGutenbergのカスタムブロック開発環境を構築する一番シンプルなカスタムブロック Create Guten Blockで作成したプラグインのディレクトリは下記のようになっています。 ├── package

akira_maru 2018/08/31

リンク

jQueryのサイドバー固定サブメニュー実装パターン

jQueryのサイドバー固定サブメニュー実装パターン最近はモニターのサイズがワイドなってきていることもありサイドバーを固定する機会が増えてきましたね。そこでjQueryを使用したサイドバー固定にしたときのサブメニューの動きをいくつかご紹介します。投稿日2018年04月27日更新日2019年09月19日基本構造 navの子要素にulでマークアップします。サブメニューはliの子要素のさらに子要素にulを入れ込みます。 HTML <aside id="sidebar"> <h1 id="brand-logo">Logo</h1> <nav id="global-nav"> <ul> <li><a href="#">Home</a></li> <li class="sub-menu"> <a href="#">About</a> <ul class="sub-menu-nav"> <l

akira_maru 2018/04/28

jquery
menu

リンク

レスポンシブでハンバーガーメニューになる固定サイドバー

レスポンシブでハンバーガーメニューになる固定サイドバー近年ではモニターサイズが広くなってきた影響もあり、サイドバーを固定表示させてるサイトが多くみられるようになった気がします。そこでここでは画面が狭くなるとハンバーガメニューになるレスポンシブに対応した固定サイドバーの作成方法をご紹介します。投稿日2017年09月21日更新日2017年09月21日ロゴもサイドバーに含むレイアウトで、サブメニューがある場合はマウスオーバーすると右に表示するタイプです。 HTML 幅を狭めた時にはロゴ部分とメニューは別にしたかったので、構造的に分けてCSSで調節するようにします。 html <header id="global-head"> <h1 id="brand-logo">Logo</h1> </header> <div id="nav-toggle"> <div> <span></span>

akira_maru 2017/09/22

リンク

PhotoshopってFireworksと違ってここがダメだよねって思ってたけど使い方知らないだけだった件

Posted: 2013.04.23 / Category: WebDesign WebデザインツールとしてFireworksとPhotoshopがよく挙げられますが、私はFireworksをメインに使用しています。理由はFireworksと比べるいろいろと不便な点があったからなのですが、ちょっと調べたらいろいろと知らないだけだったのでメモしておきたいと思います。 Photoshopってキャンバスで直接選択できなくね？ Fireworksは選択ツールでキャンバスでオブジェクトを直接選択できるのに、Photoshopはレイヤーから選択しないといけないから直感的じゃないですよね。いえいえ直接選択もできますよ。左パレットから「移動ツール」を選択ます。そのままだと選択されているレイヤーを移動させるだけのツールですが、「cmd + 左クリック」することで選択することができます。ドラッグすれば範囲

akira_maru 2013/04/24

photoshop

リンク

WordPressでプラグインによって読み込まれる外部スタイルシート&javascriptを削除する

WordPressでプラグインによって読み込まれる外部スタイルシート&javascriptを削除する Wordpressには便利なプラグインがたくさんあってついつい多く入れてしまいがちですが、画面に表示させるタイプのプラグインは独自にスタイルシートを読み込んだりしています。プラグインごとにファイルを別けた方がメンテナンスはしやすいかもしれませんが、外部ファイルはなるべくまとめた方がリクエスト数を減らすことができてパフォーマンスが良いらしいです。プラグインによって自動的に読み込まれたスタイルシートを削除する方法をご紹介します。投稿日2011年02月05日更新日2011年04月02日「wp-pagenavi」プラグインのCSSを削除する。よく使用されるプラグインとして、「wp-pagenavi」なんかがありますね。これを使用すると以下のCSSがheadに追加されます。 <link

akira_maru 2012/09/27

リンク

jQueryでスクロールすると表示する系いろいろ

jQueryでスクロールすると表示する系いろいろ最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。投稿日2012年03月08日更新日2019年12月19日ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-decoration

akira_maru 2012/03/20

リンク

jQueryでスクロールすると上部に固定されるナビゲーション

jQueryでスクロールすると上部に固定されるナビゲーショングローバルナビゲーションはロゴの下に配置されていることが多いですが、スクロールするとナビゲーション部分だけが上部に固定されるようなものをjQueryでやってみたいと思います。投稿日2012年02月21日更新日2012年05月10日 html & css htmlです。 html <h1><a href="#">タイトル</a></h1> <div class="nav"> <ul class="clearfix"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">NEWS</a></li> <li><a href="#">LINK</a></li> </ul> </div> <div id="

akira_maru 2012/02/22

リンク

CSSをシンプルに書くことができるLESS使ってみた

CSSをシンプルに書くことができるLESS使ってみた CSSはシンプルなのでとてもわかりやすい言語ではありますが、その分サイトが肥大化していくとメンテナンス性が悪くなりますね。 LESSを使えばプログラム的な書き方ができるので、ムダなく効率的に管理できるみたいです。投稿日2011年12月13日更新日2011年12月13日ネスト（階層）化できるたとえばこんなCSSがあります。 css div.section { width: 500px; margin: 0 auto; border: solid 1px #999; padding: 1px; } div.section h3 { background: #999; font-size: 131%; padding: 10px; } div.section h3 a { color: #fff; } div.section h3 a

akira_maru 2011/12/13

css
less

リンク

jQueryで長いページの区切り（セクション）ごとに背景を変化させる

Posted: 2011.11.07 / Category: javascript / Tag: jQuery, アニメーション最近は一ページに内容を詰め込んだ縦長のページが増えてきましたね。そこでスクロールすると区切り（セクション）ごとに背景が変化したら、面白いのではないのかと思いましたのでやってみました。 html sectionはhtml5ではなくdivにclassでマークアップした昔ながらの形式にしました。 html <div class="section"> <h2>Section0</h2> <p> ここは0番目のコンテンツです。 </p> </div> <div class="section"> <h2>Section1</h2> <p> ここは1番目のコンテンツです。 </p> </div> <div class="section"> <h2>Section2</h2>