仕事でパソコンを使いこなしたい 就職・転職に有利な資格を取りたい お得に受講したい デザイナーを目指したい エンジニア・プログラマを目指したい CAD設計の仕事に就きたい 副業・フリーランスで仕事がしたい 社員の研修がしたい
Google アナリティクス個人認定資格(GAIQ)は Google アナリティクスの習熟度を認定する資格で、Google アナリティクス理解度テストに合格した個人に付与されます。認定ユーザーになることで、社内でも社外の顧客に対しても Google アナリティクスの機能を最大限に活かせるようになります。理解度テストを受験して認定資格を取得するには、Google のオンライン トレーニング プログラムであるスキルショップをご利用ください。 はじめに スキルショップのアカウントをお持ちでない場合、認定を受けるのに必要な Google 広告の理解度テストにアクセスするために、アカウントを作成する必要があります。詳しくはスキルショップ アカウントの設定方法についての記事をご確認ください。 Google アナリティクス個人認定資格(GAIQ)の仕組み Google アナリティクス個人認定資格(GAI
ウェブデザインについてまったくわからない頃によく見て勉強してた資料群です。+いくつかの自分で作った資料 SlideShare 色彩センスのいらない配色講座 色相、明度、彩度で色を説明できるようになる。 ベースカラー、メインカラー、アクセントカラーで配色を説明できるようになる。 その上で、あまり間違いのない色の選び方がわかるようになる。 ノンデザイナーのための配色理論 最後に紹介されているこのツールがベースカラー、メインカラー、アクセントカラーを決める上で便利。 ウェブサービスの企画とデザイン 僭越ながら明治学院大学で講義した時に作った資料。 なんとなくウェブサービスを作るときの流れとか感じてもらえたら幸いです。 かんたんキレイなウェブデザイン 僭越ながら勉強会 (UT Startup Gym) 用に作った資料。 なんとなく CSS フレームワーク、グリッドシステム、レスポンシブデザイン、ウ
【jQuery】[Masonry]の表示の不具合を解消するために[imagesLoaded]を併用する方法。 [jQuery Masonry]を使う際、Webkit系のブラウザ(Safari、Chrome)によっては、読み込みの際にボックスが重なり、初動では意図したように表示されないケースがあります。 巷のブログでは、その不具合を解決するために「<img>要素に[width][height]属性をそれぞれ記述しておけば大丈夫」という記事を見かけます。 しかし実際には、その方法では問題を解決しきれません。 そこでお勧めするのは、同じjQueryプラグインの[imagesLoaded]を併用するワザです。 [imagesLoaded]を使うと、画像を表示する際、先にデータを完全に読み込み、読み込みが完了した後に任意の処理を実行できるようになります。 この特性を利用して、[Masonry]側の計
若者を中心に爆発的な人気となり、ユーザーを増やし続けているInstagram。Web関連の仕事をしていると、最近ではクライアントからも「Instagramを使いたい」という要望も聞くようになりました。Instagramが今どうなっているのか?どう活用し、どのように見てもらうのか、初歩的な内容から少し専門的な内容まで、参考になるサイトや記事をまとめました。
可変のグリッドレイアウトを実現できる JS ライブラリ、 Masonry は非常に便利でお世話になっているのだが、問題が起こって解決したのでメモ。 問題 以下のように、画像をラップしたブロックを Masonry で配置すると画像の高さが反映されずにブロックが重なって表示されてしまう。 <div class="container"> <div class="item"> <img src="sample1.jpg"> <p>hoge</p> </div> <div class="item"> <img src="sample2.jpg"> <p>fuga</p> </div> <div class="item"> <img src="sample3.jpg"> <p>piyo</p> </div> </div> var container = document.querySelector('
What is Masonry? Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet. Install Download CDN Package managers Getting started HTML CSS Initialize with jQuery Initialize with Vanilla JavaScript Initialize in HTML Next MIT Lice
3行で説明、flexboxとは CSS3から導入されたfloatに変わる新しいレイアウト方法です。 伸びたり並んだりします。 俺、flexboxのプロパティ何回ググるんだろう問題 flexboxのプロパティめっちゃ多いですね。正直覚えきれませんし、覚えるつもりもなくなってきます。それに、別に複雑なことをやりたいわけではないですね。 具体的には、下記のようなことができれば十分なんです。 リキッド2カラムレイアウト スティッキーフッタ(最下部に吸い付くフッタ) この程度のものであれば、覚えるべきflexbox関連のCSSプロパティの数も絞れそうです。 覚えておくべき3つのプロパティ display: flex flex: 1 flex-direction: column これだけでわりとこなせます。以下で、実例をもとに説明します。 2カラムレイアウト さて、よくある2カラムレイアウトです。 で
2017年5月25日 CSS FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。前々からあった技術ですが、ブラウザーによって書き方が違ったり、仕様がころころ変わったりと、イマイチ一歩踏み出せない感があったFlexbox。しかしようやくモダンブラウザーでの利用に難がなくなり、実務にも充分使えるようになりました。今回はそんなFlexboxの魅力と使いドコロを、デモ付きで紹介していこうと思います! ↑私が10年以上利用している会計ソフト! 対応ブラウザー Can I use…で紹介されているように、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari用に -webkit- のベンダープレフィックスが必要です。IEについては11から正式に対応。IE10にも対応していますが、書き方が
こんにちは、王です。デザイナーやってます。 今回は「Flexboxを基本から理解して、使い方をマスターしよう!」ということで、初耳の方でもざっとFlexboxで何ができるか分かるように短い動画を用意しました。 動画の中で使ってたデモをアップしたので、確認してみたい方は以下のリンクをどうぞ! デモ 昨今では、当然ながらデジタルデバイスサイズの多様化でレスポンシブデザインとやらが流行っています。 同じサイトをさまざまなスクリーンサイズに応じたデザインをしなければならない上に、コーディングにも手間がかかります。制作側からしたら何かと厄介ですよね。 「なるべく手間をかけずに作りたい!」という世界中のデザイナーの声に応えて、「Twitter Bootstrap」をはじめとした数多くのフレームワークが徐々に脚光を浴びはじめて久しくなります。 ただ、これらはあくまで古い技術の組み合わせで、革新的な技術で
プログラミングBのページへ戻る 配列とは 配列の要素 配列の宣言 配列の初期化 配列全体の取り扱い 配列と sizeof 演算子 サンプルプログラムと演習問題1 サンプルプログラム1(内容の表示と総和) for文の繰り返し範囲指定の方法 for (i = 0; i < N; i++) サンプルプログラム2(逆順に複写) マクロ定数の活用 #define N 10 サンプルプログラム3(最大値) 演習問題1(ベクトル和) 配列の添字に関する重要な注意事項 2次元配列 2次元配列の初期値 2次元配列サンプルプログラム サンプルプログラムと演習問題2 サンプルプログラム4(成績処理) 演習問題2 多次元配列 レポート問題 配列とは 配列(array)とは,同一の型のデータを(メモリ上に)一列に(隙間をあけずに)並べたものである。違う型のデータを混在して並べて配列とすることはできない。 配列中の各
縦長のwebデザインをがむしゃらに集めています。
最近改めて CSS の基本、要素の配置、レイアウトについて学習しました。過去に CSS でのレイアウトなどの記事を書いた事があるんですけど、改めて勉強してみたら、いろいろ間違えて解釈していたなー ... っていうか、基本が分かってなかったんだなーと反省 ...。今回は CSS の基本中の基本、視覚整形モデルについてまとめてみました。 Webデザインをする上で、必須とも言えるのが CSS …。このブログ – Webデザインレシピでも、過去に CSS について書いた記事がいくつかあります。最近 … でもないけど、以下のふたつは CSS でのレイアウトについて、いろいろと書いた記事でした。 CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ – 2011年 6月17日 CSS:初心者の頃にハマったスタイルシートのあれこれ … IE7多め -2011年 4月21日 で
2020年2月25日 CSS どのサイトでも見かけるテキストリンク。リンクのついたテキストにマウスオーバーすると文字色を変更する、というシンプルかつわかりやすい効果を実装しているWebサイトが多いかと思います。この装飾をもう少し変更できないかな?と思いCSSのみでプラスすることができるエフェクトをいくつか紹介します。 ↑私が10年以上利用している会計ソフト! 目次 ちょっと予備知識 文字色をふんわり変える 背景色をふんわり変える 文字をぼかす 光を放つグロー効果 背景を角丸に レインボーカラーに 拡大・縮小 角度を変える くるっと回転 1. ちょっと予備知識 今回はjQueryなどのJavaScriptを使わず、CSSのみで実装できる小技を集めています。その中でどの小技にも採用しているのが transition プロパティです。transitionプロパティは、時間の変化を操作するもので、
画像の入ったフォルダを開いた時にみかける「Thumbs.db(サムズディービー)」というファイルって何のためのもの? 削除してもいいの? 作成しないようにできるの? そんな疑問にお答えします! パソコンを使っていて、画像を縮小表示にした時に、Thumbs.db(サムズディービー)という隠しファイル(※)が作成されるのを知っていますか? 設定によっては半透明のファイルで表示されている方もいるはず。何のために存在するファイルなのか、削除しても問題ないのか、解説します! ※ 半透明のファイルは「隠しファイル」のため、ファイルが存在しても初期設定では表示されません。「フォルダオプション」の表示タブにある「すべてのファイルとフォルダを表示する」を選択すると表示することができます。また、フォルダオプションの「表示」タブにある「保護されたオペレーティングシステムファイルを表示しない(推奨)」にチェックが
画像が保存されているフォルダ内に「Thumbs.db」というファイルが自動で作成されることがあります。Thumbs.dbについて詳しく解説しています。 Windows XPなどでは、画像が入ったフォルダ内に「Thumbs.db」というファイルが自動で作成されることがあります。Thumbs.dbを確認したい場合は、フォルダを開いた画面で「ツール」メニュー→「フォルダオプション」を選択、「表示」タブで「すべてのファイルとフォルダを表示する」を選ぶと、隠しファイルとして表示されるようになります。 「こんなファイルを保存した覚えはない」「変なファイルがあるけどウイルスかな?」と思うかもしれませんが、パソコンに悪影響はないので心配はいりません。 Thumbs.dbは、フォルダ内のファイルを縮小表示した場合に自動的に作成される「キャッシュ」です。キャッシュとは、データへのアクセス時間を短縮する目的で一
原色大辞典とは 原色大辞典は1997年にオープンしたネットの色見本サイトです。 9種類の色見本と色に関する各種サービスから構成されています。 色見本コンテンツは ブラウザで定義されているHTMLカラーネーム、 日本の伝統色、 世界の伝統色、 Webセーフカラー、 パステルカラー、 ビビッドカラー、 モノトーン、 地下鉄のシンボルカラー、 国鉄制定の塗装色 の9つから構成され、特に日本の伝統色は古来伝わる先人の色彩感覚を現代に伝えるものとして多くの方々から支持をいただいています。 文字列と背景色の組み合わせを試せる配色大辞典、 規則性のある組み合わせから色を選べる配色パターン。 色見本の他にも、今日のラッキーカラー、 コトバから色を解析して調合する成分解析、 ストライプを生成するストライプメーカー、 グラデーションを生成するグラデーションメーカー、 あなたの好きな色と色を調合する色調合、 サ
【参加者募集】セブンイレブンで販売中!コスメブランド「パラドゥ」写真&動画アンバサダーパラドゥ株式会社
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く