注目のストーリー
Web制作
【Swiper】サムネイルのマウスホバーとスライダーを連動させてみた
さて今回は、メインのスライダーとサムネイルがあるデザインで、サムネイルをホバーするとメインのスライドが切り替わるようにします。swiperのメソッドを使用してシンプルに実装できるので、是非使ってみてください！基本の連動するスライダーを作成まずは基本となるスライダーを作成します。この状態では、クリックで連動します。thumbsでサムネイルにしたいスライダーのインスタンス名thumbnailSwiperを指定すると、2つのスライダーが連動するようになります。thumbs: { swiper: thumbnailSwiper}メインスライダーのコードをサムネイルにしたいスライダーの前に書くと...
内定者。ただいまアルバイト中。
今回はアルバイトでの感想をつらつら並べます。ゆっくり見ていってください～インターンシップの経験バイトの話！とありますが、まずはインターンのお話を少し。昨年の夏頃、1週間インターンとしてお世話になりました。マークアップの課題を頂いて、それに取り組みながらロジカルでの業務を体験しました。課題は先輩方のサポートのもとで取り組んだのですが、学ぶことが多くて……私はもともと個人的に学習していたのですが、実務での実装で気を付けるべきことについてしっかりとレクチャーしていただき、その後のコーディングにめちゃめちゃ役立っています。見やすいコード、わかりやすい設計を心掛けてはいたのですが、まだまだ甘かった...
GSAPでスナップする横スクロールを作ってみた！
こういうのでもスクロールするのが面倒だったり、自分の知りたい情報が画面に収まらない！などちょっとストレスに感じる人もいるかと思います。そこで、少しのスクロールでスナップするようにできる横スクロールを作成します！完成したコードまず基本となる縦スクロールすると横にスクロールされるを作成する必要があるのですが・・・・それを簡単に叶えてくれるのがGSAPです。JavaScriptライブラリで複雑なアニメーションも簡単に実装することができます。そんなGSAPを使用して作ったのがこちらです。GSAPについてライセンスGSAPは２つのライセンスがありStandard(標準ライセンス):無料Busine...
z-indexが効かない！？そんな時はスタックコンテキストに注目してみよう！
今回の記事では、僕が学習を始めて間もないころに苦戦した『z-indexとスタックコンテキスト』についてピックアップしました。（嫌な記憶を呼び起こしながら・・・）それでは本題に入ります！CSSにおいて、z-indexの値で要素の重ね順を操作すると思いますが、スタックコンテキストの罠にかかると、うまく制御できない事態に陥ってしまいます。そもそもスタックコンテキストとは？重ね合わせコンテキスト (Stacking context) は、ビューポートまたはウェブページに面していると想定されるユーザーに対する仮想的な Z 軸に沿って並べられた HTML 要素の三次元の概念化です。 HTML 要素は...
追従の実装はposition:stickyが便利！
そんな皆様お馴染みのpositionとは、要素の位置を決める際に使用するCSSプロパティです。要素を重ねたり固定したり、より自由な配置が可能になりますよね。ありがとうposition🎌そんなハイスペックpositionには、下記のような5つの値を指定できます。私はこれを見て思ったんです。sticky・・・？上の4つは普段から大変お世話になっているのですが、stickyは初めましてだったのです💨調べてみると、何やらすご～く便利だそうで。名前もかわいいし🤗ということで今回は、position:stickyについて私が学んだことを書いていこうと思います！position:stickyとはなんぞ...
clip-pathで多角形を作ろう！
ということで、今回はclip-pathプロパティを用いて、多角形をCSSで簡単に作る方法をご紹介したいと思います！最後には上記のような矢印背景の作り方もご紹介していますので、是非最後までご覧ください！■そもそもclip-pathとは？clip-pathプロパティを使用すると、要素や画像をクリッピングして（切り抜いて）表示させることが出来ます。clip-pathプロパティでクリッピング領域を設定すると、クリッピング領域の内部の部分は表示され、外部の部分は非表示になります。参考：clip-path – CSS: カスケーディングスタイルシート | MDNIllustratorやPhotosh...
リストを縦並びで折り返すのはCSSのgridで解決
・list01 ・list02・list03 ・list04・list05リストを2列で並べるときはflexを使用することが多いと思いますがこのような順序になります。・list01 ・list04・list02 ・list05・list03今回はこのように縦並びにします。【PC】liタグを縦並びに2列で並べる【SP】liタグを縦並びに1列で並べるさらに、PCとSPでの表示はこうしたいのです💪これが結構悩みどころです。。。今回は、これまでよく使っていた方法と、gridを使って縦並びにする方法をご紹介します。方法1 flex.list { display: flex; flex-wr...
【ScrollTrigger】リサイズ時などにプロパティ内で動的に関数を再計算させる方法
はじめに今回はScrollTriggerの実装をする際、リサイズ処理などのイベントでプロパティに別の値を指定したいのにもかかわらず、 プロパティ内で関数が動的に動かず、値が初期値のままという状態になったので、その実例と、失敗の備忘録も兼ねて、解説していきたいと思います。失敗例では、まず失敗例がこちらです。リサイズをしてブレイクポイントが変更されると、ヘッダーの高さが変更されたことにより、「スクロールを固定したstartの初期値 - レスポンシブによるヘッダーの高さの変更分」の余白が空いてしまい、背景の黒色の余白が見えてしまいます。▷DEMO※リサイズできる環境推奨です。▷ソースコード//...
Reactってどうなの？Vue.js・Angular経験者が触ってみた～困りごととその解決法をまるっと紹介～
まだまだ暑いこの季節、新卒の方はいよいよ新しい会社に慣れてきたかな？という時期ではないでしょうか。弊社ロジカルスタジオにも新卒の子が７人も入ってきてくれています。しかし、入社式の自己紹介で知れるものといえば、名前、趣味、地元くらい…そんなとき、お酒を共にすれば、あんなことやこんなことも知れて、仲良くなりやすいもの。さて、今年の頭ぐらいに、私には新卒の子以外にも「名前くらいしか知らないが、仲良くなりたい」という方がいました。そして、ディレクターに根回しをしつつ、仲良くなる機会を伺っておりました。そんなある日のこと…そう、私が仲良くなりたい方の名前はReactといい、Vue.js、Angul...
BlenderとThree.jsを使って3Dモデルで遊んでみた〜モデリング編〜
そんなネオンを光らせて何をしてるねんということで、本日は3Dモデリングをテーマに解説していきます！5Gが普及しつつある昨今、3DCGを用いたWebサイトを見かけることが増えてきました。これからますます身近になるであろう3DCG、一体どのように制作されているのか気になりませんか？そこで今回Blenderという3DCGソフトを使って、弊社ロジカルスタジオのロゴのモデリングを解説していこうと思います！Blenderを使ってみたい方や、3DCGを使ったWebサイト制作に挑戦してみたいという方の参考になれば嬉しいです！そしてゆくゆくは、three.jsで3Dモデルや3Dアニメーションを実装し、we...
【つくってあそぼう：01】noteのヘッダー
あっという間にGWですね。４月から新入社員が入ってきて会社がにぎやかになってきました。私が新入社員で、デザイナーとしてのはじめての仕事は社内の採用パンフレット作りでした。数年経っても社内のデザイン業務を時たまします。ということで、今回は社内のnoteのヘッダーをつくりました。折角自由にデザインさせてもらったので、コンセプトや作業方法を書いていこうと思います。01.コンセプトを決める「色々書いていいよ！」の元、デザイナーやディレクターが様々な内容を書くので、「雑多」「集合体」とかを最初にイメージしました。ここからは連想ゲームです。で、自分の中で出たコンセプトが「マンションの窓」です。いろん...
浴場にもたれてふける #02千林大宮神徳温泉 「２０２１年、迷ったら金の十字架のネックレスで」
日常から少しだけはみ出せる唯一の場所、銭湯。浴場を通して各々が社会と曖昧な関係となり、つかの間の極楽を得る。公共空間でありながら、時間の流れは自分だけのもの。裸一貫、ワンコインで、あなたとわたしの境目である湯へ目指す。 陽が明らかに長くなり、まだ夕日が眺められるのかと、退勤後の社屋の外階段でぼんやり弄ぶ時間が増える。直帰するにはまだ足りない気がするが、飲み場に繰り出すこともめっきりなくなってしまった。涼しいような、ぬるいような風に当てられ、私は家とは逆方向に歩を進めるのが常になった。ビルとビルの間の、Hzが少ない道を選ぶ。携帯からは小さく昨晩の深夜ラジオか、地方のお気に入りの音楽番組を鳴...
