Instagramに使用されているCSSのテクニックを紹介します。 世界で多くのユーザーが利用し、閲覧する環境もさまざまなデバイスに対応する必要があります。下記のモックアップをどのように実装しますか？ Inspect Element As A Way To Feed Your Curiosity by Ahmad Shadeed はじめに Instagramに使用されているCSSのテクニック レイアウトにCSS GridやFlexboxを使用していない Instagramのアンケートに使用されているCSSのテクニック 終わりに はじめに フロントエンドのデベロッパーにとっての最高の贈り物のひとつは、Webページを調べるだけで何がどのように実装されているのか、CSSが裏でどのように機能しているのか確認できることです。Webページを見ている時に気になるレイアウトやエフェクトがあり、どのように実

おすすめ配色サイトまとめ https://t.co/z1N35xsj1u

「SEO に強い HTML の書き方」というツイートがそこそこバズっていて、その内容に対して駆け出しエンジニアの方たちが「参考になった」などと称賛の声を挙げていたのを見かけて思うところがあったのでこの記事を書きました。 元ツイの概要は次の通り。 body > main > article > sectionに h1は 1 ページに 1 つ（要キーワード） 見出しタグは毎度 section で囲む ヘッダーメニューは nav で囲む 画像に適切な alt を設定する title / description を書く 階層を意識して書く div はあまり使わない 画像は p で囲む この記事は元ツイおよび元ツイの投稿者を批判する意図で書いたものではなく、あくまで挙げられている内容に対する個人的見解をまとめたものです。 正しいか正しくないかをそれぞれの項目のはじめに書いていますが、あくまで僕個人の

どうも、三町哲平です！！ 今回は超便利なGoogle Chromeの拡張機能を見つけたので、そのご紹介です！ その前にGoogle Chromeの拡張機能って何？ 拡張機能は「Chromeウェブストア」から追加します。ここでは「One Tab」という拡張機能を追加してみましょう。拡張機能をインストールすると、Chromeの右上にアイコンが追加されます。 ほとんどの拡張機能は基本的に無料で提供されていますが、拡張機能をいくつも追加するとChromeの動作が遅くなる原因になります。できるだけ選りすぐりのものを利用するようにしましょう。 引用元:Google Chromeの「拡張機能」とは | できるネット 上記の引用内容でもある様にGoogle Chromeをより便利にカスタマイズできる様に様々な拡張機能があります。 その拡張機能の中で、「このサイト何の技術でできているんだろう？」が一発で解決

はじめに CSSアニメーションに関して説明する機会があったため、それらに関してまとめました。 「CSSは書けるがCSSアニメーションがよくわからん!」といった人達向けに書いた記事であり、 CSSアニメーションに関するプロパティを理解できるようになることを目的としています。 デモはCodePen上に置いてあります。編集して変化を見てみると理解が深まると思います。 デモのJavaScriptはjQueryを読み込んでいないと動かないため、ローカル環境でデモを実行する場合はご注意ください。 CSSアニメーションとは 要素をアニメーションさせるCSSの機能。 CSS TransitionとCSS Animationの2つの機能がある。 CSS Transitionとは プロパティに変更があった時に、一定時間でプロパティを変化させる機能。 単純な動きのアニメーションを実装する時に利用する。 CSS

ホームページのことを中心にためになるかもしれないことをいろいろと書いています。 ホームページ制作のことからSEOや広告、マーケティングの話まで思いついたことを語っています。 大阪のホームページ制作YCOMトップ ホームページ運営ブログ 自宅もちょっと作業がしやすい環境になってきて、休日でもブログを書けるようになってきました。 休日は仕事しないって決めてるんだけど、ちょっと空いた時間とかにこうやってブログ書けるのが良い。 iOSではbackground-attachment:fixed;が効かない！？ ちょっとおしゃれなホームページを作ってくれと言われたら、 簡単にできるものとして背景固定のパララックス風のページデザインがあります。 こんなやつです。 Frankie's Sports Bar & Grill よくあるこんな感じの背景を固定して前面の要素だけが動くようなデザインですね。 シンプ

日本語のフリーフォントを利用してデザインする際などに「クールなデザインにしたい」「かっこいいフォントを使いたい！」という場面があるかと思います。 ただ、英語のかっこいいフォントはすぐに見つかるのに、日本語になるとすぐに見つけられないということがあります。 そこで今回は、デザイン性が高くてかっこいい日本語フリーフォントをフォントのタイプに分けてご紹介していきます。 商用利用可能なものから、漢字を含んだもの、カタカナのみのかっこいいフォントまで幅広く用意してみましたのでご覧ください。 かっこいいゴシックフォント 鉄瓶ゴシック 鉄瓶（てつびん）ゴシックは、フォントな自由さんが公開している角ゴシックフォントです。 「源ノ角ゴシック」を改変して制作されており、極太の文字かつごつごつとした質感がかっこいいフォントです。 商用：OK ひらがな：◯ カタカナ：◯ 漢字：◯ ▷ 鉄瓶ゴシック スマートフォン

テキスト、ボーダー、背景、アクセント、エラーなど、カラーをCSSでどのように定義すると効率的に管理できるのか、保守が簡単になるのか、そのテクニックを紹介します。 Create your design system, part 3: Colors by CodyHouse 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに カラーをCSSで効率的に管理するために セマンティックにするか、宣言型にするか 基本的なカラーパレットの作成 セマンティックカラーの追加 このアプローチを採用する理由 テーマに使用するカラー はじめに 元々は、近日公開予定の「Web Components」のために作成したものですが、グローバルのCSSとして利用できるので、一足先に公開します。 Web Components|CodyHouse カラーをCS

「配色えらびのベストな方法が知りたい」 「イメージにあった色をもっと手軽に選びたい」 「色がなかなか決まらない」 「配色えらびにAIを活用してみたい」 この記事では、配色えらびが苦手なひとに役立つ無料ツールをまとめてご紹介します。 ２０１６年８月の初投稿から９年かけてわたしが見つけた、実践向けの配色ツールをカテゴリ別に揃えました。 リンクの切れたツールは削除し、新しいデザインツールを追加した最新版にアップグレード。 配色の基本ルールを頭に入れておけば、お気に入りの色を効果的に見つけることができますよ。 コンテンツ目次 普段使いできる便利ツール（17個） ワンクリック、人工知能系ツール（20個） マテリアルデザイン系ツール（4個） Webデザイン・UIデザイン関連ツール（21個） 写真から抽出系ツール（2個） インスピレーション系ツール（14個） グラデーション関連ツール（29個） 配色カラ

前回の記事「CSSで画像の好きな位置を円形にトリミングする方法」では画像の任意の位置で円形に切り抜いてTwitterやLineのアイコンみたいなモノを作ってみました。 こんなの。 ■CSS例 img { width:100px; height:100px; border-radius:50%; object-fit:cover; object-position:-10px; } 元画像がどんなサイズだろうと、5行書くだけで任意の位置を円形でくり抜けるんだから便利ですよねー。 せっかくなので（？）今回はこの写真の横に吹き出しを付けて、より一層それっぽくしてみたいと思います。 角丸な吹き出しの作り方 表示例 ソース <div style="background-color:rgb(113,147,193);padding:1em;"> <p style="border-radius:10px;

webやアプリのUIデザイン上達のコツとして、模写（コピー）がよく取り上げられます。私も過去に一時期やったことがありましたが、確かにいくつかのデザインを細かく観察して自分で再現してみることで、その後いざ実践！となった時に多くの学びを活かせたと記憶しています。 そうした経験から、最近も会社の若いメンバーに模写を進めて実践してもらっていたのですが、とあるメンバーから「模写はできたものの、どんなところを観察すればよいのでしょうか？」という質問を受けました。確かに、実践経験が少ない人にとっては、真似てはみたもののそこから何を学べばよいか分からない、というのは当たり前かもしれません。 模写というと変わったレイアウトや表現ばかりにとらわれがちなのですが、本当に身に付けたいのは「使えるwebサイト」を作る上でのデザイン力の基礎部分です。その基礎とは何か？を知ると学習の効率も上がります。そんなわけで今回は

お久しぶりです、イケダです。UIデザインをする上で、これらを意識するだけでビジュアルの質が劇的に向上するというチェックリストを作ってみました。UIデザインの参考にしてください。 左右の余白は揃っているか 左右の余白をしっかり揃えることは最も初歩的で、カンタンに実践できるTipsです。あまりに初歩的すぎて悪い例を探すのに苦労しましたが、MoneyF●rwardさんが題材として非常に優秀でした。左右の余白は14~20ptの間で揃えるのが定石です(迷ったら16ptにしておこう)。どうしても左右の余白を持て余してしまうという場合は右の改善例のように中央揃えに逃げるのも手です。 フォントの大きさは正しいか fontサイズはまず、「読ませるテキストの大きさ」を決めてから、それを基準に組み立てていきます。読ませる文字、webでいう<p>タグは14~16ptに設定し、その文字とのバランスを見て<head>

こんにちは。凡人の代名詞、トギーです。 私の特技は波風を立てないこと。ビジネススキルとして、それ以外にできることは特にありません。LIGに入ってもう半年経つんですけど、私の存在に気づいていない人も多いようです。 私、なんにもできないしな…… 影うすいし…… エレベーターの扉にもよく挟まるし……… ・ ・ ・

私のブログでは音楽を扱った記事が多いので、大量にYouTubeを埋め込むことが多々あります。 しかし、あまりにたくさんのYouTube動画を埋め込むと、ページの読み込みに時間がかかってしまいます。 そんな悩みを抱えていたある日、下のような記事を発見しました。 追記:元ネタのブログが消えてしまいました。 おお！これこそ、私が探し求めていた記事だ！ この記事で紹介されているコードを参考に、もっと利用しやすいコードに修正してみました。 クリックすると動画が再生されるのが分かるように マウスホバー時のエフェクト YouTubeとは関係ない画像まで消えてしまう問題を解決 以上の3点を実装できるように、コードを改良しました。ブログ主の錠前さんの許可はいただいております。 YouTubeを大量に貼っても重くならないコード [はてなブログでの利用方法]まずはこちらのCSSをデザイン→カスタマイズ→デザイン

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

こんにちは、Web事業部制作課のディレクター・パーヤン（ChankoPahyan）です。 本日よりLIGのディレクター陣による新連載「いいWebつくろう〜クライアントと制作会社〜」がスタートします。 Web業界で働くひと以外にとって、Webをつくっていく過程やWebに関する用語など、わからないことだらけですよね。 この連載では、これからWebサイトをつくろうとしているみなさまが感じるであろう 難しいよ！ ・Webサイトってどう発注すればいいの？ ・なんかいきなり専門用語ばっかりなんだけど…… ・制作会社の人が言ってる◯◯ってなに？ などさまざまな疑問や不安を、LIGのディレクター陣が代わる代わる記事を書き解消していきます。 いいWebサイトをつくるために最低限必要な知識は網羅できるようにしますので、 初めてWebサイトを発注する方も今までに苦い思いをした方も是非ご一読くださいませ。 連載第

こんにちは。ディレクターのともぞうです！　ディレクターによる連載「いいWebつくろう〜クライアントと制作会社〜」の第2回目のテーマ、はサイト制作をおこなううえでのお金の話です。 サイト制作を依頼する側も依頼される側も、判断が難しい「お見積り」です。ここだけは抑えたいというポイントをまとめました。 制作費が10万円のWebサイトと100万円のWebサイトって、いったい何が違うの？ まず、サイト制作と一口に言っても、その実現方法はさまざまです。複数のWeb制作会社に依頼して比べてみても、値段から制作方法までバラつきがあるのは当然のことです。 企画からスタートして、0から制作するもの 既に用意しているテンプレートで構築するもの JimdoやTumblrなど、サービスを使用するもの など切り口が複数かつ、各制作会社が設定している単価によって制作値段は変わってきます。極端な例ですが、同じサイト制作で

それでは、実際にそれぞれのコマンドの書き方とイメージ図を見ていきましょう！ ※ちなみに当記事では 「テーブルA」などをサンプルのテーブル 「F1、F2」などをサンプルのフィールド としています。 MySQLのコマンドの書き方 SELECT FROM WHERE ORDER BY GROUP BY SELECT どのフィールドのデータが欲しいかを選びます。 書き方 SELECT F1,F2 FROM テーブルA; こちらではひとつ、または複数データを読み込みます。今回は、F1、F2のカラムを指定していますが、 SELECT * FROM テーブルA; とすると全てのデータをテーブルごと持ってこれます。 FROM 上記SELECTの説明にも、すでに出てきていますね。 どのテーブルからデータが欲しいかをここで指定します。 FROMの後にテーブル名を入力しましょう！ WHERE いろいろな条