横並びのリストを中央寄せにする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;
ほんっとにはじめてのHTML5とCSS3
今回も <li>要素を 横に並べて、ナビゲーションを作ります。 <li>要素は、スタイル的にはブロックレベルなので、デフォルトでは縦に並ぶため、CSS で横並びのスタイルを指定します。 今回は、<li>要素を横に並べるために displayプロパティを使います。 ●2017年10月、本文を大幅に書き換えました。 display: flex の前身の display: box について書いていましたが削除し、ブロックレベルを横並びにできる「displayプロパティの値」についての内容に 書き換えました。 CSSプロパティと値 displayプロパティについては「はじめてのCSS」カテゴリーで詳しく書いています。 「display: inline」「display: block」「display: inline-block」については、 【17-1】displayプロパティでボックスの表示形式
HTML5でマークアップしてみよう－HTML5リファレンス
■HTML5でマークアップしてみよう HTML5でマークアップしたウェブページを作成してみましょう。 DOCTYPE宣言と文字コードの記述ルールを確認してから、 ごく簡単なHTML5のサンプルページを作成してみたいと思います。 ■DOCTYPE宣言 HTML 4では、DOCTYPE宣言は以下のように記述していました。 （HTML 4.01 Transitionalの場合） HTML5におけるDOCTYPE宣言は、あまり意味を持たないとされていますが、 DOCTYPE宣言が無いとブラウザのレンダリングモードが、互換モード（Quirks mode）となってしまいます。 ブラウザに標準モード（Standards mode）で解釈させたい場合には、DOCTYPE宣言を記述する必要があります。 IE6も含めて、主要なブラウザでは文書の先頭に <!DOCTYPE html> と記述することで標準モード
HTML5についてのおさらい｜Web制作 W3G
Updated 2010.07.29 / Published 2010.07.29 これからHTML5を使いはじめようという方に向けたHTML5のおさらいです。HTML5の記述方法にはじまり、導入にあたって間違いやすいところや勘違いしがちなところをまとめてあります。 hgroup, header, footer要素の説明を含めた続きもあります(続HTML5についてのおさらい)。 HTML5の記述方法 まず最初に、必ずDOCTYPE宣言を行います。HTML5には公式のDTDがないので、すごくシンプルになっています。 <!DOCTYPE html> 続いて、html要素にドキュメントの言語を宣言します。 <html lang="ja"> そして順番にhead要素ときて、文字エンコーディングの指定ですが、charset属性が新たに利用できるようになりました。 <meta charset="UTF
CSSでサムネイル画像を左右ピッタリにしてきれいに並べる小技 | IT女子のお気に入りフォルダ
tableタグを使わずにcssだけでサムネイル画像をきれいに並べる小技です。cssだけといっても、いろいろ方法はありますが比較的記述の少ない方法を備忘録を兼ねてエントリーします。 「サムネイル画像を左右ピッタリにしてきれいに並べる」がどいういうことかというと、このようなレイアウトのことです。 薄いオレンジの横幅と左右ピッタリで9枚のサムネイル画像が並んでいます。floatを使ってずらっと並べればいいわけですが、今回の注目ポイントは左右がピッタリというところです。 サムネイル画像のボックスに付けたclassに一括でmarginを指定してしまうと といった具合に、両端に隙間ができたり、片方の端に隙間ができてしまいます。 単純に考えると一番端にくるボックスにのみ別の指定をすればいいのですが、個別にclassをつけるのはなんだかなーというわけで、 同じcssを指定しつつ左右をピッタリにす
bodyに設定しておくと便利な3つのポイントとおまけ｜CSS HappyLife
CSS（スタイルシート）でbodyに設定しておくと便利な5つのポイント - デザインウォーカー | DesignWalker - ロサンゼルスで働くウェブデザイナーの日記を読んで、ボクなりな最初に指定して置くと良いポイントを上げたくなったので書いちゃいます。 むしろこのサイトの方向性的に有った方が便利だよなーと。 書くきっかけを頂き、感謝いたします。 ちなみに、最初に指定しておくポイントってそれぞれだと思うので、一つの参考として読んでいただければ幸いです。 最初にbodyに指定しておくと便利だと思う3つを。 body { background:#FFF url(../img/share/bg.gif) no-repeat left top; font-family:Verdana, "ＭＳ Ｐゴシック", sans-serif; font-size:80%; } じゃあ、詳細について色々書
表形式のデータ｜HTML要素｜HTML5｜PHP & JavaScript Room
table〔テーブルの定義〕 caption〔表題〕 colgroup〔表の行を構造的にグループ化〕 col〔表の行を非効率的にグループ化〕 tbody〔表の本体部分を定義〕 thead〔表のヘッダ部分を定義〕 tfoot〔表のフッタ部分を定義〕 tr〔行のグループ化〕 th〔見出しセル〕 td〔データセル〕 table テーブルの定義 2009/8/26 table要素は、表を表します。 レイアウト目的で使用しないようにしてください。 table要素内には、tbody要素またはtr要素が、1回以上出現する必要があります。 table要素に「表題」を付ける場合は、caption要素を使用します。 その場合、caption要素は、table要素内に1回のみ出現することができます。 行をグループ化する場合は、col要素またはcolgroup要素のいずれかを使用します。 その場合、これらの要素は
HTML［img要素］画像の表示サイズを指定する - TAG index
この属性の値には、画像ファイルの横幅と高さをピクセル数で指定しておきます。 （200×150） 例えば、幅200ピクセル×高さ150ピクセルの画像を埋め込む場合は、そのサイズを次のように指定します。 <img src="sea.jpg" alt="青空と海の写真" width="200" height="150"> 画像のサイズを指定しておくことで、予め画像を表示する領域が確保されることになり、レンダリング中のカクカクとした動き（画像が読み込まれるごとにレイアウトが動いてしまう現象）を抑えられるようになります。
img要素のwidth,height属性は指定しない - EC studio デザインブログ
img要素におけるwidth,height属性の指定というのはHTMLを勉強しはじめたときから「必須」のものであると考える人が多いと思うのですが、 これは「必須」ではありません。 また弊社では社内のガイドラインとして 「img要素にはwidth,height属性は指定しない」としました。 この方が現状メリットが大きいと考えたからです。 width,height属性の指定が「必須」であるか「任意」であるか 結論からいうと、仕様書上「任意」とされています。 これは弊社サイトで多く採用されている XHTML1.0（Transitional）においてはもちろん、strictであれ、HTML4.01であれ「任意」とされているのは同じです。 しかしそれがなぜ「必須」というような流れになったか？ その大きな理由としてはNetscape Navigator 4.xのような今となっては古くなったブラウザへの
[CSS]hr要素をおしゃれにスタイリングする8つのテクニック
デモページ CSS3を使った8つのテクニック デモページの8つの実装方法を個別に見てみましょう。 HTML HTMLは全デモ共通で、hr要素にclass名を付与するだけのシンプルな実装です。 <hr class="style-one"> [ad#ad-2] CSS スタイルシートは各デモのキャプチャとともにご紹介。 繊細なグラデーションを使ったデザインです。 hr.style-one { border: 0; height: 1px; background: #333; background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc); background-image: -moz-linear-gradient(left, #ccc, #333, #ccc); background-image: -ms-linear-gr
[16-1] table（表）を作ろう（まずは基本の table, tr, th, td）
[16-1] table（表）を作ろう（まずは基本の table, tr, th, td） 最終更新日：2017年11月11日 （初回投稿日：2011年06月13日） 今回から、table（テーブル = 表）を作ってみましょう。 テーブルはデータをまとめて表組みにしたいときに使用します。 テキストだけで説明するよりわかりやすくするのが表組みです。 HTMLでの テーブルは、表組みにする必要がないモノに使ってはならないことになってます。例えば、レイアウトだけのためにテーブルを使うのはNGです。 使用する要素 ● 2017年10月、本文を大幅に書き換えました。 最小単位 <td>要素だけの構成から <tr>要素でグルーピングするという流れに書き換え、サンプルは本文内に記載し、外部サンプルをやめました。 最小の部品「テーブルセル」があってこそテーブル <table>要素は中身が何も無ければ、ぺっ
![[16-1] table（表）を作ろう（まずは基本の table, tr, th, td）](https://cdn-ak-scissors.b.st-hatena.com/image/square/f528719e5157b3361ee24d4244bf8c5a7ba0b84c/height=288;version=1;width=512/https%3A%2F%2Fblog-imgs-37.fc2.com%2Fh%2Fo%2Fn%2Fhonttoni%2F110609.gif)
HTML5で半角不等号を特殊文字として書くべき？ - OKWAVE
HTML5で半角不等号を特殊文字として書くべきかについて悩んでいます。プログラミングのページを作る際に、preタグでソースコードを記述したところ、半角小なりを使うとエラーとなりました。しかし、半角大なりも使うべきではないのでしょうか？特殊文字ではなくそのまま入力する方が見やすいという利点もあるため、迷っています。 HTML5で半角不等号を特殊文字として書くべきかについて質問です。preタグでソースコードを書く際に、半角小なりを使用するとエラーが発生しますが、半角大なりも使用するべきなのでしょうか？特殊文字として書くと見た目が少し変わってしまいますが、どちらが望ましい方法なのでしょうか？ HTML5で半角不等号を特殊文字として書くべきかについて疑問があります。プログラミングのページを作る際に、preタグでソースコードを書いたところ、半角小なりを使用する場合にエラーが出ました。しかし、半角大な
HTML5のバリデータチェック時に覚えておきたいこと｜Webクリエイターネット
Category HTML HTML5でマークアップする際、バリデータチェックをしながらコーディングをされている方がほとんどだと思います。今までのXHTMLの感覚でコーディングをしていると、結構バリデータチェックで通らないことが多いんですよね...。｢この書き方では通らないので、こう書かないと｣とか｢場合によっては、バリデータチェックが通らなくても有益なサービスであったり、便利なスクリプトなので使いたい｣等、予め知っておくことでやり直しも減りますし、対応策なんかもあったりします。 そのあたりを簡単にまとめつつ、参考リンク等も貼り、徐々に追記していこうと思います。 Keyword：HTML5,バリデータチェック HTML5の参考リンク [バリデータチェックツール] ●Validator.nu (X)HTML5 Validator 個人的にはこちらの方が見やすいと思います。 エラー箇所をソース
HTML5対応：divで乗り切れ - 万象酔歩
中央に置くことはできなくなります。 また<p>タグの場合も <center> <p> AAA<br> abcdef<br> G<br> hi-jkl<br> MMMMM </p> </center> で という表現を得るということができなくなります。 divで乗り切れ： <table>タグや<p>タグのstyle=設定で中央寄せ設定することはできますが どう配置するかは内容とは別問題なので、直接tableタグのstyleとして設定することは デザインと内容の分離の観点から好ましくありません。 また、同じstyle=設定を文章中に何度も繰り返し書くのは好ましくないので class定義をすることになります。しかしながら、設定したいスタイルには 全体の配置だけでなく色などもあります。classは多重派生させることは できませんので、中央寄せのこの色、左寄せのこの色といった具合に 無数のclass
【2023年】恋愛アプリおすすめランキングTOP10 | 無料/iPhone/Androidアプリ - Appliv
魔人が思い浮かべた人物を言い当ててくれるアプリ。正解率は異常 有名なキャラからコア向けなキャラまで、魔人は言い当てる モヤモヤがスッキリ。名前を忘れた人物やキャラを言い当てて貰うことも
CTOも自社サービスで採用!! ソーシャル・リクルーティング『Wantedly』が追い求める理想のUX【連載:NEOジェネ！】 - エンジニアtype
CTOも自社サービスで採用!! ソーシャル・リクルーティング『Wantedly』が追い求める理想のUX【連載:NEOジェネ！】 2012/06/13公開 世間をアッと言わせるユニークなアイデアと技術力で勝負しているニュージェネレーションを応援するこの連載。今回登場するのは、ソーシャル・リクルーティングという新しい採用の形を日本に根付かせようとしている2人だ。サービスそのものもさることながら、チーム結成のきっかけも非常にユニーク。そんな彼らが目指す、ネクストステップとは？ ソーシャル・リクルーティング・サービスの『Wantedly』（ウォンテッドリィ）が持つ最大の特長は、実名登録が前提のFacebookと連携することで、従来の採用方法よりも格段にコストを下げ、かつミスマッチを防止できることにある。 しかし、違いはそれだけではない。 『Wantedly』を使うにあたって、企業ユーザーがやるべき
人はなぜグラサンで強気になるのか：日経ビジネスオンライン
遠隔操作ウイルスによる犯罪予告事件で新しい動きがあった。 「真犯人」を名乗る人物が、いくつかの報道機関や弁護士に当てて、自殺を示唆したともとれるメールを送付してきたというのだ。 メールが送られたのは13日の夜。間もなく、メールを受け取った人々の反応がツイッターに放流された。 新聞各紙は、翌朝の朝刊で、早速、このメールを記事化した。なかでも、毎日新聞は「自殺予告メール」という言葉をヘッドラインに使って、比較的大きな扱いで記事を配信した。 犯人からのメールは、文面を読む限り、たしかに自殺を示唆している。そういう意味では、「自殺予告メール」という見出しは間違いではなかったのかもしれない。 でも、私はなんだか釈然としなかった。 犯人からのメッセージに正直に反応するのは、犯人のルールに沿ってゲームを進めることで、それは、とりもなおさず、犯人の側のシナリオに付き合うことを意味しているように思えたからだ
コンペ3年無敗、秘密は思考の「量」：日経ビジネスオンライン
前3回まで、岸勇希さんが展開される「コミュニケーション・デザイン」の手法をうかがってきました。そんな岸さんには、失敗例も聞いてみたいのですが。 岸：こんな言い方をするのは、謙虚じゃなく聞こえると思いますが、キャンペーンに限定すれば致命的な失敗は、ほぼないと思っています。競合プレゼンでは、少なくともここ3年は無敗です。最近正直、負け方が分からないんです。 さらっと明るく強気に。 岸 勇希（きし・ゆうき）：電通CDCクリエーティブ・ディレクター/次世代コミュニケーション開発部専任部長。東京大学講師（2011-2012）。 1977年、名古屋市生まれ。東海大学海洋学部水産学科卒業。早稲田大学大学院国際情報通信研究科修了。2004年、電通に入社。中部支社雑誌部、メディア・マーケティング局を経て、06年10月より東京本社インタラクティブ・コミュニケーション局クリエーティブ室へ。08年より現職。 広告
『クックパッド』『LINE』『Wantedly』ヒットサービス担当者が語るデザイン設計の極意【五十嵐悠紀のUI/UX座談会】 - エンジニアtype | 転職type
2012.08.08 スキル CG・UIの研究家として知られる五十嵐悠紀さんの連載17回目。今回は特別企画として、今旬のPC・スマホWebサービス『LINE』『クックパッド』『Wantedly』のUI/UX担当者に登場してもらい、UI/UX座談会を開催。前編ではそれぞれのUI/IX観を、後編ではエンジニアがUI/UX設計に携わる際に陥りがちな罠とその解決策を紹介してもらった。人気サービスを生みだしたデザイン設計プロセスから語られる、本質的な価値とは一体何なのだろうか。 【ファシリテーター】筑波大学 システム情報工学研究科 コンピュータサイエンス専攻 非数値処理アルゴリズム研究室(NPAL) 五十嵐 悠紀 2004年度下期、2005年度下期とIPA未踏ソフトに採択された、『天才プログラマー/スーパークリエータ』。筑波大学 システム情報工学研究科 コンピュータサイエンス専攻 非数値処理アルゴリ
「開発は最後までしない」子ども用アプリ『Kinderpan』に見る、UIファーストなアプリ開発【連載:NEOジェネ！】 - エンジニアtype
「開発は最後までしない」子ども用アプリ『Kinderpan』に見る、UIファーストなアプリ開発【連載:NEOジェネ！】 2012/11/15公開 世間をアッと言わせるユニークなアイデアと技術力で勝負しているニュージェネレーションを応援するこの連載。今回紹介するのは、子供向けコミュニケーションアプリをリリースした『Kinderpan』の開発陣だ。子どもがお絵かきしたものを簡単に送信でき知育の促進が図れるほか、世界中に友だちをつくることもできる同アプリの開発は、一般的なWebサービス/スマホアプリの開発手法とは一線を画すやり方を採用していた。その手法を紹介しよう。 11月12日、App Storeよりリリースされたばかりの、2歳から6歳の子どもをメインターゲットにしたiOSアプリ。 自分で書いた絵や撮った写真をメッセージにして相手に送信できるメッセージ機能や、SNS機能、無料の知育ゲームなどが
安城から朝潮橋までの乗換案内 - NAVITIME
NEWフリーパス 表示順序 おすすめルート 時間 運賃 乗換回数 総徒歩距離 CO2排出量 エレベーター優先 エレベーター・エスカレーター優先 定期券区間優先 徒歩速度 使用路線 飛行機 新幹線 特急 その他有料路線 路線バス (対応路線) 高速バス フェリー
マルキ喫茶 (朝潮橋/喫茶店)
リクエスト予約希望条件をお店に申し込み、お店からの確定の連絡をもって、予約が成立します。 1 予約の申し込み ご希望の条件を当サイトよりご入力ください。 2 お店からのメール ご予約が承れるか、お店からの返信メールが届きます。 3 お店へ来店 予約が確定した場合、そのままお店へお越しください。
名古屋から大阪への交通手段
■ 基本的なこと JRを使う 新幹線：｢のぞみ｣50～55分、｢ひかり･こだま｣1時間～1時間10分 お金はかかるが速くて楽。 在来線(東海道本線)：2時間半～3時間前後。新快速を使えばけっこう速い。 近鉄を使う 近鉄特急：ノンストップ特急で約2時間、停車駅が多い特急は約2時間半 新幹線ほどお金がかからず、また大阪の中心部に到着するので便利。座席指定が必要。 特急以外(快速急行･急行など)：3時間半前後 安さを重視するならこれがいちばん。 高速バスを使う 所要時間は3時間から4時間。京都までは本数が多いが大阪便は少ないので注意。USJ直行便もあり。 工事があるときには利用しないorルートを変えたほうがよいでしょう。 ※格安高速バス 最近は格安バスも多くなりました。これに関しては変化がめまぐるしいので、この項目では取り上げません。検索サイトで「格安バス」などのキーワードと出発地・目的地を入力
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5 « NAVER Engineers' Blog
HTML5 | GREE Engineering