よく使うCSSで要素を横並びにする方法と使い分け - Qiita
要素を横並びにする方法は多種多様ありますが、その中でも個人的によく使うものと、その使い分けをまとめました。※display:flexについては説明する事項が多いため、今回は割愛します。flexでええやんというツッコミはお控えいただけると幸いです。 display:inlineとdisplay:inline-block 以下のように、アイコンにテキストを周りこませるような際などに使用しています。 アイコンを形成する要素にfloat:leftを指定しても似たようなレイアウトにはできますが、テキストの縦中央揃えがややめんどうです。 display:inline-blockはブロック要素として形成されるため、widthやheight、marginなどの指定もできます。加えて、インライン要素のような振る舞いをするので、後続に続くインライン要素は後ろに続くように回り込みます。 今回は、アイコンとテキス
CSSの display: inline、display: block、display: inline-block をマスターしよう！ | たねっぱ！
CSS の display プロパティについて紹介します！ display: inline・display: block・display: inline-blockについてのおさらい。HTMLとCSSひよこちゃん向け！ いろいろ便利な CSS の display プロパティ。今回は display: inline display: block display: inline-block についておさらいしてみます。HTMLひよこちゃん向けの記事です！ displayプロパティで、ブロック・インライン・インラインブロックをおさらいしてみた displayプロパティ displayは、要素の「表示形式」を指定するプロパティ。 ブロックレベル要素をインライン形式で表示したり、インライン要素をブロックレベル形式で表示することができます。 構造的にはブロックレベル要素なんだけど、インラインとして表示
Grid Garden - A game for learning CSS grid layout
A game for learning CSS grid layout
新卒Web編集者が「知っていてよかった」と実感した、HTMLとCSSの基礎 - はてな編集部ブログ「編む庭」
こんにちは、はてな編集部の川原です。大学卒業後、新卒でWebポータルサイトの編集職としてキャリアをスタートさせ、はてなには2016年12月に中途入社しました。現在は、主に企業のオウンドメディア編集に携わっています。 いきなり昔語りとなってしまい恐縮ですが、私自身のWebスキルはというと、「ふみコミュニティ」と「0574 Web Site Ranking」がランキングサイトとして全盛期だったころ（これで大体の年齢がバレる）から、個人でWebサイトを作成している程度。始めた当時は「ふみコミュ」も「0574」も、素材配布サイトや画像加工サイト*1で活気づいていたな……。無料レンタルサーバーが人気すぎて、フリーアドレスだと登録できなかったりする、いい時代でしたね。私は「たださぁば」「忍者ツールズ」「めがね部」あたりを利用し、素材サイトは「フランクなソザイ」などにお世話になってました。 徐々に有料の
PostCSS まとめ - Qiita
僕はPostCSSは開発当初から追いかけていて、GitHubでPostCSSチームのメンバーのひとりだったり、実際にPostCSSを使ってプラグインやツールをいくつか作ったり、ブログや雑誌で記事を書いたり、勉強会等で話したりしています。 本記事では、自分が知っているPostCSSについての事柄を共有します。 PostCSSとは何か PostCSSとは、ロシア人の Andrey Sitnik という人が開発している、Node.js製の「CSSツールを作るためのフレームワーク」です。PostCSS製のツールとして、ベンダープリフィックスを自動で付与する「Autoprefixer」、未来のCSSの構文の一部を今のブラウザで解釈できるようにする「cssnext」、カスタマイズ性に富んでいるCSSリンターである「stylelint」などが有名です。 PostCSSは2018年2月、かなり広く使われて
モダンWeb
誕生から四半世紀を経てWebはその姿を大きく変えています。かつてのWebは単に科学技術文書を公開するためだけの仕組みでしたが、現在ではマルチメディア、ショッピング、アプリケーション、ひいてはオペレーティングシステムさえも包含する技術へと成長しています。このようなWebの最新技術動向を鋭く切り取り、わかりやすく解説したのが本書です。近年脚光を浴びているレスポンシブWebのためのCSSをはじめ、位置情報やバッテリーの状態を取得するためのAPI、プラグインに頼らないマルチメディア再生などを紹介します。さらに、近い将来に普及するであろう注目のWebコンポーネント技術についてもいち早く解説します。 目次 賞賛の声 まえがき 1章 Webプラットフォーム 1.1 用語について 1.2 想定される読者と、読者が知っておくべきこと 1.3 用語の再確認 1.4 HTML5とは 1.4.1 HTML5のひな
CSSのiframeを二つ並べて、スクロールを連動させる
僕が使う都合上、左はoverflow:hiddenにして、右のフレームにしかスクロールバーが出ないようにしている。 右のスクロールバーを動かすと両方のフレームが連動してスクロールされるようにするにはjQueryを使ってこう書く。 #migiでscrollイベントが起こったら、#hidariのscrollTopを#migiのscrollTopと同じところまでスクロールする。 ってことをしている。 上のサンプルもちゃんと連動してスクロールされるはず。 MacのSafari, Firefox, Google Chrome, Opera,あとiPhoneのmobileSafari(二本指スクロール)で動作確認した。
Sass のトップページを日本語でわかるようにしてみた - すがブロ
sass の公式ページ Sass - Syntactically Awesome Stylesheets 後半は特にトップページに記載されていないのですが、勢いで書きました。疲れました。 Sass Sass を使う事で再び CSS の虜になれるぜ。Sass は CSS にネスト、変数、 Mixin 等を加えたものさ。 Beauty（かっこいい） Sass を使う事で {} や セミコロンからおさらばできるぜ。 たとえば、こんな CSS の場合 h1 { height: 118px; margin-top: 1em; } .tagline { font-size: 26px; text-align: right; } こんな風に書けるのさ（cooooool!!） （追記）ちなみに、2スペースのインデントが重要なので Python だと思って書くと良いでしょう。 h1 height: 118p
はてなブログ | 無料ブログを作成しよう
新米と秋刀魚のわた焼き お刺身用の秋刀魚を買いました。1尾250円です 3枚におろして、秋刀魚のわたに酒、味醂、醤油で調味して1時間ほど漬け込み、グリルで焼きました 秋刀魚のわた焼き わたの、苦味が程よくマイルドに調味され、クセになる味わいです 艶やかな新米と一緒に 自家製お漬物 土…
はじめてのWebドキュメントづくり
この文書について この文書は、内田明が家族用に作成しているWeb「ページ」づくりのテキストですが、第三者の方がお読みになっても構いません。まだ制作途上、中途半端な状態ですが、ご意見ご感想など頂戴できるとすごく嬉しいです。 という具合に、家族以外に読まれることがあると想定しているので、よそいきの文章になっています。 はじめに World Wide Webの「ページ」づくりは、文章や画像など「ページ」の元となる素材をつくる作業と、その素材を「マーク付け言語」の「文書型」に合うよう編制する作業、そして「スタイル言語」で出力の体裁を決める作業から成り立っています。 「マーク付け言語」というのは、「文章の中に『マーク（目印）』を挿入していくことで、文章を成り立たせている『見出し』や『強調語句』など各要素の役割や関係性を、ある型に沿って機械にも解るように記す際の語彙と文法」です。「スタイル言語」は、「
Remember The Milk キーボード・ショートカット・キーを忘れてもいい裏技 - Forgot the Milk.
Remember The Milk と Firefox のユーザースタイルシートをコラボすると、Remember The Milk の画面上にキーボードのショートカット・キーを表示することができるんです。 これがコラボ後の Remember The Milk の画面です。↓ (ショートカット・キーが表示されています) Firefox のユーザースタイルシートを利用することで実現できます。通常の Remember The Milk のページ情報HTMLを取得した後、Firefox で指定したスタイルシートを適用することで、キーボードのショートカットキーを追加表示しているんです。 実は、マルチタブに惹かれて Sleipnir を利用し始めてからはどのブラウザにも浮気していなかったため、Firefox を利用する機会はあまりありませんでした。でも、今回のこの記事を書くにあたっていろいろ調査してみ
ユーザビリティコラム：Jakob Nielsen博士のAlertbox
メニューデザインのチェックリスト：17のUXガイドライン 11月5日 読了までに約10分 ユーザーはメニューを使ってコンテンツを見つけたり、機能を利用したりする。このチェックリストを活用し、メニューがその役割を果たしているかを確認しよう。 このコラムについてUIデザイン・ユーザビリティ・UXデザインについて、その道の第一人者・ヤコブ・ニールセン博士（略歴）ら米Nielsen Norman Groupのメンバーが実例を交えて洞察するコラム『Alertbox』。その日本語訳を許可を得て公開しています。 AI時代におけるデザインセンスと技術的スキル 10月24日 読了までに約5分 生成AIによって誰もが何でも作り出せる時代だからこそ、識別力の重要性が一層高まっている。優れたデザインを生み出すには、依然としてクリエイティブなスキルが不可欠である。
ファミリーマート公式ウェブサイト
【ファミマのアプリ ファミペイ限定】1個買うと、1個もらえる！（コカ・コーラ 紅茶花伝 ロイヤルミルクティー）
ウノウラボ Unoh Labs: 水平方向のナビゲーションの作り方
yamaokaです。 水平方向に並んだナビゲーションを作る場合、 皆さんはどのようにマークアップされているでしょうか。 とりあえず必要な項目を羅列してみましょう。 それぞれの項目には矢印の画像を付加するものとします。 == HTML == <p id="navigation"> <img src="arrow.gif">編集 <img src="arrow.gif">削除 <img src="arrow.gif">追加 </p> horizontal_nav_1 posted by (C)フォト蔵 一見よさそうです。 ただ、HTMLの論理的な構造としてふさわしいものでしょうか。 ナビゲーションと言えども論理構造としてはリストの一種なので、リストとしてマークアップするのが適当と言えます。 リストにしてみましょう。 == HTML == <ul id="navigation"> <li>編集<
タグクラウドのスタイルを考える - collisions.dotimpac.to
■それなりのものを出そうと思うとどうも更新が滞りがちなので、自己満足でもともかく考えてることを書いていくことにしますね。 ■最近タグクラウドがどういうふうだったら楽しくて便利でかっこいいのか、考えることが多くて、やってみないとわからんなあと思ったんで、とりあえず自分のはてなブックマークのタグクラウドのデザインをいじってみました。議論の余地はたくさんありそうですが、試行錯誤で考えたことをメモしておきます。 ボールドにして字間を詰める、すべて大文字に ■まず最初にしたのがこれ。 div.taglist { text-transform: uppercase; } ul.taglist li { letter-spacing:-0.1em; font-weight: bold; } タグクラウドって全部文字でできてるのでテキストのように思えてしまいますが、実際のところ割合を表す「グラフ」であるは
はてな記法ワープロ
*はてな記法JavaScript はてな記法ワープロは JavaScript ならではの利点を生かしたダイナミックなワープロです。 試しに色々入力してみてください。即座に出力画面が反映されます((Windows 版 IE6 および Firefox 1.0 でのみ確認しています))。 はてな記法の変換は <a href="http://search.cpan.org/dist/Text-Hatena/">Text::Hatena</a> を JavaScript に移植した "text-hatena.js" を活用しています。 **変更履歴 |*2005/12/1|ソース機能追加 (HTMLソースを表示できます)| |*2005/11/21|はてな記法ワープロ完成| |*2005/11/13|text-hatena.js 移植開始|
CSS と JavaScript でタブ切り替え
CSS と JavaScript でタブ切り替えを実現しています。 なるべく CSS や JS の記述量を最小にするように努力しました。 もっとシンプルにできそうなアイディアがございましたらご教示下さい。 「無償・無保証・著作権放棄」 ですので、 このページのソースを適当にいじって自由に使って下さい。 全てのタブの中味は 1 つの HTML ファイル (このファイル) に書いてあります。 見出しのクリックにより、表示の ON/OFF を切り替えるだけ、という仕組みです。 タブの見出しをクリックするたびにサーバーを読みに行くのが 欝陶しく思えるときに、うってつけかと。 そう言えば、某サイトでは、クリックどころか、 タブの見出しにマウスカーソルを合わせるだけで、 フォーカスされていることを表す見出しの画像 (背景色が異なるだけ) を いちいち Web サーバーへ取りに
CSS と JavaScript でプレゼン
最初に全プレゼン内容を読み込みそれをJavaScriptで切り替えるという方針 ブラウザ上でさくさくとプレゼンができる。 スライド切り替えるたびに別ページに飛んだり、 CGI呼んだりといったうっとうしいことをしない。 スライド一覧がさくっと出せるので印刷にも便利。 IEでもMozillaでも新しいやつなら使える。 まあ別に目新しいものではないですが作りやすい・使いやすいかと思います。 →次ページ
Wordpressのテーマが簡単に作れる『Wordpress Theme Generator』 | POP*POP
海外ではMovableTypeを凌ぐ人気といわれるWordPress。無料でありながらも、かなり高機能な点が好評なようです。 そのWordpressには「テーマ」なる機能があり（いわゆるテンプレート機能ですね）、ネット上で配布されている素敵なテーマを自由に利用することができます。もちろん自分で作ることも可能です。 ただ、一からテーマを作るのはなかなか骨が折れるもの。そこで登場したのが「Wordpress Theme Generator」です。テーマを自作してみたい！という方には便利ですよ。 以下に使い方をご紹介。 ↑ ロゴの設定や、横幅、メニューの位置、色などをブラウザ上で設定していきます。 ↑ いつでもプレビューが可能なのでわかりやすいですね。 ↑ 完成したら「save」でテーマファイルを一括生成してくれます。ZIPでまとめてダウンロードすることもできますよ。 あとは作ったテーマをWor
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2ペインをdivでやるとき - プログラムメモ
