ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。
CSS Shapesでテキストを回り込ませるレイアウトを表現 | Webクリエイターボックス
2019年5月16日 CSS Webでのデザインはどうしても四角形のボックス型になりがち。印刷物だとテキストの配置ももっと自由にできますよね。今回はテキストを画像などの形にあわせて回りこませたり流しこんだりできちゃう CSS Shapes について紹介します！ ↑私が10年以上利用している会計ソフト！ CSS Shapesとは CSS Shapesを使えば、円形や多角形、画像に合わせて、そのまわりに float で横並びにしているテキストを回り込ませて配置できます。雑誌や印刷物の広告などでみかけるレイアウトのひとつですね！これがWebでも表現できるようになれば、デザインの幅がグンと広がるのではないでしょうか？ 通常、テキストと円形の要素を横に並べると、この図のように四角形をベースとした配置になり、円の右上・左上・左下・右下には空白ができます。そのスペースを shape-outside プロ
Web制作者は要チェックです！新バージョンのnormalize.css V4はモダンブラウザ・スマホ・HTML5に完全対応 | コリス
2016年3月19日に、モダンブラウザ、スマホ、HTML5に完全対応した「normalize.css」の新しいバージョン「normalize.css v4.0.0」がついにリリースされました！ v3から細かい改良が重ねられたv4で定義されている各スタイルが、どのように機能しているか紹介します。 normalize.css normalize.css -GitHub Changes to normalize.css normalize.cssの特徴 html, body, :rootなどの全体系の定義 HTML5の新要素用の定義 リンク系の定義 テキスト系の定義 埋め込みコンテンツ系の定義 グルーピングコンテンツ系の定義 フォーム系の定義 normalize.cssの特徴 normalize.cssとはブラウザごとに異なる要素のスタイルの相違を吸収し、各要素のデフォルトのスタイルを提供する小
CSSで様々にアニメーションするハンバーガーアイコン実装「Hamburgers」:phpspot開発日誌
Hamburgers by Jonathan Suh CSSで様々にアニメーションするハンバーガーアイコン実装「Hamburgers」 ハンバーガーメニューをクリックで様々なアニメーションしながら矢印や×印に変形させるライブラリです。 関連エントリ オシャレなアニメーションで動作するスライドショー「Elastic Circle Slideshow」 SVGアニメーションするアルファベットによるロゴ実装チュートリアル ページ遷移を意識させないアニメーションによるページ切り替え効果実装 SVGでクールにアニメーションするローディングボタン実装「Loading Buttons」 画像をボケた状態から鮮明にするアニメーション「Blurry-image-load」
Webフォントを滑らかに表示させるCSS 2016年版 IE 11/Edge/Chrome/Firefox（Windows）
目次 ブラウザーによってWebフォントの見え方が違う 各ブラウザーの実際の画面で見え方をチェック font-smooth -webkit-font-smoothing transform: rotate(0.001deg) text-shadow: 0 0 0.1px rgba(0,0,0,0.5) CSSを適用した状態で各ブラウザーの実際の画面でチェック このブログ内の関連ページ 参考にしたページ サンプル画面として使ったサイト この記事へのネットの反応まとめ ●ブラウザーによってWebフォントの見え方が違う 今更ですが、日本語のWebフォントを会社のサイトで使い始めました。 元来、Webブラウザは端末にインストールされているフォントを呼び出し文字を表示する。端末のフォント如何では、Webデザイナーが意図しないWeb表示がなされてしまい、またフォントに関するWebデザインに制約が生じてし
CSSの小技。高さが不明なボックスの中で中央に配置する方法 | ホームページ制作お役立ち情報
【CSS3】高さ不明の要素のボックス内で上下中央配置する方法 ボックス内でテキストを上下中央にそろえたい、ということは良くありますが、テキストが２行、３行にわたり、高さが指定できない場合、これまではよくネガティブマージンなどを使って対処してきました。 それをたった３行のCSSで叶えてしまうのがこちら。 http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/ まず、ボックス内のテキストを、上から50%のところに配置します。 半分から下の位置にテキストが表示されます。 ◆HTML側 <div class="demo01"> <p>テキストサンプル</p> </div> ◆CSS側 .demo01{ background-color:#6CF; height:200px; } .demo01 p{ posi
FlexboxベースのモダンなCSSフレームワーク・「Bulma」
BulmaはFlexboxベースのモダンなCSSフレームワークです。レスポンシブWebデザインに対応しており、オープンソースとして公開されています。カラースキームもいいセンスしてますね。これはなかなか使いやすそうです。 モダンなブルマとかどういうことなのって思ったのですが、調べてみるといわゆる旧女性用運動着のスペルはbloomerで、本フレームワーク名のBulmaはドラゴンボールのブルマの綴りらしいです。画像検索したらブルマが「Bulma」って書かれたキャップをかぶっていました。ムダ知識が増えてオラわくわくしてきました。よく見るとアイコンもブルマの色に似ているかも・・・と思いましたが特にそういった言及はありませんので、ドラゴンボールでもなんでもない全然関係ない由来だったらすごくごめんなさい。ライセンスはMITとの事。 Bulma
背景にCSSのfilterを使用すると，前面の文字が表示されない
z-index を指定する際には position に static 以外を指定する必要がありますが、あなたのコードでは #background #content のどちらにもこれが指定されていません。 これがなくても動くのは Firefox のバグのような気がします。 以下解説。 画像編集ソフトでいうところのレイヤーのように、Webページのレンダリングにはスタックコンテキストという概念があり、これは opacity transform などを指定した際や、 position と z-index を組み合わせた場合に作成されます。 要素の重なりについて本気出して考えてみた（z-indexとか何とかとか） – No.1026 スタック文脈 - Web developer guide | MDN 描画順をざっくり書くと、次のようになります。（今回関係するもののみ） z-index がマイナスの
ナウでヤングなCSSのfont-familyはコレだ！ 2015年版
ナウでヤングなレンタルサーバーと言えばロリポップですが、CSSのfont-family指定は皆さんこだわってますか？ ぶっちゃけ多くの閲覧者はあんまり気にしてないかもしれませんが、さりげないおもてなしがWebサイトの見栄えを最高に良くするのです。font-familyって何？ いや、CSSって何？ って人も、弄ってみようfont-family。 そもそも、指定したほうがいいのか？ フォントは俺に選ばせろ そもそもですが、font-family指定をしなくていいという意見があります。指定をしない場合、ブラウザで設定されたフォントが表示されます。「人それぞれ好きなフォントがあるんだから、いちいち指図するな」ということでしょうが、一部のマニア以外はブラウザのフォント設定を弄らないと思いますし、弄らない場合Windowsでは多くのブラウザのデフォルト設定であるMS Pゴシックで表示されてしまい、ク
【複数行にも対応】長過ぎる文字列を省略して末尾を三点リーダー（…）にする方法いろいろ | Recruit Tech Blog
ランディングページといったコンテンツもレイアウトも全て決め打ちで成立するようなものはさておき、多くの Web サイトおよびアプリケーションは、いかなる分量のコンテンツであろうと柔軟に受け入れて表示出来るように設計・デザインされなくてはなりません。 しかし、全ての文字列を表示するには長過ぎてレイアウトが崩れてしまうといった場合には、何らかの方法で文字列を省略する必要があります。一昔であれば Ruby や PHP、Java などサーバーサイドで文字列を切り捨てるなどの加工をしてからフロントエンドに返すという方法が常套手段として用いられていました。しかし、これでは昨今のワンソースによるレスポンシブデザインといったスクリーンサイズに応じて動的に表示領域が変わるようなデザインに対応しきる事が出来ません。PCサイズの表示領域に適した文字数を返したとしてもモバイルサイズの表示領域がそれと同じとは限りませ
流行りのページスクロールによるアニメーション効果が多数収録されたサンプル集:phpspot開発日誌
Page Scroll Effects | CodyHouse 流行りのページスクロールによるアニメーション効果が多数収録されたサンプル集がダウンロード可能です。 パララックス効果や3D効果など、クオリティの高いものばかりでかなり使えそう。最近流行りのページ作成に役立てられそうです 一昔前にここまでスクロール型ページが流行るとは思いませんでしたが、正直どうなるか分からないものですね 関連エントリ ページスクロールに応じて要素を様々にCSSアニメーションしつつ表示できる「Story Box」 スマホの傾きでページスクロール出来るようにする「Interdimensional」 スクロールを上に移動でバー表示ができるjQueryプラグイン「scroll-up-bar」 固定要素をスクロール位置によって切り替えられる「Midnight.js」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
メニュー等で利用されるハンバーガーアイコンから別のアイコンにアニメーションしながら変化させる為のCSS・「Hamburgers」
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
CSSのみで上からスライドダウンする開閉コンテンツを作る・「Headermessage」
Flexboxを使ったUIのサンプルコードを紹介する・「Flexbox Patterns」
CSSで変更できるカーソルとコードの一覧・「CSS Cursor」
新着記事
cssのflexboxを遊びながら学べるツール・「FLEXBOX FROGGY」
IE11のみをCSSハックする方法
