意外と知らない!?高さを揃えるコーディング方法 | サイドスリーブログ
webデザイナーのむーみんです。 横並びしているボックスの文字数で高さが揃わないのは嫌だなあ・・・jsでやろうかなっと思ったりする方も多いと思いますが、HTMLとCSSでできちゃう簡単な方法を2つご紹介したいと思います。 HTML <ul> <li>文字数ばらばらのテキストが入ります。</li> <li>文字数ばらばらのテキストが入ります。文字数ばらばらのテキストが入ります。</li> <li>文字数ばらばらのテキストが入ります。文字数ばらばらのテキストが入ります。文字数ばらばらのテキストが入ります。</li> <li>文字数ばらばらのテキストが入ります。文字数ばらばらのテキストが入ります。文字数ばらばらのテキストが入ります。文字数ばらばらのテキストが入ります。文字数ばらばらのテキストが入ります。</li> </ul>
Googleフォントの使い方: Webフォントの表示の仕組みと最適化
Googleフォントなど、Webフォントのロードはどういう仕組みなのか、どのように対応できるのか、Googleフォントの表示の最適化について紹介します。 当ブログでも日本語のGoogleフォントを導入して、1ヵ月が経ちました。 文字が読みやすくなったという利点は非常に大きいですが、ロードに時間がかかってしまうという欠点もあります。 Web fonts, boy, I don't know キャプチャ: Google Fonts + 日本語 早期アクセス 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Googleフォントのロードに何を注意すべきか Webフォントの実装に役立つリソース Googleフォントの遅延読み込み まとめ Googleフォントのロードに何を注意すべきか 私はロンドンで開催された「Polymer Summit
【保存版】検索上位の800万ページに見る「HTMLの各要素」利用状況のすべて
#概要 このHTML利用データはGoogle検索結果上位２０位のページから収集された800万のインデックスページを参照しています。 検索順位上位のWebページは平均して２５の異なる要素型を使用していることがよく分かります。 以下はそれらの検索順位上位のWebページのほとんどのページで使用されている２５個の要素です。 #Doctype doctypeはHTML文書の冒頭に記載され、ページが利用している(X)HTMLのバージョンを示しています。 #基本要素とメタデータ htmlはルート要素としても知られており、doctype宣言のすぐ後に記載されWebページのコンテンツをラップします。メタデータはスタイルやスクリプト、データなどのページ情報を含んでおり、検索エンジンまたはブラウザーがページを利用・レンダリングするのに役立ちます。 #コンテンツセクショニング コンテンツセクショニング要素を使えば
ウェブサイト制作で参考にしたいシンプルなデザインとは？ - 99designs
シンプルなデザインのウェブサイトは、テキストや画像、余白のバランスがよく取れていて、サイト訪問者の目を引きます。それだけでなく、コンテンツのテキストやイラスト、構成などもシンプルなデザインで統一することで、内容がわかりやすく見やすいウェブサイトになります。今回はシンプルなデザインで構成されたウェブサイトの特徴を紹介します。 シンプルなウェブサイトの特徴とは？ シンプルに整えられたウェブサイトを訪問したとき、おそらく多くの人が「見やすい、わかりやすい、使いやすい」と感じるのではないでしょうか？まさにそれがシンプルなウェブサイトの特徴なのです。 シンプルなウェブサイトはユーザー目線に立ってデザインされていることが多く、全体に統一感があります。さらに画像のレイアウト、テキストとのバランス、余白の取り方なども計算され訪問者が疲れないように配慮されています。 そのため、一目見て「これは何のサイトなの
CSSの content プロパティーを使いこなそう！
2015年4月8日 CSS CSSの小技やスニペット集なんかを見ていると、ちょくちょく見かける content プロパティー。「そういえば、こいつ一体何者…！？」と思った方もいるかもしれないので、今更ながら改めて content プロパティーの紹介をしようと思います。 ↑私が10年以上利用している会計ソフト！ content プロパティーって何？ content プロパティーは、要素の前後に、:before または :after という擬似要素を使ってテキストや画像などのコンテンツを挿入する際に使用します。擬似要素とは、HTMLなどの文書には記述されていない要素をCSSによって新たに作り出された架空の要素です。Webクリエイターボックスでも、過去記事「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」や「経歴や会社の沿革ページに！簡単なCSSで実装す
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS3のtext-shadowを使ったテキスト装飾のサンプル集 - かちびと.net
