今週のお題「2017年にやりたいこと」 おかげさまで、はてなブログのテーマ「CONTENTS」が2000インストールを突破しました。使用していただけている方やインストールしてくれた方、記事でご紹介をしてくれた皆様に感謝してます。最近はなかなかバージョンアッ…
テーマ カテゴリーの記事一覧 - DREAMARK
今週のお題「2017年にやりたいこと」 おかげさまで、はてなブログのテーマ「CONTENTS」が2000インストールを突破しました。使用していただけている方やインストールしてくれた方、記事でご紹介をしてくれた皆様に感謝してます。最近はなかなかバージョンアッ…
シンプルなHTMLとCSSをコピペするだけで実装できる見出しデザイン20選
コーディング Kota Naito / 2017.07.11 シンプルなHTMLとCSSをコピペするだけで実装できる見出しデザイン20選 画像を使用することなくHTMLとCSSだけでデザインした見出しのデザインサンプルを20パターン紹介いたします。できるだけ特性の違うデザインに仕上がるように工夫しております。これから紹介する様々なデザインサンプルを組み合わせれば、また新たな面白い見出しを作ることも可能かと思いますので、カスタマイズも楽しんでみてください。 一部ブラウザで表示できないデザインもあるかと思いますが、その場合はベンダープレフィックスを、各自で追加してください。 このページでは「見出しデザイン」のプレビューに画像を使用していますが、実際の表示は以下デモページで確認することができます。 DEMOページ 手書き風の見出しデザイン[01] このデザインのポイントは「border-radi
これ以上ないくらい簡単な例から学ぶ、レスポンシブwebデザインの作り方
そろそろレスポンシブWebデザインについて本腰でとりかかろう このブログはWebサービスに関する記事が中心のため「ほぼPCからのアクセスだろう」と踏んでいました。 当初は目算通り推移していたのですが、グイグイとスマートフォンやタブレットからのアクセスが増え、現在では3～4割に達しています。 これはいかんということで、今更ながらレスポンシブに変えてみました。 せっかくなので、初めてレスポンシブに付いて学ぶ方でも理解しやすいように、まとめてみました。 目次 最も単純な例から学ぶレスポンシブWebデザイン 3カラムのリキッドデザインをレスポンシブに変更 レスポンシブWebデザインの表示チェック レスポンシブWebデザインを導入する上で考慮する点 ブレイクポイントについての考察 最も単純な例から学ぶレスポンシブWebデザイン 便利なもので、ちょっと検索すればスタイリッシュなレスポンシブWebデザイ
CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ
最近改めて CSS の基本、要素の配置、レイアウトについて学習しました。過去に CSS でのレイアウトなどの記事を書いた事があるんですけど、改めて勉強してみたら、いろいろ間違えて解釈していたなー ... っていうか、基本が分かってなかったんだなーと反省 ...。今回は CSS の基本中の基本、視覚整形モデルについてまとめてみました。 Webデザインをする上で、必須とも言えるのが CSS …。このブログ – Webデザインレシピでも、過去に CSS について書いた記事がいくつかあります。最近 … でもないけど、以下のふたつは CSS でのレイアウトについて、いろいろと書いた記事でした。 CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ – 2011年 6月17日 CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め -2011年 4月21日 で
横並びのリストを中央寄せにする5つの方法 - CSSテクニック - acky.info
HTMLコード <ul class="float"> <li>1</li> <li>2</li> <li>3</li> </ul> <ul class="inline"> <li>1</li> <li>2</li> <li>3</li> </ul> <ul class="inline-block"> <li>1</li> <li>2</li> <li>3</li> </ul> <ul class="table-cell"> <li>1</li> <li>2</li> <li>3</li> </ul> <ul class="flex"> <li>1</li> <li>2</li> <li>3</li> </ul> CSSコード ul { list-style-type: none; padding-left: 0; } li { background: #CCC; width: 50px;
プロが実践するモダン CSS の書き方入門テクニック20選まとめ
海外サイトTutorialzineで公開された「20 Protips For Writing Modern CSS」の著者 Danny Markov より許可をもらい、翻訳転載しています。 この記事では、CSSスタイリングで実践したい、便利な20種類のテクニックをご紹介しています。CSSをはじめたばかりの初心者のひとにも合った内容も多く、あまり知られていない少しだけ高度で、より実践的なCSSテクニックまで学ぶことできます。これらのテクニックを利用することで、今後のウェブ制作をよりスムーズに、快適に行うことができるでしょう。 コンテンツ目次 1. 縦方向のマージン幅に気をつけよう。 2. レイアウトに Flexbox を利用しよう。 3. CSS リセットをしよう。 4. Border-box をすべてに適用しよう。 5. イメージファイルは背景に適用しよう。 6. リストテーブル用ボーダー
Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き
今回このブログ - Webデザインレシピを、iPhone などでも見れるようにリデザインしました。使用したのは CSS3 の Media Queries（メディアクエリ）。メディアクエリの使い方や感想、気をつけたい注意書きをまとめてみました！ 遅ればせながらこのブログ – Webデザインレシピを、スマートフォンでも見れるように改修しました。このブログは WordPress で書いているので、スマートフォンや iPad への対応方法はいくつもあるのですが、今回は CSS3 の Media Queries（メディアクエリ）を使って、iPad、iPhone など、いろんなデバイスに対応（対応というか、一応見れる程度）にしてみました。 なので Media Queries を使ったスマートフォン対応と、リデザインしながら思ったことなどをまとめてみました。 CSS3 Media Queries 目次
レスポンシブWebデザインでテーブルを使う時の小技
tableやtr、tdなどのテーブル関連のタグのdsiplayプロパティを変更することでデザインを変更します。 tableタグのdisplayの値はデフォルトではtable、tdやthタグはtable-cellといった具合ですが、この値をblockやlist-itemなど他の値に変えます。 @media only screen and (max-width:420px){ tbody tr{ display: block; margin-bottom: 1.5em; } tbody th, tbody td{ display: list-item; border: none; } ..... } Chrome、Safari、Firefox対応。 IEではTableのdisplayを変更しても表示は変わらないようなので非対応です。 条件分岐コメントを使ってIEにはメディアクエリを読ませないよ
CSSのpxとemの違いについてのまとめ - 密林の林檎
CSSのpxとemについて、その違いをよく理解していなかったので、調べたついでにまとめてみました。 CSSのfont-size指定で使われるpxとemの違いって何？ pxとemは、CSSでホームページの文字サイズなどを指定する際の単位。 px(ピクセル) ピクセル単位の指定。 環境によって変化しない絶対単位。 em（エム） 文字の高さを基準にした単位。1emは1文字分。 MacintoshやWindowsなどの使用している環境によって大きさが変化する相対単位。 bodyなどでfont-sizeの指定をしていない場合、あるいはfont-size:100％なら「1em=16px」が基準になる。 CSSのfont-size指定はpxとemのどっちの指定がいいの？ どちらが正しいというわけでもなく、pxで指定する人と、emで指定する人がいるようです。もちろん％などのその他の指定をする人もいるようで
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Redirecting