[B! CSS][html] icicaのブックマーク

icica id:icica

CSSとhtmlに関するicicaのブックマーク (11)

こんなHTMLとCSSのコーディング規約で書きたい - Qiita
HTML と CSS のコーディングルールを作ろう HTML と CSS のコーディング規約を中心に、メンテナンス性の良い HTML や CSS をコーディングする際に重要だと思うポイントをまとめています。誰に向けた記事かこの記事には、HTML や CSS を書く人に役立ちそうな内容が書いてあります。特に初級者から中級者の方で、HTML や CSS を一通り学習した方からの反応が良いです。まだ HTML や CSS の学習を始めて間もないという方は、先に案件やプロジェクトをこなしコーディング経験を積むことをお勧めします。経験を積むとよりこの記事の内容への理解が深まるはずです。 HTML と CSS を書くときに大切なポイント2点 HTML と CSS を書くときに大切だと思うことを書きます。 1. HTML と CSS を書かないあなたがいま書いている HTML と CSS は、
icica 2018/12/26
css

html

コーディング
リンク
“Vivliostyle” CSS組版システム
ワンソース・マルチユースで電子書籍もWebも紙の本も。 Webブラウザベース自動組版システム 2015年8月29日村上むらかみ真雄しんゆう, Vivliostyle Inc. Vivliostyle（ビブリオスタイル）とは vivlio（βιβλίο /vivlío/ ＝ギリシャ語〈本〉）＋ style 本の組版くみはん・スタイル。本の作り方や読み方の新しいスタイルを、世界の誰でも自由に使えるオープンな標準技術で。紙でも電子でも、表現したいように表現できる自由と、読みたい形で読める自由を（＝アクセシビリティー） CSS 組版って何？ CSS 組版＝ HTML（またはXML）＋CSS で組版 Web ページも電子書籍（EPUB）も、HTML＋CSS で出来ている。 PDFも、印刷して紙の本も作れる。 CSS 組版で本を作っている出版社の例米オライリー社（組版エンジ
icica 2016/04/14
CSS

Web

組版

html
リンク
CSSの content プロパティーを使いこなそう！
2015年4月8日 CSS CSSの小技やスニペット集なんかを見ていると、ちょくちょく見かける content プロパティー。「そういえば、こいつ一体何者…！？」と思った方もいるかもしれないので、今更ながら改めて content プロパティーの紹介をしようと思います。 ↑私が10年以上利用している会計ソフト！ content プロパティーって何？ content プロパティーは、要素の前後に、:before または :after という擬似要素を使ってテキストや画像などのコンテンツを挿入する際に使用します。擬似要素とは、HTMLなどの文書には記述されていない要素をCSSによって新たに作り出された架空の要素です。Webクリエイターボックスでも、過去記事「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」や「経歴や会社の沿革ページに！簡単なCSSで実装す
icica 2015/12/24
CSS

html

CSS3

web制作

webdesign
リンク
今日から使える！HTML5,CSS3のコーディングメモ7個 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、LIGフィリピン支社代表のせいと(@seito_horiguchi)です。ちょっと前からHTML5.1やCSS4が話題になっていますね。とはいえ、まだHTML5やCSS3の内容さえ把握できてないよ！という方も多いのではないでしょうか。(´ω｀) そこで今回は、あえてHTML5,CSS3の小ネタを紹介してみたいと思います。すぐに実務で使えるものばかりなので、ぜひお試しあれ！ HTML5、CSS3のコーディングメモ7個 1. どんなサイズの画像でも固定サイズの枠にいい感じに表示させる方法 imgタグではなく、divなどのタグにインラインでbackground-imageに画像のパスを指定し、background-size: coverを用いることでいい感じの見栄えにすることができます。メディアサイトやブログサイト、複数人で運用していてルールを統一しづらいプロジェクトなどで有
icica 2015/10/30
HTML5

html

CSS3

CSS

コーディング
リンク
コーディング（HTML、CSS）を独学で学ぶ人のための学習ポイント - DESIGNMAP
タグは語源をおさえていく HTMLのタグは、語源がある。pタグであれば、paragraph、h1はheading、ulはunordered list、dtはdefinition termである。タグは語源でおさえておくと自然に覚えられるだろう。また実際に頻繁に使うタグはわずかである。細かいタグはその都度リファレンスサイトで調べればいい。 CSSはHTMLの構造に依存したセレクタを書かない運用段階までを考えると、CSSのコツはHTMLの構造に依存したセレクタを書かないことである。 <div class="news"> <h2>News</h2> <ul> <li>新書体「やすらか」をリリースしました。</li> </ul> </div> というようなHTMLの場合、従来は .news h2 { font-size: 16px; text-align: center; } というように H
icica 2015/10/28
CSS

セレクタ

HTML

CSS3

レイアウト

class属性

テクニック
リンク
ol や ul タグで括弧付き数字を使った箇条書き :Tips & FAQ | arbk-works Blog
html<ol class="paren"> <li>あか</li> <li>あお</li> <li>きいろ <ol class="paren"> <li>たんぽぽ</li> <li>ひまわり</li> </ol> </li> </ol> css.paren{ counter-reset:it em; list-style:none; } .paren li:before{ content:"(" counters(it em, "-") ")"; counter-increment:it em; margin-right:0.5em; } .paren li{ padding-left:1.5em; text-indent:-1.5em; } バリエーションcss "li:before" の content 部分を変えれば, 括弧と区切り文字を自由に設定できます. content:"(" co
icica 2015/09/09
CSS

html

margin

設定

文字

テクニック
リンク
既存のhtmlを使ってWordPressテーマ化する時の必要最低限の手順 |　バニデザノート
HTMLファイルのほうが多くを占めるサイトの場合、「既存のテーマファイルをカスタマイズするより、htmlファイルをベースに構築したほうが早いかも」、と思うことがあり、最低限どこを直していけばいいかを書いてみたいとおもいます。テーマの基準となる.htmlファイルを /WPの置かれているフォルダ/wp-content/themes/new_theme 内にコピーします。ファイル名は、index.php に変更。「new_theme」は、好きなテーマファイル名でOKです。 css、js、画像フォルダは、既存のhtml郡の中に置いたままでもいいですし /new_theme内に複製コピーしてもOKです。各ファイルパスだけ、相対パスだとWPのパーマリンク設定によってはうまく動かないことがあるので WPのテーマフォルダと違うところにある場合は絶対パスで http://xxxx.com/css/cs
icica 2015/08/17
html

CSS

wordpress
リンク
軽量でシンプルなレスポンシブフレームワーク「Skeleton」 |　バニデザノート
「Skeleton」は、レスポンシブCSSフレームワークです。「シンプルで、羽根のように軽い」がコンセプトで、基本的なhtmlコンポーネントと、グリッドレイアウトのみが入っています。モバイルファーストな意識が高く、ファイル自身も少なく軽量なので全体が見渡しやすく扱いやすい印象です。 960gsベースの、グリッドシステムです。HDなPCサイズでのみ横幅を広げるなど、イレギュラーなこともCSSをいじれば可能です。シンプルなコンポーネントのみだからオーバーライドしなくてもできるのが素敵。  <div class="container">  <div class="row"> <div class=
icica 2015/07/27
CSS

フレームワーク

html

サイズ

レスポンシブ

グリッドレイアウト
リンク
[HTML5] 新要素まとめ【2014/2/14版勧告候補】 - Qiita
こんなsectionは○○だ 1.見出しが無い見出しが無い/用意できない =　章や節ではない = sectionじゃない 2.段組みのためだけに使う sectionはdivの代わりじゃないセマンティクスを意識しよう nav サイトナビゲーションセクションを表す。 <nav> <ul> <li><a href='/'>サイトトップ</li> <li><a href='/about'>このサイトについて</li> <li><a href='/contact'>お問い合わせ</li> </ul> </nav> こんなnavは○○だ 1.nav要素を大量に使っている nav要素を使うことができるのは、そのサイトにとって主要なナビゲーションだけ。多くても３つくらいたとえば、ヘッダメニュー、サイドメニュー、ぱんくずリストはnav 検索ボックス、リンク集は非nav 2.リストじゃないセマンティ
icica 2015/06/12
Tips

html

HTML5

CSS
リンク
CSS3で画像の一部をiOS（曇りガラス）風にぼかす方法：レスポンシブ対応
Posted: 2015.05.07 / Category: HTML&CSS, javascript / Tag: CSS3, jQuery iOS風のぼかしは画像が全画面表示だったら色々jQueryプラグインがあったのですが、今回は一部の要素の背景に重ねたかったのでちょっと試してみました。確認環境： Chrome42, Firefox37, Safari7, iOS8, Android 4.4 均一の余白で配置するバージョン paddingのみでぼかすパネルを配置する方法です。これならCSSオンリーでいけます。 html&cssは下記のようにします。 html <div class="panel"> <div class="panel-in"> <div class="panel-main"> 内容文が入ります。 </div> </div> </div> css *::before,
icica 2015/05/18
CSS

html

CSS3

ぼかし

Webデザイン
リンク
[42-3] link要素の「rel属性」の値（リンクタイプ）
[42-3] link要素の「rel属性」の値（リンクタイプ）最終更新日：2019年07月05日（初回投稿日：2012年06月29日） <link>要素の「rel属性」と「hreflang属性」で指定した「他言語版ページ」がある場合、検索エンジンはユーザの言語環境にあわせて自動的に検索結果を切り替えることができます。そのほかにも「rel属性」を使って、検索エンジンに情報を提供することができます。今回は、<link>要素の「rel属性」の値（リンクタイプ）と、その使い方を見てみましょう。 <link>要素は内容が多いため記事を分けています。 [42-1] link要素で外部CSSファイルの読み込み・グループ化をしよう <link>要素全体の話と、外部CSSファイルの読み込み方法 [42-2] link要素の media属性で外部CSSをメディア別に切り替えよう media属性で
icica 2014/12/12
HTML5

web制作

html

CSS
リンク
1