Flexboxでスマートニュース（SmartNews）風のレイアウトを実装する方法 - Design Color
スマートニュース（SmartNews）風の表示とは 「スマートニュース（SmartNews）」とはスマートフォン用のニュースアプリです。巷では略して「スマニュー」なんて呼ばれています。 読み込みが速いため、いつも情報収集にお世話になっているアプリですが、レイアウトも見やすいんですよね。縦だけでなく、2〜3列で横並びになったりと見た目に変化があって記事が見つけやすいんです。 SmartNews ただ、この見た目をfloatやdisplay: inline-block;で実装しようとするとかなり面倒…と思っていたそんな時、柔軟に対応できるFlexboxの存在を知りました。次からは、Flexboxを使った実装方法をお伝えしていきますよ！ 以下が実装用のコードです。「CSS」のタブをクリックして確認してみてください。 See the Pen Flexboxでスマートニュース（SmartNews）風
さくらのサーバーでWordpressをSSL（https://）対応した時の手順10 - Design Color
今年10月からChromeでHTTP ページのフォームに「保護されていません」という警告が表示される 8月中旬に、Search Consoleから「Chrome のセキュリティ警告を示します」という件名のメールが届きました。 どうやら、今年10月からChrome(バージョン 62)でテキストフォームに入力すると、「保護されていません」という警告が表示されてしまうとのことです。 「テキストフォーム」とは、ブログでいうところの「お問い合わせ」や「コメント」、「サイト内検索」にあたるフォームが該当します。 さらに、メールには「長期的には、HTTP で配信されるすべてのページを『保護されていません』と明示することを計画しており、この新しい警告はその一環です。」とあるので、サイトをSSL(https:// )対応することは避けられない流れです。 というわけで、10月を目前に、今まで先延ばしにしていた
レスポンシブ対応！CSSで画像を中央トリミングする方法 - Design Color
追記 この記事を書いた当初はまだIE対応をしなければならないケースが多かったのですが、最近はもうIE対応は考えなくていいかなと思ったので今風の書き方を追記しました。 サムネイルの画像サイズがみんなバラバラ・・・ サムネイルの画像サイズがバラバラだと、どうしても表示に統一感がなくなってしまいますよね。Pinterestのような、サムネイルのバラバラ感を逆に活かしたレイアウトであればいいのですが、使い所が限られてきます。 かといって、複数個ならまだしも何百、何千とある画像をリサイズするのは手動でも自動でも大変…！というわけで、cssで中央部分をトリミングして同じサイズで表示してみましょう！ CSSで画像を中央でクロップして同じサイズで表示する方法 以下が実装用のコードです。「CSS」のタブをクリックして確認してみてくださいね。 方法1：object-fit版 「object-fit」というプロ
初めてPhotoshopでWeb制作する前にやっておくといい設定8(CS6/CC含む) | Design Color
はじめに 先日ちょうどAdobe Creative Cloudを申し込みました。 Photoshopをまっさらな環境にする必要があるため、今回はまさに新品状態のCS6/CCの画面で解説をします！ もくじ 定規などの単位はpxで統一 「自動選択」で図形からレイヤーを選択する 「バウンティングボックス」を表示して選択や変形をしやすくする 「ピクセルにスナップ（エッジを整列）」で端がぼやけるのを解消 レイヤーコピー時に「〜のコピー」とつけないようにする スライス書き出し時に「images」フォルダを作成しないようにする 【CS6/CCの場合】カラーテーマをグレーにする 【CS6/CCの場合】切り抜きツールを「クラシックモード」にする 起動画面。か、かっこいい…！ CS6/CCはUIが黒いのですね。ちょっと慣れない。 従来のグレーにする方法も後ほどお伝えしますので、どうぞおつきあいください！ 1.
美容院のニュースレターをデザインする時に意識したこと＆お世話になった素材サイト - Design Color
参考にした素敵なニュースレターいろいろ 私は今まで美容院に行った時に「ニュースレター」というものを渡されたことがなかったため、作成前にニュースレターとは何ぞやということを知る必要がありました。色々な美容院のニュースレターの事例を見ることで、デザイン時にずいぶん参考になりました。 2018年7月23日 追記 以下で紹介しているニュースレターは私が参考にさせていただいたもので、私が制作したものではありません。私が制作したニュースレターは記事の最後尾に掲載しています！ 美容室アリレイナ こちらの美容室では、実際に店に行かなくてもサイト上で今までのニュースレターを読むことができます！レイアウトが細かく仕切られているため、もしかしたら実際に渡す時は小さく折りたたんでいるのかもしれません。しかも毎回季節に合わせてデザインされているので、もらう度に嬉しい気持ちになりますね。 「美容室アリレイナ」さんのニ
デザインをレスポンシブに対応させる時に役立つjQuery・プラグイン6（サンプルあり） - Design Color
レスポンシブ対応jQueryコード 1.スクロールすると現れて追尾するトップへ戻るボタン スクロールすると現れるページ上部へ戻るボタンです。よく見るやつですね。PC版ではスクロールするとふわっと画面右下に現れて追尾しますが、スマホ版（ウィンドウ幅480px以下）ではついてこられると鬱陶しいので画面最下部に固定しています。 まずは、ある程度スクロールするとフェードインして現れるjQueryコード。 <!-- jQuery --> <script> $(function(){ var pageTop = $("#pageTop"); pageTop.click(function () { $('body, html').animate({ scrollTop: 0 }, 300); return false; }); $(window).scroll(function () { if($(th
Wordpressのスマホサイトにページネーションを設置する方法（プラグインなし） - Design Color
理想は「前へ」「次へ」だけのページネーション 私の理想のページネーションの仕様は以下です。 表示させるのは「次へ」「前へ」のリンクのみ 最初または最後のページの場合は、リンクを表示せずテキストのみ 仕上がりイメージはこんな感じ。ページネーションは、PC版では1,2,3…と数字で総ページ数がわかるようになっていますが、スマホ版のサイトでは数字だけのリンクを指でクリックするのは難しそうなので、「前へ」「次へ」だけのシンプルな作りにしました。 お世話になった記事 実装コードは、以下の記事を参考にさせていただきました！ありがとうございます！こちらの記事では前へ・次へボタンだけでなく数字のページネーションも出力される形式になっています！ 実装方法 ページネーション実装に必要な「$paged」と「$wp_query」 ページネーションを作成するには現在のページ値と全ページ数が必要です。まあ、なくても作
CSS Nite ＠Co-Edo, Vol.17参加レポート！レスポンシブWebデザイン実装時に必要な手法や注意点など - Design Color
CSS Nite ＠Co-Edo, Vol.17参加レポート！レスポンシブWebデザイン実装時に必要な手法や注意点など 2018 1/03 レスポンシブWebデザインとは PC、スマートフォン、タブレット…最近は本当に色々な種類のデバイスがあります。それらの数多くのデバイスにワンソースで対応する技術が「レスポンシブWebデザイン」です。具体的には、閲覧しているデバイスの画面サイズに応じてサイトのレイアウトを切り替えてくれるというもの。 例えば以下のサイトでは画面幅が変わるごとにレイアウトとおじさんの顔が変化するという面白い作りになっています。 Hello Fisher 他にPCサイトを各デバイスに対応する方法としてはPHPなどで表示を切り替える方法がありますが、そうなると各デバイス用のデザインやソース、画像を新たに用意する必要が生じてきます。 もちろん、何も対応しなくても各デバイスからPC
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
