PHPがわからなくてもオッケー。HTMLをPHPにして共通パーツを外部読み込みする。
Webデザイナーの平尾誠です。 例えばヘッダーとかフッターは全ページ共通のパーツだったりしませんか？ たくさんのページで使われる同じソースコードは、コンポーネント化してインクルードしましょう。 PHPを使いますが、理解し …
「コーディング」の記事一覧
SCSSの使い方を初心者用にまとめた
Webデザイナーの平尾誠です。 現在CSSを書いている人は、SCSS に記法を変えるだけでCSSの記述が極端に減りますよ。 SCSS は一言で言うと、CSSの記法です。 よく使うSCSS の記法は限られています。 調べれ …
Web系プログラミングを独学で継続したければ脱線しよう
Webデザイナーの平尾誠です。 表題の通りweb系プログラミングの歩き方をまとめています。 この記事は筋肉質な勉強法を否定するものです。 あらかじめご了承ください。 僕はもともとオリジナルの家具を作る家具の施工会社にいま …
Web系エンジニアのスキルチェックシートを作ったよ
Webデザイナーの平尾誠です。 最近アップデートしたポートフォリオが評判が良くて驚いています。 本当にありがとうございます。 さて、僕は最近MENTAというサービスを使い、Webサイト制作初学者へ向けたメンターをしていま …
初心者にありがちなHTMLの書き方と対策
Webデザイナーの平尾誠です。 最近、初学者に向けてオンラインでマンツーマンの講師をしています。 初学者が忘れがちな場所っていつも同じだと感じます。 この記事は下記のような方に向けて書いています。 ドットインストールで勉 …
魅力的なテキストアニメーションまとめ
Webデザイナーの平尾誠です。 今日は汎用的なテキストアニメーションを集めました。 テキストの現れ方が魅力的だと印象はグッとよくなります。 また、引きつけたいものに目線を導くことも可能です。 ほとんどのものはJquery …
マウスカーソルを利用したマウスストーカー好例まとめ
Webデザイナーの平尾誠です。 PC表示の際に、マウスポインターを利用してユーザーの体験を新しくするサイトが増えています。 ユーザーの体験をよりリッチに表現してくれます。 こんな感じですね。 自分もポートフォリオで実装し …
Git を覚えたらエンジニアとリモートできるって本当？
Webデザイナーの平尾誠です。 普段はソース管理をBitbucketとSourcetreeでやってます。 GitHubはわからない。かなしい。 だけどエンジニアとのファイル共有をするならGitでしょてことで、僕もこれから …
慣性スクロールで余韻をもたせるプラグイン jquery.easeScroll.js
慣性スクロール系プラグインは沢山あるんですが、いつもページ下に変な余白が出来たりします。 とにかくうまくいった試しがない。 マウススクロールをスムーズに動かしたい 慣性がついた余韻があるスクロールがしたい って人にへ向け …
お手軽なスマホでジャイロを用いたparallax.js
これ以上ないんじゃないかってくらい簡単で便利なJsのプラグインを発見！ スマホで見たら傾けたときに、ふわふわっと傾きます。 これは携帯に内蔵されているジャイロセンサーを使用したものです。 PCで見たときはカーソルに追従す …
【jquery】ユーザビリティをよくするサンプルコードまとめ
制作現場では決まって時間がない。 だから決まって使うソースコードは使いまわしたいですよね。 コピペで使える便利なコードを、役割別にまとめました。 今後もどんどん追加していくので、ブックマークとしておくと困った時に役に立つ …
特定の時間で表示を変更する時限式javascript
今年のエイプリルフールは休日です。 休みの日に出社しなくてもいいように、特定の時間が来たら表示して、終わったら消す。 そんなソースコードを紹介します。 時限式で実装できるのでとてもおすすめです。 [crayon-5c96 …
写真をインスタ風にするCSSフィルターセット”Instagram.cssとfilter.css”
下手にPhotoshopで加工するよりinstagramの方がいけてる時あるよね正直。 デフォルトであるフィルタセットを使った方が、風合いが出ていいなって。統一感出すの簡単やし。 そんな時のCSSフィルターセットのIns …
テキストにインパクトを与えるBlotter.jsをこれから多用しそうな予感
テキストにとてもインパクトを与えることができるJavascriptを発見しました。 その名もBlotter.jsです。 読み込んでテキスト打ち替えておしまい。超簡単。 Blotter.jsをダウンロード 公式サイトはこち …
Javascriptの慣性スクロールはSCROLL MANAGERを使う
とっても便利なススクロール系Jsを発見しました。 しかもMITライセンスときたら、使わせてもらうしかない。 では手を合わせて。いただきます。 SCROLL MANAGER とりあえず見てもらえるとわかります。 アニメーシ …
画像スライダーを作るのにSwiper.js以外のプラグインはもう要らない
かなり強気なタイトルですが実際に最近の案件でSwiperというjavascriptのプラグインを使っております。 もう現場ではSwiper.js以外のJsは必要ないと思います。 Swiper.jsの特徴 Swiperの特 …
Adobe XDとSketchで飲食店のサイトを作る【後編】
やっとムスリム向け日本食レストラン”HALAL SAKURA”様のWebサイトを公開しました。 いやー感無量ですね！東京のクライアントを相手に大阪から初めてフルリモートで全ての工程を終えることができました。 おめでとうご …
wow.jsでスクロールをトリガーにしてアニメーションさせる
wow.jsを使うととても簡単にスクロールアクションを設定できます。 スクロールを着火させるためにwow.jsでトリガーを設定→animate.cssを使ってアニメーションを設定。 この方程式は2年くらい使い続けています …
jqueryを使ってレスポンシブサイトでパララックスを使う
僕が使い慣れている、一番簡単なパララックスのjqueryのプラグインを紹介します。 パララックスを使う理由 写真素材をもらってからの制作依頼はとても多いでしょう。 だから、できるだけ写真素材がいろんな角度から見えるように …
jqueryでマウススクロールのスピードを調整する
スクロールのスピードはjaueryを使って調整することができます。リッチに見せるための表現技法としては古くからありますね。 スクロールのスピードを調整すると文章をじっくり読ませることができます。 コピペして使えるjque …
サムネイルがアニメーションしてループするスライダー
よくサイトの横幅いっぱいに画像が流れていくやつをみます。 カルーセルスライダーと同じものなんですが、もっとダイエットしているシンプルなものを作りたかったので、調べていました。 じゃあ見つけました。 いつも参考にさせてもら …
ブックマーク必須 コピペして使うCSSアニメーションのスニペット 「animista」の使い方
めっちゃアニメーションの微調整がめんどくさいWebデザイナーの平尾誠です。 とはいえ、Web制作においてアニメーションはユーザビリティにおいて、今やなくてはならない存在です。 でも公開間近にアニメーションを追加しろ！！な …
レスポンシブでの画像の振り分け方
先日、Webデザイナーでおそらく知らない人はいないだろうブログ・Webクリエイターボックスを読んでいてobject-fitプロパティなるものが衝撃だった！ 知らないCSSがまだまだ出てくるんだなーと。 1行追加でOK！C …
実装あるある・YOUTUBEのサムネイルをオリジナル画像にしたい。
同じようなマークアップを何度かしたことがあります。youtubeのオリジナルサムネイル機能を使うとかそういう話ではなくて、iframeの上に画像を乗せてクリックしたら動画が始まるってやつを作ります。とってもシンプルなので …
jqueryでsliderを自作するなら
Webデザイナーの平尾誠です。シンプルなスライダーごときならわざわざプラグイン入れる方がめんどくさかったりする。 だから現場でサクッとコピペして使えるようにここにライブラリとしておいておきますので、みなさんもコピペして使 …
jQueryで画面の一番下までスクロールしたかどうかを判定
Webデザイナーの平尾誠です。よくスクロールイベントを使うことがあるので備忘録。 jqueryを使って画面の一番下までスクロールしたかどうかを判定します。 ドキュメントの高さ – ウィンドウの高さ 単純に引いて値を求めて …
Node.js初心者が使いやすいejsの便利なスニペット
LIG.incのWebでデザイナー平尾誠です。フロントエンドの開発環境が近年複雑すぎてついていけていない僕です。HTMLでコーディングすると、特にwordpressを想定しているブログなんかのコーディングをするととっても …