これからのCSSはmargin禁止！？CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた！
これからのCSSはmargin禁止！？CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた！ 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、ピクセルグリッドの矢倉眞隆さんです。 矢倉さんのセッション「まあまあ最近のCSSとつらくならないための書き方」に関するスライド資料は、こちらで公開されています。 インパクト大！CSSグリッドレイアウト概要 白石: では、まずは簡単に自己紹介をお願いできますか？ 矢倉: 昨年（2
コーディングガイド by @mdo
HTMLシンタックス インデントには半角スペース2個分のソフトタブを使用すること。これが全ての環境で全く同じように見せる唯一の方法。 ネストされた要素はかならず1段階だけインデント(半角スペース2個)すること。 いつもダブルクォートを使うこと。属性値に対してシングルクォートを使わないこと。 閉じタグの無い要素に対して、末尾のスラッシュは省く事。HTML5仕様に省略して良いと書いてある。 省略できる閉じタグを省略しないこと。(例えば</li>とか</body>)。 <!DOCTYPE html> <html> <head> <title>Page title</title> </head> <body> <img src="images/company-logo.png" alt="Company"> <h1 class="hello-world">Hello, world!</h1> </
紙面に近づけたい！HTML＋CSSで作る文字レイアウト12個 | PRESSMAN*Tech
印刷する紙のデザインと異なり、Webデザインは環境によって見た目が変わります。どの環境でも同じレイアウトで見せるには画像として書き出せば確実なのですが、テキストの部分はそうもいきません。 DTPデザイナーの方からも「こんな文字のレイアウトはWebだと無理？」といったご相談を受けることがよくあります。 今年に入って、HTML5＆CSS3に対応したブラウザのシェアもかなり増えてきましたので、今回は文字のレイアウトに関するHTMLとCSSをご紹介したいと思います。 目次：段組み縦組み（縦書き）行末揃え（両端揃え）先頭文字スタイル（ドロップキャップ）段落先頭1字下げ2行目から1字下げ（ぶら下げインデント）行頭禁則文字ふりがな（ルビ）圏点（傍点、脇点）大文字と小文字の変更スモールキャップス（スモールキャピタル）長体、平体（水平比率、垂直比率）※IE以外のブラウザは、2014年7月4日現在の最新版にて
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
html/css 参考サイト総まとめ
作成：2013/10/15 更新：2014/11/01 Web制作 > 先週、WordPressとEC-CUBEのレイアウトを変更しなければいけなくて、久しぶりにいじっておりましたが、忘れていたり知らなかったことが沢山ありました。レイアウトはSEOやUIにも深く関係しているのもあり、ここらへんでCSSやHTML５を触るときに参考にすると捗る記事を一回まとめようと思います。今回はCMSやオリジナルサイトを作るうえで「知っておくと必ず役立つ」ものをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 定番まとめ １．勉強になるテクニック／サンプルまとめ 基本知識 ２．セレクタ ３．メディア クエリ ４．コーディング規約 ５．フォント ６．CSSスプライト ７．アニメーション ８．正確なHTML使用方法 ９．CSSハック １０．書き方／読み方 定番まとめ
CSSだけでスライドショーはつくれるよ。
この記事はCSS Programming Advent Calendar 2012、22日目のための記事です。 CSS Programmingとは、jsを使わないでHTMLとCSSを駆使してゲームとかスライドショーとか作る技術です ということで、ここでは、前回の記事で作った、グローバルナビの下の大きめの画像のところ（以下：スライドショー）を、CSSだけで実装してみます。JavaScriptで実装したサンプルはこちら。 以下が目次になります。 まえがき CSS Programmingに使える便利なやつ transitionプロパティ E ~ F（間接セレクタ） :not(s)否定疑似クラス :checked疑似クラス <label>要素 それCSSで出来るよ。 きっかけづくり チョボのところの仕組み ~と:checked <label> transition :first-childと:fi
無料でHTML5を使った広告やアニメーションが直感的に作れる「Google Web Designer」ベータ版でアニメーションを作ってみました
iOSはFlashに対応していないため、これまでウェブデザインには限界がありましたが、そんなウェブデザインの幅を広げるであろう、動くHTML5広告を制作できるツール「Google Web Designer」ベータ版がGoogleから公開されました。非常に直感的に使えるツールとなっており、アニメーションやイメージギャラリーも簡単に作れるということなので、実際にアニメーションなどを作ってみました。 Google Web Designer http://www.google.com/webdesigner/ 実際に作成したアニメーションは以下のような感じです（動いていない場合はブラウザを更新して再読み込みすれば再度動きます）。 まずは「Download Web Designer Beta」をクリック。 利用規約が表示されるので、「Agree and Download」をクリックしてダウンロードを
サンプルで学ぶTwitter Bootstrapの使い方：前編 (1/3)
Webデザインができないエンジニアでも、見た目をすばやく整えられるフロントエンドツール「Twitter Bootstrap」。前回は、Twitter Bootstrapの概要と特徴、利用事例を紹介し、実際の設置方法までを説明しました。今回は、簡単なサンプルサイトを作りながら、Twitter Bootstrapの基本的なルールと使い方を説明します。 簡単なサンプルサイトで使い方を学ぼう サンプルとして、以下のようなブックカタログのサイトを作ります。書籍の一覧とお問い合せフォームで構成されるシンプルなサイトです。 HTMLの準備 TwitterBootstrapを利用したサイト制作では、いちからからすべてを記述するのではなく、TwitterBootstrapのサイトにあるサンプルをベースに書き換えていくのが簡単です。 index.htmlの作成 まず、テキストエディターなどで空の「index.
ひとりでWeb制作できた！「知識０から学ぶ」すごいスライドやサイト２７
作成：2013/07/22 更新：2014/11/01 Web制作 > 先日、お客さんのところへ提案にいったところ、「サイトを自分でも作りたいので定期的に講習会を開いて欲しい。Wordしか分からない。」と言われました。とはいっても、自分である程度、継続して勉強しておかないと、受講する人は2回目以降の受講内容を理解出来ないし、教える人も基本知識をしっかり身につけておかないと、質問に答えることもできません。 今回はWeb製作をするなら必ず抑えるべきこと、知識「０」から学ぶ、基本的な知識を習得できるスライド・サービス・サイトをまとめました。ディレクションにもOK。メジャーなもの中心です。とはいえ量が膨大になったので、必要な部分だけピックアップして学びましょう。※スライドがないものに関しては、お役立ちリンクをつけてます。 エンジニア速報は Twitter の@commteで配信しています。 もくじ
CSS3アニメーションをらく～に実装！オンラインツール7選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーのハルエです。 最近の流行は「トシムリン」です。あぁ次こそ生で見たい・・・。 CSS3でアニメーションを作成するとコードが肥大化して複雑になるため、ライブラリやオンラインツールを使用して作成している方も多いと思います。 簡単なアニメーションで言えば、「transition」でボタンのマウスオーバーに背景色をアニメーションさせたり、画像をフェードさせたり拡大・縮小させたり・・・などなど。 「animation」を使えばさらにできることが広がるのですが、まだまだwebkitブラウザ以外では正常に動作しないのが難点です。 今回は、CSS3アニメーションを一瞬で設定できちゃうオンラインツールをまとめて紹介します。もう知っている人もたくさんいるとは思いますが、まだ使ったことのない方はぜひ一度試してみてください。 CSS3アニメーションを実装！オンラインツール7選 Animate
HTML5＋CSS3の「カンタン装飾設定」で今風デザイン
基本的にグラデーションや角丸はジェネレータからコピペして設定できるので、作業自体は簡単です。HTML5＋CSS3サンプルを使って表現してみましょう。 （1）装飾のキモは「グラデーション・線・角丸・影・テクスチャー」 前回HTML5＋CSS3の「レイアウトを自在に使いこなす」では、限られたいくつかのCSSプロパティを組み合わせて、さまざまなレイアウトができることをお見せしましたが、今回はそれに装飾を加えていきます。 いざ装飾しようとすると、どこから手を付ければ良いのか迷ってしまうかもしれませんが、アイコンなどの絵を除けば、装飾の要素は「グラデーション」「線」「角丸」「影」「テクスチャー」くらいなものです。それらを整理して組み合わせることで、全体として一体感のあるデザインに仕上げられます。 「それが難しいんだよ！」というお叱りの声が聞こえてきそうですが（笑）、以下の2つを見比べてみましょう。上
HTML5やCSS3を使った次世代表現を学ぶのに役立つコードサンプル
わずか280行程度のJavaScriptで作られ... / JavaScriptで作るいろいろな物理シミュレ... / JavaScriptによる波の物理シミュレーショ...他...全14件
1ランク上の「HTML5」制作に欠かせないサイト・ツール・アプリのまとめ21個！
「HTMLファイ部」のほんだです(・Å・)∫ jsdo.it、nakamap、Paberish、HTML5実力テストといった自社運営Webサービスの HTML5エンジニアをやっているものです。 よろしくお願いします！ 「HTMLファイ部」創立1周年！ 非常に手前味噌ではございますが、 弊社HTMLファイ部が創立から1年になりましたっ！・u・ HTMLファイ部は、「HTML5」技術を軸に、様々な表現に挑戦していくエンジニアを集めた部署となっています。 今回の記事では、HTMLファイ部の一周年を勝手に記念して、 HTMLファイ部のメンバーからかき集めてきた、HTML5サイト制作ツールをまとめます！ ツール系のサイト
HTML5、CSS3、JavaScriptがリアルタイム編集できる！軽量HTMLエディタ「Liveweave」 - Chrome Life
みなさんは、HTMLやCSSのコーディングには何を使っていますか？ デザイナーの方であればDreamweaverをメインで使っている人が多いと思います。 デベロッパーの場合は、自分の好きなテキストエディターを使いこなしているでしょう。 しかし、実際にはコーディングをしながら見た目や動きを確認するためにブラウザを横でたちあげてデバッグしながら作業を進めていくと思います。 コードを修正→ファイルの保存→ブラウザで更新→確認 この手順を繰り返すのですが、これがなかなか面倒です。 できれば、コードを修正したタイミングですぐに確認できるとベストですよね。 そこで今回ご紹介するのが、HTML5、CSS3、JavaScriptをリアルタイムに編集して確認ができる軽量HTMLエディタ「Liveweave」です。 「Liveweave」は、ブラウザ上で動作するHTMLエディタです。 コーディングエリアとレン
これからTwitter Bootstrapをはじめる人のためのエントリまとめ - 小さい頃はエラ呼吸
はじめに 今、Twitter Bootstrapが一部のエンジニアで人気です。 Twitter BootstrapはWebデザインが得意ではないエンジニア向けにTwitter社が開発／提供するCSSフレームワークです。このTwitter Bootstrapを利用すると、簡単にTwitterっぽいデザインのWebサイトを作成できます。 そこで、これからTwitter Bootstrapをはじめてみようと思うエンジニアの人たち向けに、役立つ記事の数々をまとめてみました。 このエントリを書こうと思ったきっかけは、以下のスライドでした。とても分かりやすく、はじめて知るようなサービスなども網羅されており、とても参考になりました。 Twitter bootstrap入門 #twtr_hack jQueryプラグイン徹底活用 プロのデザインアイデアとテクニックposted with amazlet at
人と違うデザインのサイトをスクラッチで作るならHTML KickStartをベースにするといいですよ！ | Chrome Life
みなさんは、サイトをスクラッチで作る時にどうされていますか？ HTMLやCSSをイチから作り込んでいくのは大変ですよね。 フリーでHTMLやCSSのテンプレートもいろいろありますが、デザイン要素がガチガチで修正しづらかったり、あまりにもシンプルすぎて結局ゴリゴリ作らないといけなかったりします。 最近だと、Twitter Bootstrapが使いやすくて、いろんなサイトでも使われています。 特にウェブ系のスタートアップは、ほとんどがTwitter Bootstrapをベースにしているんじゃないかというぐらいよく目にします。 しかし、どれもこれも同じような見た目になっちゃってて、デザイン的にはちょっと残念な感じがします。 Twitter Bootstrapを使うと、なぜここまで似てしまうのか？ それは、 パーツが完璧に揃いすぎている！ のが原因です。 Twitter Bootstrapがバージ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ制作者に必ず役立つ！iOS, HTML5, CSS, jQuery, WordPress, .htaccessなどのチートシートのまとめ
html5-memo.com
これからのWeb制作に使える、HTML5,CSS3の対応表や各種リソース
re-dzine.net situs togel online toto 2023 -
