【jQuery】超簡単に実装できるモーダル・ウィンドウ［Remodal］の使い方
今日は超簡単にポップアップ・ウィンドウを実装できる［Remodal］を紹介します。 まずは下記リンク先より、実際の挙動をご確認ください。 オンズの実装サンプル : https://on-ze.com/demo/jquery-remodal/ ファイル容量が軽いため挙動も早く、レスポンシブ対応で、アニメーション部分はCSSに依存しています。 後で紹介するスタイルシートの［remodel-default-theme.css］がアニメーションを司っていて、そこで動作の処理を指定する仕組みになっています。 以下、実装方法を紹介していきます。 ［Remodal］の必要なファイルを読み込む はじめに［Remodal］の公式サイトより、必要なファイルを入手してきます。 Remodal : http://vodkabears.github.io/remodal/ GitHub : https://gith
夫の仕事のやり方が昭和すぎる
無事に保育園がきまったので、夫にスマホのカレンダー共有アプリの導入を夫に提案した 子供が保育園で熱を出した時にどっちが迎えにいくのか、看病で休むのかを素早く判断したい、が最初のモチベーション ちなみに共有する情報は、平日はどうしても外せない用事や会議体、保育園のイベント、休日は遊びに行くときの情報程度を想定していた 結果は、夫大激怒で完全否定 一方的に怒られて驚いたが、怒る理由にあとからもやもやが出てきた 深夜授乳をしつつ、書き殴ってみる 彼の言い分は以下の通り 仕事のスケジュールは水モノである それをいちいちスマホをパチパチして最新の情報に更新する手間は無駄でしかない 会議の時間帯以外にも準備時間もある。優先順位の高いスケジュールだけでいい、と言うが俺にとっては全てが最高の優先順位かつクオリティもMAXに持って行くべき仕事で全てスケジュールは埋まっている 単にスケジュールを見せたところで
どこよりも詳しい万能スライダーjQueryプラグインslick.jsの使い方 | ITハット
どこよりも詳しい万能スライダーjQueryプラグインslick.jsの使い方 いろいろなスライダー・カルーセルjQueryプラグインを利用してみて、一番簡単でカスタマイズ性に富んだものがこのslickです。非常に便利な分、注意しなければならないこともあるので、その点も含めて紹介したいと思います。 導入 ダウンロード http://kenwheeler.github.io/slick/ サイト上部のメニューのget it nowをクリックします。 Download Nowをクリックでダウンロードすることができます。 読み込み <head> ... <link href=".../path/to/slick.css" rel="stylesheet"> </head> head 内で slick.css を読み込みます。 ... <script src="https://ajax.google
【入門編】今さら聞けない！PHPとは【初心者向け】｜現役エンジニアが解説
[PR] PHPを学んで未経験からWebエンジニアを目指す方法とは PHPでできること PHPを使うと、ひとつのページに様々な情報を反映して動的なページを作ることができます。基本的にPHPでよく使用されるのは次の３つです。 HTMLソースコードを生成する PHPを使うと、HTMLソースコードを作成することができます。すべての文章をPHPで書く必要はなく、HTMLの一部分のみPHPで生成するということができます。 データベースと連携する PHPを使うとMySqlやPostgerSQLなどさまざまなデータベースと連携したWebサイトを簡単に作成することができます。 ブログや掲示板などのサイトは、記事をデータベースに記録し、サイトへのアクセスがあるとPHPでその記事のデータをデータベースから読み込んで表示させています。 クライアントから送信された情報を受け取る HTMLのフォームでユーザーが入力
noindexとは? SEOでの効果的な使い方を理解しよう!｜アクセス解析ツール「AIアナリスト」ブログ
こんにちは。SEO支援サービス「AIアナリストSEO（オールインワンSEOサービス）」ライターチームです。 今回は「noindex」について解説します。 noindexは、効果的に利用することでサイトの評価を上げ検索順位のアップが期待できるため、SEOに欠かせない施策のひとつです。 設定するとどんな効果があるのか知りたい 聞いたことはあるけれど使い方がわからない という方は、ぜひこの機会にnoindexの基本を理解してみましょう。 目次 noindex とは? 実際に使用されるケース noindex のSEO効果 noindex の設定方法 ファイルに直接タグを挿入する場合 WordPressで設定する場合 noindex 設定上の注意 noindex で質を高め順位の上昇を目指そう! noindex とは? noindexとは、Googleの検索エンジンにインデックスされないようにするた
webnonotes.com - webnonotes リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
IE11のバグまとめ - Qiita
バージョンごとに進化するIEのバグ 備忘録も兼ねて記事にまとめました。 バグについての解決策と補足も併せて記載してますが、 記事に記載されていない遭遇率高めのバグやより良い解決策などがあれば、是非フィードバックをお願いします。 まとめてみた所感としては、IE6の頃から根本的な部分は変わってない気がします。 （ただし、パフォーマンスが大幅にアップしたのは認める。） IE11はWindows10の場合、2025年までサポートが続きます。 https://support.microsoft.com/ja-jp/lifecycle/search/18165 ﾅﾝﾃ／(^o^)＼＼(^o^)／／(^o^)＼＼(^o^)／／(^o^)＼ｺｯﾀｲ もうね...アボカドまるごとバナナかと。 ちなみに今年の4月でVistaがサポート終了するので、1ヶ月後にはIE9を窓から放り投げてOKです。 https:/
描画モードが乗算のオブジェクトをデザイン通りにスライスするPhotoshopテクニック｜BLOG｜株式会社エムハンド
文字だけだと分かりにくいので簡単なデザインを5秒で用意しました。ダサいとか言わない。 コルク模様の背景に矢印が半透明で乗っかってます。 まぁまず間違いなく最初は、 「背景はCSSでリピートさせて、その上に矢印を透過pngで配置すればいいやー。」 ってなります。…なりますよね？ コーディングしてブラウザでチェックしてみました。 アレ？なんか違う……。 デザインでは半透明の矢印ごしにうっすらとコルク模様が見えていたのに、一色で塗りつぶされてしまいました。 ……何故！？ 結論を先に言ってしまうと、レイヤーの描画モードが「乗算」や「オーバーレイ」など、「通常」以外になっていることが原因です。 これらの描画モードはその下のレイヤーに依存して見た目が変わるので、透過pngを書き出すために背景を不可視にした時点でコルク模様が無くなってしまっている訳です。 ちょっとしたアイコンくらいならopacityで誤
Illustratorの効率化に！ショートカットキー一覧とカスタマイズ方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
今回はWebデザイナーがよく使うIllustratorの便利なショートカットキーをご紹介します。 macの場合とWindowsの場合それぞれで記述しているので、該当する欄をご確認ください。 また、ページ後半では、作業効率が上がるおすすめのカスタム方法も紹介しています。こちらもぜひご覧ください。 独学でつまずいていませんか？ Illustratorの使い方を効率的に学びたい、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGでもWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。「今すぐスクールの概要を知りたい！」という方は、ぜひこちらより資料をご請求ください。
【 バナーデザイン・アーカイブ ★★★ 】 - 様々なバナーのデザインを一覧でチェック！
バナーデザインをまとめたサイトです。様々なバナーのデザインをサイズや色から選んで一覧でチェック！バナー作成の参考にご活用ください！
100種以上の自社広告運用でわかった！バナー広告クリエイティブ4つの基本 : LINE Corporation ディレクターブログ
こんにちは、ウェブサービス本部の宮澤です。私は現在、自社コンテンツ内で自社のサービスをPRするため自社広告の管理を担当しています。 NHN Japanには数多くのサービスが存在するため、常時20〜30の自社広告が運用されています。自社広告は細かく効果測定を行うことが可能なので、毎週5〜10のバナーを入れ替えながら最適化を図ったところ、コンバージョン率、クリック率など、ほぼすべての指標で広告効果が向上しました。 自社広告の掲載メディアに関しても、livedoor、livedoorニュース、livedoor Blog、NAVER まとめ、各種アプリと多岐にわたっており、今では新規ユーザー獲得のための重要施策の一つとなっています。 今回は100種類以上の自社広告を制作、運用してみてわかった、効果の高い広告クリエイティブを作るためのコツをご紹介します。 1. 笑顔 VS 泣き顔 まずはLINEの自
CGがない時代、映画やテレビ用のロゴは物理的に作り出されていた。そのメイキングの舞台裏｜カラパイア
テレビ番組の最初に出てくる番組のロゴ。映画の初めに流れる制作会社やスタジオのロゴ。それから、新聞や雑誌の題字。こういったロゴはその番組や会社の顔ともいえる重要なものだから、当然、どの会社も作成に力が入る。 今はコンピュータ・グラフィックでつくられているけれど、その昔…というほどでもない、「ちょっと昔」までは物理的な手段でつくられていたそうだ。放射状に見える線も実はワイヤーだったり、回転する地球も、地球の模型を回していたりと、知恵と工夫を凝らして印象的なロゴを生み出していたようだ。 レオ・ザ・ライオン この手のロゴで最も有名なのは、おそらくMGM社の「レオ・ザ・ライオン」だろう。ハリウッド映画の冒頭でガオーッと吼えるアレだ。ライオンのロゴが最初に登場したのは1916年のこと。それから現在までに、7頭のライオンが代替わりしつつ登場している。 この画像を大きなサイズで見るimege credit
Appleに学ぶ、横スクロールナビを組む時のCSSメモ - Qiita
やりたいこと 横スクロールするナビを組みたい … ① スマホ(iOS)で慣性スクロールにしたい … ② スクロールバー非表示にしたい … ③ ②と③を両立させたい ① 横スクロールするナビを組みたい スマホサイトでよく見る上図のようなナビゲーションを組みたいとします。 今回は、一つ一つの li を table-cell にし、水平に並べつつ、ウィンドウからはみ出た分を overflow-x: auto; で横スクロールさせるシンプル組み方で考えます。 デモ → https://s.codepen.io/skwbr/debug/QjaBLV/NjrYzwNZpgwA (コードは下記にて) ② スマホ(iOS)で慣性スクロールにしたい overflow: auto; をかけている要素に下記を指定すればOK。 ③ スクロールバー非表示にしたい webkit独自拡張の ::-webkit-scro
レスポンシブWEBデザインの基本 max-widthで中央揃えレイアウト - ECサイト構築運営に役立つ情報発信｜モバイルファーストマーケティングラボ
レスポンシブのセンタリングレイアウトはwidthではなくmax-width 今回は、レスポンシブWebデザインの基本技として、サイト全体のレイアウトをセンタリング（中央寄せ）する方法をご紹介します。 センタリング（中央寄せ）のレイアウト 今回ご紹介するのは、例えばこんなレイアウトです。 【国産・天然】 フルーツマカロン｜ま果ろん 公式通販サイト こちらのサイトを開いて、ブラウザの幅を変化させてみてください。 960pxまでは余白があり、それ以下では消えてしまいますね。 つまり、 PCで開いたとき→画面の大きさが十分にあるので、左右に余白を作ってサイト全体を見やすくする タブレット・スマホから開いたとき→画面が小さくなるのでコンテンツの可読性を保つために余白を消して画面いっぱいの幅に表示する というような使い方ができます。 実際にコーディングをしてみる 前置きが長くなりましたが、コードは非常
【Labs】スマホサイト向け横にスクロールするナビゲーション
こんにちは（・∀・） 今回はスマホサイト向け、横にスクロールするナビゲーションのサンプルをご紹介します。 Contents 慣性スクロールでヌルっとスクロール 横スクロールバーデフォルト表示ナビゲーション スマホ向けスクロールナビゲーション スマホサイトのナビゲーションといえばハンバーガーボタンをクリックして、トップやサイドからポップアップしてくるメニューを思い浮かべる方も多いと思います。 今回ご紹介するスマホサイト向けナビゲーションは、横並びのボタンをそのまま横にスクロールするというとても単純なナビゲーションとなっております。 この横にスクロールするナビゲーション、使ってるサイトも最近は増えてきていますね。 1. 慣性スクロールでヌルっとスクロール 慣性スクロールはナビゲーションを横にスクロール際、ヌルーっとスクロールするさせる方法です。webkit系のブラウザのみ対応となります。 HT
レスポンシブWebデザインのサイトでデバイスやウインドウ幅によってJavaScriptの処理を条件分岐させる | 福岡のホームページ制作会社 | シンス株式会社
こんにちは、福岡のホームページ制作シンス株式会社の越水です。 レスポンシブWebデザインでホームページ制作を行うとき、「スマホの時だけJavaScriptの処理を加えたい」なんてことあったりしますよね。 今回はそんな時によく使うJavaScriptの条件分岐について書きたいと思います。 レスポンシブWebデザインではウインドウ幅、またはUA（ユーザーエージェント）によって処理を分けることができる例えばスマホでホームページを見た時だけ動作させたい画像スライダーがあったとします。 何の情報をもとに条件分岐させればうまくスマホだけで動作させることができるでしょうか。主に2通りの方法があります。 ウインドウサイズの横幅によって条件分岐使用デバイスのUA（ユーザーエージェント）によって条件分岐前者はCSSのメディアクエリーを使うことでウインドウサイズによってレイアウトを変更させるのと似たような方法で
デバイスに合わせてCSSを振り分ける「Media Queries」 | DevelopersIO
Media Queriesは、読み込まれるCSSや、CSSの記述のインラインに条件を加えること出来るようになる仕様です。 今までもCSS2のMedia typesを使い、screenやprintなど大まかなメディア用スタイルを設定することはできました。ですが、それでけでは昨今のスマートフォン、タブレット端末事情にはとても対応できません。JavaScriptで対応する方法もありますがシンプルではありません。そこで、CSS3だけで振り分けが可能になるのがMedia Queriesという仕様です。 Media Queries Media Queriesはユーザーの端末、スクリーンサイズをもとに適したスタイルシートを適用することができます。Media Queriesを利用することで、PC用スタイルシート、タブレット用スタイルシート、スマートフォン用スタイルシートと個別にスタイルを指定することができ
ポスターギャラリー｜そうだ 京都、行こう。
京の都ができるより遥か早く拓けた宇治。宇治川を中心とした美しい景観に恵まれ、やがて多くの平安貴族の別荘地へ。平等院も元は藤原道長の別荘でした。やがて自然災害、内乱、疫病などで社会に不安の兆しが現れます。ついに道長没後25年目の一〇五二年、末法初年に長男頼通が寺への改修に踏み切り、名前も平等院へ。高さ3m近い阿弥陀如来坐像や周りの「雲中供養菩薩像」を揃えた彼の願いは、極楽の様子をこの世に具現化して、人心の不安を救うことだったのでしょうか。 写真は鳳凰堂。雲中供養菩薩像は平等院ミュージアム鳳翔館で。平等院／京都府宇治市蓮華一一六／京都駅からJR奈良線「宇治駅」下車 2023年11月撮影。広告上の演出を施しています。 キャンペーンページをみる ＞
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
kougetsudo.info - このウェブサイトは販売用です！ - kougetsudo リソースおよび情報
FIND/47｜みんなで集め、広めていくフォトアーカイブ。
