第5回 カラーと背景のプロパティ CSS level 1 - ブロガー向けCSS入門 - nasust life blog
color カラーの値の種類 カラー名の一覧 background-color background-image background-repeat 例: repeat 例: repeat-x 例: repeat-y 例: no-repeat background-attachment scroll fixed background-position 例: 50% 50% 例: 10px 30px 例: center center 例: left bottom 例: right bottom background 次回 関連記事 この記事は以下のブロガー対象としています。 ブログをカスタマイズしたい 全くCSSの知識が無い こんにちはnasustです。今回はCSS Level 1のカラーと背景のCSSプロパティを解説します。 color colorプロパティはテキストの色を指定することが出
ナビメニュー100連発！CSSで表現できるコピペ可能なHTMLスニペットまとめ
ウェブサイトにおいてユーザーが特に操作する機会の多い部分のひとつが、ナビゲーションメニューでしょう。モバイル端末でのアクセスが増えているいま、より使いやすいスタイルが求められるようになっています。 今回は HTML と CSS、わずかな JavaScript で実装できるさまざまなナビゲーションメニュー用コードスニペットをまとめてご紹介します。アコーディオン型やサークル型、ドロップダウンやフルスクリーン、水平型、モバイル用、Off-Canvasメニューなどをスタイル別に100個まとめています。あらゆるWebデザインプロジェクトで使えるスニペットを、きっと見つけることができるでしょう。 ハンバーガーメニューはもう古い！代わりに使えるモバイル用ナビメニュー5つまとめ コンテンツ目次 1. アコーディオンメニュー 2. サークル型ナビメニュー 3. ドロップダウンメニュー 4. フルスクリーンメ
CSSで装飾されたボタンを手軽に使いたいときに便利なボタンライブラリ 5 - NxWorld
特定のCSSを読み込み、適応したい要素にclass指定をするだけで簡単に装飾されたボタンを実装できるボタンライブラリを5つ紹介します。 カラーやサイズ指定をはじめ、中には20種類以上のデザインが用意されているものもあります。 そのまま利用させてもらうのはもちろん、特に中規模〜大規模サイトではボタンを共通コンポーネントのひとつとして用意することも多いと思うので、その際の参考にすることもできます。 Buttons 指定時の共通接頭辞は「button」 カラーは6色、サイズは6サイズ分用意されており、3D・ロングシャドウ・グローといったデザインタイプや角丸指定もできるようになっているボタンライブラリで、通常の見栄えだけでなくホバー時やクリック時の見栄えもカバーされています。 基本的には必要なCSSを読んで、適用したい要素に対して特定のclassを付与するだけですが、ドロップダウン使用時はjQue
はてなブログ無料版でトップページ（表紙）に記事一覧を表示させる方法【Javascriptで転送（リダイレクト）】 - 広汎性発達障害の女がたまに毒を吐くブログ
はてなブログには「続きを読む」機能があるが…… はてなブログをやっていらっしゃる方は、記事に「続きを読む」を挿入して、トップページに何件かの記事を表示させていることが多いかと思います。 記事作成画面で「続きを読む」を挿入すると、 トップページでは下図のような記事の表示になります。 トップページに表示する記事数は、管理画面の設定⇒詳細設定⇒「トップページの記事数」で指定出来ます。 ただ、記事の1つ1つにSNSボタンとはてブコメント、はてなのAdSense（無料ブログの場合）がくっついてくるので、なんだかゴチャゴチャした印象になります。 SNSボタンやはてブコメントは非表示に出来ますが（管理画面⇒デザイン⇒スパナみたいなマーク⇒記事⇒ソーシャルパーツ）、そうすると個別記事にも表示されなくなってしまいます。 「記事一覧」ページの見た目の方がスッキリしている ところで、はてなブログには「記事一覧」
CSSだけでwebページをバウンド表示させる方法 | q-Az
CSS だけで web ページをバウンドをしているように表示させてみます。現在このページでもバウンド表示を実装しているのでビヨンビヨンとバウンドしながら表示されたと思います。 web ページ全体をするというと若干好みが分かれそうな表示ですが、全体ではなく一部の要素だったりマウスがホバーした要素だけなどであれば、デザインによっては効果的なものになるかもしれません。 webページ全体をCSSだけでバウンドさせるCSS の animaion と transform の scale 値を使います。scale で拡大率を指定しています。 body { animation: bound 2.2s ease-in-out; transform-origin: 50% 50vh; } @keyframes bound { 0% {transform: scale(0.1)} 12.5% {transfor
はてなブログに、タイトル画像（ヘッダ画像）を入れる【レスポンシブデザインでのスマホ対策】
はてなブログに、タイトル画像（ヘッダ画像）を入れる【レスポンシブデザインでのスマホ対策】投稿 : 2016-05-03更新 : 2018-02-01 デフォルトで表示されるタイトル画像のサイズは、高さが200px、横幅は最大1000pxです。 はてなブログテーマ制作の手引き - はてなブログ ヘルプ 用意するサイズは、上記を参考にしてください。これよりも小さい場合は、拡大？して利用されるようです。透過PNGとかでもOKでした。 2.スマホ対策用のCSSを追加する @media (max-width: 480px){ #blog-title-inner,#title a{ height:100px!important; } #blog-title-inner { background-size: contain!important; } } デザイン－＞カスタマイズ-＞ デザインCSSに上記
【閲覧注意】この記事を読んで気分が悪くなったりしても責任取れませんよ【画像】 - 『かなり』
どうも、坂津です。 先月のPVが約6000件に対して検索流入が約60件でした。 やはり1％という数字はあまり変わらないようです。 そんなアクセスに、以前にも少し触れたのですが、少し気になることがあります。 やはり手っ取り早くアクセスを増やすにはエロ神様のお力にすがるしか無いのでしょうか？ なんかこんな感じの画像を貼っとけば良いのでしょうか？ いいえ、違います。 私は先月の検索ワードから、とある発見をしたのです。 検索流入のおよそ20％が「閲覧注意」というキーワードでアクセスしているのです。 だからタイトルに「閲覧注意」という言葉を入れたこの記事を、試験的に書いてみたのです！ 本当に「閲覧注意」というキーワードでこの記事に入ってこられた方は帰った帰った！ あなたがたが欲している画像がどんなものか知らないですが、ここにはありませんよ！多分！ これでもし本当に流入が伸びたらちゃんとお知らせします
InstagramやAirbnbなどのUIデザインに見る新しいトレンド
ミニマルなデザインがトレンドになってからしばらく経ちますが、次のトレンドはなんでしょう？ ここ数か月、デザインの最先端を行くアプリやサービスの中で、「ミニマルデザイン」を次の段階へと押し進めるものが出てきました。FacebookやAirbnb、Appleは、それぞれのプロダクトをよりシンプルに見せることに対して同様の方向を見据えており、それは、モバイルのデザインにおける「コンプレクション・リダクション」という新しいトレンドを反映したものです。 「コンプレクション・リダクション」とは 「コンプレクション・リダクション」なんて聞いたことがありませんか？ 聴いたことがないのも無理ありません、何しろ私が勝手に名付けたものですから。最近私はフラットデザインやミニマルデザインとは違う方向性を持つものが出てきたことに気付きました。 編注：Complexionは「顔色」「血色」という意味で、Reducti
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
