CSSで要素の表示・非表示を切り替える方法いろいろ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。フロントエンドのつっちーです。 要素の表示と非表示を切り替える方法って、同じことをやっているように見えて、実はたくさんありますよね。 これまで無意識に使い分けていましたが、いま一度整理しておこうということで、まとめてみました。 表示・非表示の切り替えに使えるCSSプロパティ 他にもあるかもしれませんが、私は主に下記のプロパティで切り替えを実現しています。 opacity visibility display では一つひとつ、特徴と用例をみていきましょう。 1. opacityの切り替え See the Pen 191001 by ligdsktschy (@lig-dsktschy) on CodePen. 特徴 非表示のときも、領域が確保される クリック／タップ可 transition可 用例 「要素を、スクロールによって画面内に入ったときに表示させる」など。見えるか見えない
「会いに行けない」企業のエースと10分間話せる！Onepairで運命の出会いをしよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
僕のカレンダー見てくださいよ。 気づいたら一週間くらい先までいろいろな人に予定を入れられています。毎日目の前のタスクで精一杯。まとまった時間を取るには平日昼間は物理的に不可能、20時以降しか空けられないという状態が続いています。 ふとした瞬間に、そんなふうに自問自答することもあります。 僕の場合、いまのメンバーとまだ一緒に働いていたい、まだまだ部下を育てきれていないということもあり、いますぐ転職というのはあまり考えていません。でもリーダーやマネージャークラスの人であれば、転職は誰でも選択肢のひとつとして常に考えていると思うんです。 とはいえ彼らは平日昼間は物理的に不可能、20時以降しか会えない組。これは採用する側も同じで、実際に僕自身が面接官をする場合、よほど大事な面接でない限りは予定を空けられません。 自分でいうのもなんですが、企業のエース級の人が時間を作るって大変なことなのです。 求職
「え？それそんなかかるの？」簡単そうに見えて案外時間のかかるWebサイト上のJavaScriptあるある仕様8選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
多！ そのため、仕様の洗い出しが不十分になりがちになる、という点で厄介です。 ただし、今はSwiper, Slickといった優秀なプラグインがあります。こいつらは大抵の仕様は満たしてくれますので、積極的に使うと良いと思います。 参考 Swiper Slick フィットスクロール 厄介度：★★★ 紙芝居スクロールなどといったりもします。 海外のオサレなブランディングサイトや、ランディングページなんかでたまに見かけますね。 カッコイイ！うちもこんなんやりたい！と思うかもしれません。がしかし…… イメージ ハマりポイント スクロールに関する他の機能実装 これを実装する場合ブラウザにデフォで備わっているスクロールは使わず、別の方法（CSSのtransformとJSを組み合わせるなど）で実装することになるかと思います。 するとまず、スクロールイベントが取れないんですね。 そのため、スクロールに合わせ
Adobe XDなしにはもう生きられない！これからのWebデザイナーのワークフローが変わるかも!? | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ 野尻湖オフィス デザイナーのずんこです。 最近追加された新機能を確認してみたら、Adobe XDが大幅アップデートされ、さらに誰でも使える無料プランまで提供されていて、改めてすごく進化していることに気づきました。 今でこそ社内のディレクターもデザイナーもXDを使用していますが、XDがこんなにメジャーになる前に社内にXDを普及させようと書いた記事があります。 これ以降XDを使ってなかったそこのあなた。この進化ぶりには目をみはるはずです！ そしておそらく最近のアップデートのありがたみを一番享受できるのがデザイナーなのではないかと私は思うのです。 なので再び、XDを布教する活動を行おうと思います。デザイナーの皆さん、準備はいいですか？ 軽い、早い、簡単そして安心 まず、Adobe XDはAdobe Creative Cloudを契約していれば、今すぐにでも導入できます。 XDを愛用
水中で麻雀をやるとどうなるの？実際にやってみた。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。ライターの紳さんです。 突然ですが皆さん、麻雀はお好きですか？ 「水中で麻雀をやったらどうなるんだろう？」 …麻雀好きなら一度は考えたことがあるかと思います。 水中麻雀の懸念点 水中麻雀を行う上で、2つの問題が予想されました。 1.浮力問題 麻雀牌が浮いてしまったらどうしよう？ まぁ、どうしようもなにも、浮いたらゲームオーバーですよね。仮に浮かなかったとしても、軽くなった牌がパタパタと倒れないかが心配です。 ちなみに、準備の段階で麻雀卓がものすごい勢いで浮いたので、割と絶望しました。 2.喋れない問題 水中では「ゴボゴボ…」という無機質な音だけが鳴り響きます。 麻雀は「ポン」「チー」など声で合図する場面も多く、喋れないのはかなり大きな問題です。点数申告などもどうやってやるのか、気になりますね。 まぁ、考えていても仕方ないので、とりあえずやってみましょう！ 果たして、水中で麻雀は
Twitterで本当に「つぶやける」仕組みをつくってみたら、世界が少しだけ変わった | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
僕は、世間の理不尽さにイラ立っています。 いまTwitterを見ているんですけど、このつぶやきって実際は「本当のつぶやき」じゃないですよね？ なのに、つぶやき、つぶやきって…… おかしくないですか？？ そもそも、”つぶやき”って何でしょうか。 調べてみたところ、「小さい声でひとりごとを言うこと」のようです。 でも、俺の知っている人たち、みんな文章をつくって投稿してるんですよね。 やっぱり本当のつぶやきじゃないですよね？ というわけで、つくってみる 「本当のつぶやきをつぶやけるシステム」をつくってみようと思います。 構図はこんな感じ。 1.つぶやきを集音 2.音声をテキスト化してサーバーへ送信 3.サーバー上のNode.jsからTwitterAPIにアクセス 4.あらかじめ作成しておいたbotへツイート という流れで構築していきます。 1.つぶやきを集音 今回の声の集音に使うのは、偶然PRを
「了解しました」より「承知しました」が適切とされる理由と、その普及過程について | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
あなたは「了解しました」と「承知しました」、どちらをよく使いますか？ 【アンケート】 「了解しました」と「承知しました」、どっちを多く使いますか？ — 菊池良 / Kikuchi Ryo (@kossetsu) 2016年2月25日 ツイッターでアンケートしたところ、こんな感じでした。わずかに「承知しました」の方が多いですね。 この2つの言い回しですが、「了解しました」よりも「承知しました」を使う方が正しい、とよく言われています。 僕がこれを初めて知ったとき、強い違和感を覚えました。理由は 「了解しました」をよく使っていた 日常でもビジネスでも「承知しました」を使っている人を見たことがなかった ある日、急に言われ始めた からです。「承知」が日常的な言い回しではなかったので、気になったんですね。 そこで調べてみたところ、いつから言われ始めて、どういう経路で定着したのかがある程度わかりました。
第15期 代表あいさつ | 株式会社LIG
みなさんこんにちは。今期の代表あいさつは、思い切ってフォントサイズを大きくしてみました。 フォントサイズって大きいと意外と見やすくていいですね。さて、それにしてもこの「代表あいさつ」ってたいていの企業サイトにありますが、あんまり心に響くようなものに出会ったことがないのですが、それってなんでなんですかね。どこの企業の代表あいさつも、昨今の経済状況や、自社における事業戦略やビジョンをまっとうに語っていますが、なんというか、なんら間違ってはいないですし、そのとおりなんですけど、みんな同じようなことを言い過ぎている気がします。そして、それによって記憶に残るような文章が生まれないのでは？ と思っています。 つまり、私の予想では企業のWebサイトにおける代表あいさつはすでに慣例化しており、サイト構築の際に他社でも当たり前のようにやっているので、我が社でも必要、というWeb担当者や制作側の思い込みによっ
宣伝会議賞グランプリを受賞しても何も変わらないので、何か変えようと約7か月間あがいてみたら | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、ひゃくいち（@tanabe101）です。 このたび、第52回 宣伝会議賞でグランプリを受賞したわたしのコピー「人生の半分は無職です。」が、実際に広告化されることになりました。 宣伝会議賞のグランプリ作品が広告化されるのは初めてのことではないかとも言われたのですが、今のところ真偽は不明です（詳しい方おられましたら、ぜひ教えてください）。ひとまず、過去およそ10年間においてはそういったケースがないのは確実とお聞きし、大変光栄に思っております。 2016年1月中旬以降、受賞作品のクライアントである「ゆうちょ銀行」の東京都内直営店舗（ゆうちょ銀行の緑色の看板がある店舗）において、下記でも紹介する広告ポスターが公開される予定です。ただし、店舗事情により掲出されない場合もあるので、ポスターが見当たらないところもあるかと思います。その際にはわたしのことを「ざまあみろ」と蔑んでやってください。
AVのパッケージってどんな人が作るの？元アダルト制作会社のデザイナーに聞く
すいません！スマホでよく表示されるエロバナーを作っているデザイナーの人と知り合いの方いませんか？顔出しなし、匿名でいいのでインタビューしたいです。Posted by 菊池 良 on 2015年12月5日 すると、エロバナーがメインではないけれど、以前アダルト制作会社で働いていたデザイナーの方と繋がることに成功！ 予定を変更し、AVのパッケージの作り方や業界について聞きました。約6,000字のインタビューです。 お話してくれたのはこの人 MontBlanc.（@MontBlanc04）さん。大学を卒業後、新卒でアダルト制作会社に入社。約4年間、デザイナーとしてDVDのパッケージやサイト制作に従事する。現在は転職し、スマホアプリ系の会社でUI、UXの設計を担当。 イラストに挫折してアダルト制作会社に入った ─ MontBlanc.さんは新卒でアダルトのデザイナーになられたとのことですが、まずデ
輸入ビジネスに挑戦！タイからTシャツを輸入するためにやったことや手続きのまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、LIGの社長のゴウです。 以前、タイに旅行した際に偶然であった至高のTシャツ「OUKY」。前回それを試験的に輸入してみて販売した所、2日で完売するという結果になりました。本当にありがとうございました。※詳しい経緯は以下の記事をご覧ください。 という訳で、またしてもタイに仕入れに行ってきまして、OUKY第二弾の発売が決定いたしました。そしてECサイトもリニューアルしたのでご報告いたします！ LIGのオフィシャルECサイト、LIG LIKE LIGの社員が愛するモノをお届けするというコンセプトのECサイト『LIG LIKE』。 我々が本当にいいな、と思ったモノだけを販売していきたいと思っています。まだまだ商品数は少ないですが、今後どんどん増やしていく予定ですのでお楽しみに！ 輸入をしてみて気がついたことまとめ 今回、本格的に輸入をするにあたり、正直何をどうすれば良いのかさっぱり分か
企画書に使える！信頼できるデータの引用元15選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、ディレクターのなかみーです。 新人ディレクター向けシリーズの最終回ですね。 今回は、企画書を書くときに役立つ統計やアンケート結果などを公開しているサイトをご紹介したいと思います。 データで一番重要なのは、それが本当に“信頼できるものか”ということ。 発表元が信頼できる会社であればそのデータの信頼性は高いですし、100人に聞いたアンケート結果よりも10万人に聞いた方がより正しい統計データを得ることができますよね。 企画書に使えるような信頼できるサイトをまとめたので、お役立てください。 1. StatCounter http://gs.statcounter.com ブラウザのシェア率などを調べるときに使えます。 全世界だけでなく、日本国内で使われているブラウザにフィルタリングすることもできるのが便利です。 2. Similarweb http://www.similarweb.c
たぶんスマートフォンが存在しない世界のノマドワーカーってこんな感じ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
ぼくの名前は菊池良。職業はノマドワーカーだ。 今日も渋谷のおしゃれなカフェで仕事しますかね。 まずは地図を見て、どこで仕事しようか考える。好きな場所で仕事をできるのがノマドの醍醐味だ。 このバッグに10キロ以上の様々な仕事道具が入っている。 ちなみにブランド名は「Isar Rucksack」。今、ノマドの間で話題になっているリュックだ。理由は「上質」だから、かな？ ふぅ、見つかった。今日はここ、SUZU CAFEで仕事をしよう。 ここはおしゃれだとノマドの間で評判だ。 ノマドは内装のオシャレさで生産性が変わるので、オシャレかどうかは死活問題である。 午前中は書き物の時間。昨日、クライアントから来た手紙の返信をしよう。 こういうのは即レスした方が信頼が勝ち取れるからね。 同時並行で、仕事中の写真も撮る。 クライアントに会ったとき、これを見せるのだ。 仕事している姿を見せることで、信用を勝ち取
マネジメントとは？成果を得るためにマネージャーが行う「7つのマネジメント」 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
みなさんこんにちはー、人事部長のそめひこです。 実は人事部を立ち上げ、マネージャーとなりました。 まだまだ名ばかりの部なので、しっかり貢献できるように頑張ります（立場が変わっても、菊池の指導だけは絶えずやっていきたいと思います）。 さて、最近「マネージャーって何をやっているのですか？」と聞かれることがありました。LIGでマネージャーと言えば完全な中間管理職ポジションですが、考えたことも本を読んだこともなかったので回答に困りました。 本日はそのときのリベンジマッチ、2年強マネージャーを経験させてもらった僕なりにマネージャー（中間管理職）とは何をしている人なのかを書き記していこうと思います。 マネージャーの責任とは？ さて、何をしている人なのかをお話する前に、マネージャーが果たすべき役割、どういう責任をもっている人なのかについて説明しておきます。 聞いたことがある名前かと思いますが、かの有名な
なぜCSSのborderで三角形ができるのか、実際にコードを書いて調べてみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、おじいちゃんです。 Webサイトを作っていると、デザインによってはCSSを使って三角形を作るときがあります。便利ですよね。画像だとhover時に色が変えられなかったり、作ったとしてもアニメーションがつけられなかったり、かといってSVGにするほどでもない。 CSSのborderを利用することで、三角形は比較的簡単に作れますし、アニメーションもできる。それではなぜborderを利用することで三角形が表現できるのか、考えてみたことありますか？ 今回はborderを利用して、三角形を表現できるCSSの挙動について紹介したいと思います。 まずは書いてみる 黒で塗りつぶされた三角形を書いてみます。 <span>タグに任意のクラスを当てたHTMLを用意して、下記プロパティを当てることで三角形が表現できます。 <span class="triangle"></span> .triangle{
部下の部屋でビーチ音楽祭を開催したら、大変なことになりました。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
みなさんこんにちは、LIGの社長のゴウです。 さて、俺はいま部下「そめひこ」の家に来ております。 1年ほど前に「部下の部屋を200万円かけて超オシャレに改造したら、とても喜んでくれました。」というドッキリ企画を行ったとき以来、久しぶりに来たのですが、相変わらずセンスの欠片もない汚い部屋ですね。 とりあえずサクッと掃除しちゃいましょう。 さて、今回用意したのはこちら。500kgほどの砂です。 遠慮なく撒きましょう。 ものの数分で、そめひこの部屋が砂浜になりました。 いやー、夏ですね。 キャンドルで飾り付けたら……ゲストをお呼びしましょう。 ・ ・ ・ ・ ・ ・ パーソンズのお二人です。 PERSONZ（パーソンズ）1983年結成のロックバンド。ドラマ『ママハハ・ブギ』（TBS）の主題歌「DEAR FRIENDS」や、オリコンチャートNo.1アルバム『DREAMERS ONLY』がヒットした
世界最大？CTOに頼まれて、タイでAzure（アジュール）を釣ってきたよ♡ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。「いいオフィス」の管理人兼PRディレクターのゆうです♡ 先日、LIGのCTOであるづやさんからこんなお願いをされました。 「ゆうさん、Azure（アジュール）の導入を検討しているんで、どういう利点があるかとか、調べといてもらえますか？」 「Azure・・・？ わかりました」 ・ ・ ・ ・ ・ というわけで、タイの｢ブンサムラン・フィッシングパーク」に来ちゃいました♡ ここは世界で一番大きい釣り堀で、30〜40キロのでっかいAzureが釣れることで有名なんです♡ この釣り堀で巨大なAzureを釣り上げた人たちの写真が飾ってあります。大き〜い♡ 中にはレストランもあって、こんな風に食事を楽しんだりもできます。 タイの国民的ビール、シンハービールを頼んでみました。さっぱりしていて、美味し〜い♡ きれいな水面だよ〜！ これ全部釣り堀で、中で養殖もしているんだって♡ おじさんが釣りで使
独立して起業するには？資金調達や不動産登記、オフィス探しなど起業に必要なことまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、LIGブログ編集長の朽木です。“ちくしょう。転職だ。”のキャッチコピーでおなじみの某社のバナーに出演している（というより気がついたら使われていた）のですが、友人知人からインターネットのそこかしこで僕を見かけた旨の連絡を受けることがよくあります。 都度頂くのは「本当に転職するのか」という至極当然なご質問であるわけですが、しねえよ！ 少なくともYouTubeとかMeryとかみたいなお茶の間の目が届く範囲で転職願望をつまびらかにすることはねえよ！ でも、クリック率は高いとのことです。本当にありがとうございます。 とはいえキャリアプランはいつでも複数検討しておき、最善の選択をしたいものですから、転職あるいは独立して起業というのも日頃から十分な知見を得ていたいと思うのです。 IT/Web業界にいると独立して起業される諸先輩方もたくさんおられるため、「あー、やっぱり」「まさかあの○○さんが
【2015年度版】イケてるデザインの国内コーポレートサイトまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちはデザイナーの藤田です。 最近、節約のために毎晩の楽しみである晩酌のビールを発泡酒に変えました。 さて、そんな私は最近コーポレートサイトのリニューアルを担当させていただく機会が多く、その際にお客様にリニューアルの方向性として提示させていただく「参考サイト」のストックがたまってきたので、今回のブログでは「イケてるコーポレートサイト」をご紹介したいと思います。 イケてる国内のコーポレートサイトまとめ ハウスウェルネスフーズ株式会社 http://www.house-wf.co.jp/ コーポレートサイトならではの清潔感や見やすさを担保しつつも、ホワイトスペースを十分にとることで、今っぽいデザインになっています。 ヤンマー株式会社 https://www.yanmar.com/jp/ 企業の先進性をデザインで表現しており、今後このようなデザインがコーポレートサイトのスタンダードになるので
日本語で「餅は餅屋」って言うけど、餅屋の餅を食べたことがない。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
僕の名前はコーディ。ニュージーランド生まれの24歳だ。LIGではデザイナーをやっている。 日本は不思議の国だ。日本の小説を読んでいると、ときどき「ん？」と思う表現がある。例えば、これ。 餅（もち）は餅屋 餅は餅屋のついたものがいちばんうまい。その道のことはやはり専門家が一番であるというたとえ。餅屋は餅屋。 出典：goo辞書 餅は食べたことがあるけれど（コンビニで売っているから）、餅屋の餅は食べたことがない。 どれだけ美味しいの？ 餅屋の餅。 だから餅屋に行った 電車に乗って、僕は餅屋に行くことにした。 電車の窓から景色を見るのは楽しい。東京の景色はSF映画の中に迷い込んだみたいだ。 前景の樹木と、後景のビルディング。この大胆なセッティングは浮世絵に通じるものがある。 着いた。 スカイツリー。どれだけ見上げても、頂上が見えないのがすごいね。 そういえば以前、歌川国芳の絵にスカイツリーが描かれ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
