-webkit-touch-callout - CSS: カスケーディングスタイルシート | MDN
CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
ぼくの考えたさいきょうのCSSだけで2pxの縁取り文字【2017/7/28追記】 - Qiita
まずは1pxの縁取り CSSのtext-shadowのみを使って、白文字+黒の1px縁取りをしてみます。 考え方としては ぼかしを0pxにして塗りつぶしの影を作る 1pxずつずらして複数指定することで縁取りっぽく見せる LIGさんの記事で素晴らしい解説がありました。 2.テキストシャドウ使う方法 text-shadow: black 1px 1px 0px, black -1px 1px 0px, black 1px -1px 0px, black -1px -1px 0px; 引用元：IEでもキレイ！ブラウザ上でアウトライン（縁取り）を表現する方法 ▼1px四方向の出力サンプル▼ 1pxの縁取りであれば、上下左右の指定だけで結構いい感じになります。 2017/7/28追記 1pxでキレイな縁取り 上記の方法だと、右下、左上、左下、右上の4方向なので、上下左右に縁取りがないことになってまし
フォントを変更したらフォームの横幅がサイドバーを無視する | グリニッジ株式会社
このグリニッジのコーポレートサイトは約2年前にリニューアルしました。コンテンツ内容の改修ついでに、フォントをメイリオ（ヒラギノ）に変更しようと思いました。 テスト環境でメイリオを適応してみると、フォームがサイドバーを無視して幅MAXに。その改善策です。 ちなみにサイトはWordPress、フォームはContact Form7を利用していますが、今回はCSSの問題です。 えらいことになっている まずは、期待値。 期待値の表示 メイリオにした場合。 サイドバーを無視して幅がMAX ※要因切り分けの為にborder：red、greenを付けています。 CSSを修正 要因はなんてことはない、widthの指定が足らなかった、という事でした。 何のwidthかというと、textarea。 input も select も td も tr も table も正しく指定していたのに、本当に盲点でした（反省
コピペで使える！ CSS Animationだけで実現するキャラクターアニメーション - ICS MEDIA
みなさんは、CSSアニメーションどのように使っていますか？ ウェブサイトのちょっとした演出でCSSトランジションを使用している方が多いと思いますが、類似のCSSアニメーションはどういった使い道があるのかよくわかっていない方も多いのではないでしょうか。実は、CSSアニメーションを使うとキャラクターアニメーションを作ることができます。 今回はシンプルな変形アニメーションを組み合わせて、1枚の画像で実現できるキャラクターアニメーションを制作しました。オリジナルのキャラクターをアニメーションさせていますが、CSSのコードのコピー&ペーストで他のキャラクター（画像）にも簡単に適応できます。 商用・個人問わず無料で利用できるMITライセンスで公開していますので、ウェブサイトやコンテンツ制作に是非ご活用ください。 伸びるアニメーション 上方向に「ぷるんっ」と伸びるアニメーションです。scale()でタイ
【CSS3】@keyframes と animation 関連のまとめ - Qiita
はじめに animation プロパティと @keyframes を使うと、CSSだけでアニメーションの設定ができます。 簡単にアニメーションの設定ができるので、覚えると楽しいです。 そもそもアニメーションって？ アニメーションの意味をググると動画と書かれていますが、動画というよりは、動きまたは変化という意味で捉える方が理解しやすいかと思います。 この記事でも、アニメーションという単語を用いて説明しますが、動きまたは変化という意味で読んでください。 最初は @keyframes について見ていきましょう。 説明するときに英語の読み方も記載していますが、参考程度に見てください。 keyframes について @keyframes は、アニメーション開始から終了するまでどのようなアニメーションをするのか指定できるCSSの文法です。 @keyframes は、@規則のため、@から始まり、波括弧内
CSS3のanimation（アニメーション）で春うららかな桜を降らせてみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもですよ、はやちですよ✌(´ʘ‿ʘ｀)✌ めっきり春ですね、ほかほかして春はなんとなくねむいです( ˘ω˘)ｸｿﾈﾐ 花を見に散歩したいところですが買い込んだゲームをクリアしなきゃいけないので、もうしばらくインドア生活になりそうです( ˘ω˘) そんなのはどうでもいいですね。 今回は春らしくCSS3のanimationで桜を降らしてみようと思います( ˘ω˘)☝ 【こちらもおすすめ】 ☞ 「CSS3とjQueryでオリジナル画像のスプライトアニメーションを実装する方法」 実装方法 それでは実装方法をご紹介いたします( ˘ω˘)☝ 画像の用意 まずは降らせる用の桜の画像を用意します。 今回はこんな感じなの用意しました( ˘ω˘)☞ html マークアップはこのようになります。 降らせたい桜には、あらかじめdivを複数用意します( ˘ω˘)☝ <section id="sakura"> <
プライバシーと :visited セレクター - CSS: カスケーディングスタイルシート | MDN
CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
【CSS3】話題のパララックス効果をスクリプト無しで実装する方法。
昨年、2013年度あたりから普及し始め、今年も大流行したウェブデザインのテクニックの１つである［パララックス・スクロール］をCSS3だけで実装する方法を紹介します。 パララックス（Parallax）とは日本語に訳すと「視差効果」を意味し、主にマウスの動きに合わせて特定の要素のスクロール量をコントロールして、ウェブサイトに奥行きや遠近感を表現する手法です。 「パララックス・スクロール」の他に、「パララックス・デザイン」や「パララックス・エフェクト」とも呼ばれています。 まずは動作のサンプルをご覧ください。 CSS3 パララックス・スクロール：動作サンプル 上記サンプルサイトでは、Internet Explorer 以外のモダンブラウザ（Safari、Google Chrome、Firefox、Opera等）をお使いの場合、「開発モード」のボタンをチェックするとレイヤーが3D化されるので構造を
日本語対応！CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス
2021年12月18日 CSS, ダウンロード FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。現在ほとんどすべての最新ブラウザーでFlexboxをサポートしており、Flexboxを使ったレイアウト組みが今後のWebデザインのスタンダードとなるでしょう。Webクリエイターボックスでは以前からFlexboxの使い方について紹介してきたのですが、最近Flexboxが浸透してきたこともあってか各プロパティの使い方について質問される機会が増えてきたので、チートシートとしてまとめてみました。この記事ではなるべく画像メインでプロパティーの使い方を紹介したいと思います！ ↑私が10年以上利用している会計ソフト！ 動画で学ぶCSS Flexbox この記事はYouTube動画でも解説しています。動画派の
CSS3 Flexbox 並べ方まとめ - Qiita
<div id="flex"> <div class="flex-item">A</div> <div class="flex-item">B</div> <div class="flex-item">C</div> <div class="flex-item">D</div> <div class="flex-item">E</div> <div class="flex-item">F</div> <div class="flex-item">G</div> </div> *{ margin: 0; padding: 0; } /* #flexを画面中央に配置 */ html,body{ height: 100%; display: flex; justify-content: center; align-items: center; } /* flex-container */ #fl
5000兆円欲しい！.css
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-
ねこまぐろBlog :: 新はてなブックマーク用ユーザスタイルシートで旧っぽい配置にした
ネットなどの備忘録なブログ。たまに創作ネタメモとか？ ※当サイトではアフィリエイト広告を掲載しています。詳しくはPrivacy Policyをご覧ください。 2017年7月3日、とうとうこの日が来てしまった……。 怨念のブクマページ→はてなブックマーク - はてなブックマーク新ユーザーページを正式リリースいたします - はてなブックマーク開発ブログ 来てしまったものはしょうがないのでいつも通りにユーザスタイルシートで変更。右の広告まで消えたから真ん中にも置いてください＞＜ @-moz-document url-prefix(https://b.hatena.ne.jp/自分のID/){ .entry-image-block, /* サムネ消し */ #right-container /* 右カラム消し */ {display:none !important;} #center-contai
The Shapes of CSS | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. CSS is capable of making all sorts of shapes. Squares and rectangles are easy, as they are the natural shapes of the web. Add a width and height and you have the exact size rectangle you need. Add border-radius and you can round that shape, and enough of it you can turn thos
今さら聞けない!? CSSのborder-radiusで様々な角丸に挑戦！
2019年2月3日 CSS 要素の四隅の角を丸めるためのCSSプロパティー「border-radius」。ボックスや画像などの要素に対して適応でき、角丸にしたりまん丸にしたりと、様々な表現が可能です。このプロパティーが使えるようになってから、どれだけコーディングが楽になったか…！今回はそんなborder-radiusの基本的な使い方と、応用表現を紹介します！ ↑私が10年以上利用している会計ソフト！ 無難で王道！正円の円弧を使った角丸 border-radius は「border」とついているものの、border プロパティーの指定がなくても大丈夫。background によって与えられた背景や、img 要素で指定された画像の四隅も丸まめられます。 四隅に同じ値の丸みを与えるなら border-radius: 10px; と記述すればOK。半径10pxの正円の円弧をベースにした角丸を実装で
CSSのみで菱形を作る方法まとめ | UNORTHODOX WORKBOOK | Blog
菱形を大量に使ったサイトを制作しているんですが、画像を使わずにCSSのみで菱形を作る方法はいくつかあって、それぞれに向き不向きみたいな特徴があるので、作り方も含めて自分用にまとめてみました。 ちなみに「菱形を大量に使ったサイト」は、このサイトのリニューアルでして、今年の9月から作り始めてまだ完成していないという…。 基本となるHTMLとCSSとデモ 以下のHTMLとCSSがベースとなります。たぶん、1つのdivで全てできると思いますが、普通はテキストをのせたり、リンクを貼ったりすると思うので、実用面を考えてこの形としました。 HTML <div class="contents"> <div class="diamond"> <a href="#"> <div class="diamond__inner"> <p>テキスト</p> </div> </a> </div> </div> .con
CSSのみで背景を全体的に斜めにして傾斜をつける方法 | UNORTHODOX WORKBOOK | Blog
最近よく見かけるやつなんですけど、ちょうど今作っているサイトで使ってみたくて、色々やってみた結果なかなか良かったのでブログに残しておきます。 斜めのストライプとかじゃなくて、ブロックごと全体的に斜めにして背景を傾かせる方法です。プラグインは使わずに、CSSのみで実装してます。 デモ つまりはこんな感じのやつです↓ DEMO PAGE 大胆に背景全体を傾斜させているので、単調なフラットデザインに、ちょっとしたスパイスを加えることができますね。 実装方法 色々とやり方はあるかと思いますが、ここではCSSのbefore擬似要素とtransform:rotateを使って表現しています。 HTML <section class="contents"> <div class="contents_inner"> <!-- ここはコンテンツ --> </div> </section> ※HTMLは該当部分
CSS Filtersはトランジションで使うのがお勧め！手軽に実装するいい感じのマウスオーバー演出 - ICS MEDIA
CSS Filtersはトランジションで使うのがお勧め！手軽に実装するいい感じのマウスオーバー演出 CSS Filtersとはボカシや色調整などグラフィカルな効果が得られるCSSの機能です。この記事では「マウスオーバーなどの表現を作るのにCSS Filtersが便利」ということを紹介します。 CSS Filtersの使い方は簡単。CSSのfilterプロパティに適用したい種類の指定を行うだけです。たとえば、次のような指定をすると、HTML要素にエフェクトがかかった状態で表示されます。 CSS Filtersは実はアニメーションにも利用可能。多彩な表現が簡単に実現できます。今回紹介するサンプルは、マウスオーバーでエフェクトを適用するシンプルなもの。まずは次のビデオをご覧ください。 明るさを使った表現 明るさ調整のbrightness()メソッドを利用してみましょう。マウスオーバー時に写真を明
1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー
2018年4月5日 CSS 画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、必ずしもサイズが同じとは限りません。かといってPhotoshopを使ってすべての画像をリサイズできない…ということもあるでしょう。そんな時はCSSでトリミングすると楽です！今回は「object-fit」というプロパティーを使って、画像の縦横比を保ちつつトリミングする方法を紹介します。 ↑私が10年以上利用している会計ソフト！ 画像を中央の位置でトリミングする まずはこの縦長の画像、横長の画像を並べ、縦横250pxの正方形の形で表示させてみましょう。 img { width: 250px; height: 250px; } CSSでこのように画像に対してサイズを指定すると… こんな感じでグチャッとつぶれて表示されちゃいます…。 そこで画像に対して obj
【更新】 長い URL を折り返す CSSプロパティ
*･゜ﾟ･*:.｡..｡.:*･ Welcome to My Weblog ･*:.｡..｡.:*･゜ﾟ･* AVERTISSEMENT : Il est strictement interdit d'utiliser ou de reproduire sans autorisation le contenu (textes et images) de ce site sur d'autres sites web, forums, etc. Ohne ausdrueckliche Erlaubnis ist es weder erlaubt den Weblog (Text, Bilder und Inhalte des Forums) zu benutzen, wiederzugeben oder eine Verlinkung umzusetzen! Der geistige Eige
[CSS]GoodDesign賞にノミネートされて落選すること間違い無しのすごくアレっぽい見出しスタイルを作成した
どうも、おつぱ（ @OZPA ）です。 ブログの見出し要素のデザインをいじくっていたらなんかGoodDesign賞にノミネートされそうな見出しスタイル…いや、正確には諸処の事情でノミネートが取り消されそうなスタイルが出来上がりました！ 革命を起こす見出しスタイル えー、出来上がった見出しは以下の3スタイルです。 画像ではなく、CSSで実装しております。 スタンダード ソフト ハード すごい… なんかよくわかんないけど…エロスタイリッシュ…！！ サンプルコード サンプルコードは以下。 スタンダード html [html] <p class="t_standard">スタンダード</p> [/html] css [css] /**** スタンダード ****/ .t_standard{ border-top:1px solid #CCC; border-right:10px solid #CC
![[CSS]GoodDesign賞にノミネートされて落選すること間違い無しのすごくアレっぽい見出しスタイルを作成した](https://cdn-ak-scissors.b.st-hatena.com/image/square/3da9afa478057e41d2c9397e0ac7416a48347219/height=288;version=1;width=512/https%3A%2F%2Fozpa-h4.com%2Fwp-content%2Fuploads%2F120607_title.jpg)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
