Ideas for Subtle Hover Effects | Codrops
Some creative and subtle hover effect inspiration using modern CSS techniques including 3D translate and pseudo elements. It’s time for some fresh hover effect inspiration! Nowadays we are seeing a lot of delicate designs with fine lines, lots of white space, clean typography and subtle effects. With that beautiful trend in mind we want to share some creative ideas for grid item hover effects. It’
固定ページの新規作成 | WordPressの使い方
固定ページの新規追加の手順をご説明します。 まず、管理画面にログインしてください。 画面左の「固定ページ」メニューから、「新規追加」を選択してください。 「新規固定ページを追加」画面が表示されます。 ページのタイトルと本文を入力してください。ここで入力したタイトルがメニュー欄などに表示されるタイトルになります。 タイトルの下に「パーマリンク」という項目をご覧下さい。 背景が黄色くなっている部分に日本語が表示されている場合は、「編集」ボタンをクリックして英語に修正します。 特にルールはありませんが、製品紹介ページなら「product」、お問い合わせページなら「contact」など、適切な英語を入力するようにしてください。 ここでは、代表挨拶というページを作成しているので、messageに修正しました。 最後に、画面右上の「公開」メニューから、青色の「公開」ボタンを押してください。 ページを作
メガメニュー・メガドロップメニューを実装しているwebデザインのショーケース - NxWorld
情報量が多いサイトで特に見かけることが多い、メガメニュー・メガドロップメニューを実装しているwebデザインのまとめです。 メガメニュー・メガドロップメニューとは表示面積が広いドロップダウンメニューのことで、上手く利用すればスペースを有効活用して、ユーザーが目的のページまで容易に辿り着けるようなナビゲーションを実装することができます。 ホバー展開するもの、クリック展開するもの、テキストのみを使用したもの、わかりやすい画像・アイコンを用いたものなど、同じメガメニューでも様々な表示方法やデザインがあるので、自分がこういった動きやデザインをしたいときに参考にさせてもらえそうなwebデザインを備忘録兼ねてまとめました。 紹介しているサイトのキャプチャは、それぞれホバーしてもらうとメガメニュー表示時のデザインに切り替わります。 ページ左上のロゴ下にあるカテゴリーにホバーすると各カテゴリーが表示され、更
[JS]レスポンシブ対応、指定したエリア内だけで高さが異なるパネルを同じ高さに揃えるスクリプト -Right Height
1-3、4-6でエリアを指定、1-3と4-6が同じ高さに Right Heightの使い方 Step 1: スクリプトの準備 当スクリプトを外部ファイルとして記述し、初期化しておきます。 スクリプトは、これで完了。 <body> ... コンテンツ ... <script src="js/right-height.js"></script> <script> rightHeight.init(); </script> </body> Step 2: HTML HTMLのポイントは、2つ。 data-right-height 適用するエリアを指定 data-right-height-content 適用する要素を指定 <div class="row" data-right-height> <div class="grid-third" data-right-height-content> 1
![[JS]レスポンシブ対応、指定したエリア内だけで高さが異なるパネルを同じ高さに揃えるスクリプト -Right Height](https://cdn-ak-scissors.b.st-hatena.com/image/square/6d7b12bef628f068421e02247872e8a530b7b5ee/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015091000.png)
CSS Loading Spinners
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
JavaScriptで画像やテキストにモザイクをかける方法【SPOILER ALERT!】
ネタバレなど掲載する際、画像やテキストにぼかし処理をしておき、ユーザーが自由に解除できるコンテンツをJavascriptで作る。
width:100%なのにはみ出す理由と回避策。CSSを触るなら必ず理解しなくてはいけないボックスモデルの話。（CSS おれおれ Advent Calendar 2012 – 05日目） | Ginpen.com
CSS おれおれ Advent Calendar 2012 – 05日目 横幅いっぱいに広げようとしてwidth:100%を指定したら横スクロールバーが出ちゃった、という経験ありませんか？ その原因と仕組み、回避策についてお話しします。 わりとFAQな感じ。これは是非覚えておいてもらいたいです。というか知っておいてください。 はみ出した例 position:absoluteないしposition:fixedを使った際にこうなっちゃう事が多いと思います。 上部から出てきたメッセージ欄、横にはみ出てますね。 でも指定はちゃんとwidth:100%です。「幅いっぱい」を指定しているのに、どうしてはみ出てしまったんでしょうか。 「幅」が意味するところ 実はCSSの仕様が定めるところの「幅」というのが、我々が視覚的に認知している「幅」と異なっているのが原因です。 CSSではこんなものを定めています。
Bootstrap使い方メモ１（基本＋CSS） - Qiita
公式サイトを一通り動かしてみたときのメモ。 まずは CSS。 Hello World Bootstrap を入手する ここ から zip ファイルをダウンロードする。 HTML を書く <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="bootstrap.min.css" /> </head> <body> <h1>Hello Bootstrap!!</h1> </body> </html> HTML5 の DOCTYPE を記述する。 css ファイルを読み込むだけで使い始められる。 モバイル用に viewport を設定する meta タグを記述する。 user-scalable=n
CSS3のFlexboxを基本から理解して、使い方をマスターしよう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、王です。デザイナーやってます。 今回は「Flexboxを基本から理解して、使い方をマスターしよう！」ということで、初耳の方でもざっとFlexboxで何ができるか分かるように短い動画を用意しました。 動画の中で使ってたデモをアップしたので、確認してみたい方は以下のリンクをどうぞ！ デモ 昨今では、当然ながらデジタルデバイスサイズの多様化でレスポンシブデザインとやらが流行っています。 同じサイトをさまざまなスクリーンサイズに応じたデザインをしなければならない上に、コーディングにも手間がかかります。制作側からしたら何かと厄介ですよね。 「なるべく手間をかけずに作りたい！」という世界中のデザイナーの声に応えて、「Twitter Bootstrap」をはじめとした数多くのフレームワークが徐々に脚光を浴びはじめて久しくなります。 ただ、これらはあくまで古い技術の組み合わせで、革新的な技術で
A Visual Guide to CSS3 Flexbox Properties | DigitalOcean
Introduction The Flexbox Layout officially called CSS Flexible Box Layout Module is a new layout module in CSS3 made to improve the alignment, directions, and order in the container even when they are with dynamic or even unknown size. The prime characteristic of the flex container is the ability to modify the width or height of its children to fill the available space in the best possible way on
モバイルフレンドリー対応：スマホで読まれる文章とは？ | ブログ | SINAP - 株式会社シナップ
こんにちは、内藤です。 先日デザイナーの富川がお伝えしたように、シナップでは、ビジネスを成長させ続けていくために、様々なテーマに沿って知見を深めていく事例研究グループが誕生しました。 富川はエンジニアの野原と組んで、EFO（スマートフォンの入力フォーム最適化）についてのリサーチを行っている一方、私はディレクターの三国と組んで「モバイルフレンドリー」についてのリサーチを行っています。 これから私たちも、実践的な内容で連載を行っていきますので、どうぞお楽しみに。 <SINAP モバイルフレンドリー対応 連載> 第1回：「スマホで読まれる文章とは？」 第2回：「GoogleとAppleの推奨フォントは？」 第3回：「スマホサイトで指定すべき最適なフォントサイズとは？」 第4回：「スマホサイトの「続きを読む」は必要か？」 第5回：「スマホで読まれる文字数は？」 第6回：「記事をページ分割するメリッ
2015年、Web制作者が押さえておきたいCSSの各種リセット、アニメーション、フレームワーク、アイコンのまとめ
制作時に欠かせないリセット用のCSS、ページのグリッドやレイアウト・コンポーネントが用意されたフレームワーク、クリック・タップやホバーやスクロールを楽しませるアニメーション、モバイルにもフレンドリーなCSSでつくられたアイコンなど、ゼロから用意するのはかなり大変なCSSの便利なフレームワークを紹介します。 リセット用のCSSはこの3種類 レスポンシブ対応の定番フレームワーク Material Designに対応したフレームワーク さまざまなアニメーションが簡単に実装できるCSS かわいいアニメーションを使ったローダー 使いやすいアイコンフォント・Pure CSSのアイコン リセット用のCSSはこの3種類 HTMLの各要素のブラウザごとに異なる差異をなくし、意図した通りに実装できるようスタイルをリセットするスタイルシート。 Reset CSS 2.0 HTMLの各要素のmarginやpadd
eclipseの使い方
0. eclipse (エクリプス) とは http://www.eclipse.org/ http://eclipsewiki.net/eclipse/ http://www.itmedia.co.jp/dict/programming/tools/04018.html 1. eclipseの起動 まずは開発環境のEclipseを起動する (図 1)。 画面左下のスタートボタンをクリックする マウスカーソルを、プログラム > Eclipseと移動していく Eclipse3.1.xをクリックする 図 1. eclipseを起動する 成功するとスプラッシュウィンドウが表示される (図 2)。この際、eclipse 3.1 と表示されていることを確認すること。 図 2. スプラッシュウィンドウ 初めて起動した際には、「ようこそ」と表示される (図 3)。左上のほうに「ようこそ ×」とあるので、
Flexbox | web.dev
Flexbox Stay organized with collections Save and categorize content based on your preferences. The CSS Podcast - 010: Flexbox A design pattern that can be tricky in responsive design is a sidebar that sits inline with some content. Where there is viewport space, this pattern works great, but where space is condensed, that rigid layout can become problematic. The Flexible Box Layout Model (flexbox)
PhotoshopでのUIデザインが楽になる！レイヤーの作業を便利にする無料の機能拡張 -LayerCraft
PhotoshopでWebページやアプリのUIデザインをしている時に役立つ、レイヤー作業が便利になる無料の機能拡張を紹介します。 各ページのデザインを作るためにヘッダとフッタだけがあるPSDにしたい、ナビゲーションやボタンなどパーツのみのPSDが欲しい、スマホ用の画像を書き出したい、などいろいろです。
スマートフォンサイトに！CSSでできるボタンデザイン | SONICMOOV LAB
こんにちは。デザイナーのユウコです。 CSS3の登場によって、従来なら画像で作成していたボタンも、デザインによってはほぼCSSだけで表現することができるようになりました。 そこで今回は、CSSでできるボタンのデザイン・エフェクトについてご紹介します。 １.枠線・角丸 CSS3では、ボタンに枠線をつけるだけでなく、角丸にすることもできます。 上下左右の枠線の色・太さを個別に設定できて、また四隅それぞれに角丸の大きさを設定できるので、上部だけ角丸に、下はフラットにしてタブっぽいデザインのボタンなんかもCSSだけで可能です。 2.背景色のグラデーション ボタンの背景色にグラデーションを設定することができます。 線形のグラデーションであれば、グラデーションのポイントを複数指定できるので、立体感のあるボタンだけでなく、つやっとした光沢感のあるデザインも表現できます。 不透明度も設定できるので、背景に
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSのflexbox(display:flex;)を使った縦並び、横並びレイアウトの基礎知識｜Gimmick log
WordPressの可能性がさらに広がる！Webデザインのトレンドを効果的に取り入れる便利なプラグインのまとめ
カラー配色で迷わない！シーン別配色見本32パターン | Web制作会社スタイル
Drunken Parrot UI Kit - Bootstrap Framework Theme