Today: Yesterday: Total: Online:
カテゴリー
その他
  • RSS1.0
  • RSS2.0
  • atom0.3
  • valid XHTML1.0
  • valid CSS2
  • Credit
RSSリーダーで購読する | この日記のはてなブックマーク数 | プロフィール
コメントが一番多い記事(233コメント):人の心理の裏をかくホームページ集客術:リピータになってもらうためには
ツイートが一番多い記事(94ツイート):ちょっと待て!twitterやfacebookに子供の写真を掲載する親達への警告
いいねが一番多い記事(574いいね):facebookスパムに要注意。なりすましの見分け方とアカウント乗っ取りの手口(2013年度版)

[ カテゴリー » スタイルシート ]

カテゴリー » スタイルシート November 01, 2022

CSS(Javascript)でidを部分一致 ID:1667267244


https://kimizuka.hatenablog.com/entry/2015/07/27/000000
に記載がある
var elm = doc.querySelectorAll("[id^='a']");

で、idにaが指定されているものを指定可能。

あとは、
for(var i = 0; i < elm.length; ++i)
{
	elements_acn_it[i].innerHTML = "メンテナンス中";
}
みたいにすれば、div要素のテキストを一括で書き換えたり可能

— posted by midilin @ 10:47AM | Comment (0)

カテゴリー » スタイルシート November 01, 2022

Divデザインいろいろ ID:1667265278


【CSS】おしゃれなボックスデザイン(囲み枠)のサンプル30
https://saruwakakun.com/html-css/reference/box

— posted by midilin @ 10:14AM | Comment (0)

カテゴリー » スタイルシート November 01, 2022

CSSでidを部分一致で指定 ID:1667264933


div[id*="About"] { /* セレクタ名の部分一致 */
 margin: 10px;
 border: 1px solid #f90;
}


https://bashalog.c-brains.jp/12/03/06-235258.php

— posted by midilin @ 10:08AM | Comment (0)

カテゴリー » スタイルシート October 13, 2022

CSSの整形 ID:1665631229


Visual Studio Codeを使う。
参考)
https://1-notes.com/visual-studio-code-css-formater/

「CSS Formatter」というのがあり、Shift + Alt + Fで整形

あとは、beautifyというのもある。
https://qiita.com/malmal0v0/items/9329b82209bf1d3266f7
「CSS Formatter」が動かない場合の代替で使える

— posted by midilin @ 12:20PM | Comment (0)

カテゴリー » スタイルシート June 30, 2020

button要素のデザインを変更する方法(HTML、CSS) ID:1593524002


http://monopocket.jp/blog/css/1587/

— posted by midilin @ 10:33PM | Comment (0)

カテゴリー » スタイルシート September 01, 2016

CSSサンプル集 ID:1472726673


少しの労力でサイトをかっこよく!見出しのCSSデザインに役立つジェネレーター&サンプル集30個まとめ
http://nelog.jp/wordpress-h1-h6

— posted by midilin @ 07:44PM | Comment (0)

カテゴリー » スタイルシート March 26, 2014

Webデザイン初心者でもかっこいいデザインが作れる Bootstrap ID:1395799538


CSSの「フレームワーク」 Bootstrap


HTML5アプリ作ろうぜ!(11):Webデザイン初心者でもできる、Bootstrapの使い方超入門 (1/4) - @IT
http://www.atmarkit.co.jp/ait/articles/1403/19/news034.html


かっこいいボタンやタブなど、簡単にデザインできる。
またレスポンシブデザイン対応。


http://getbootstrap.com/
からダウンロードできる。

— posted by midilin @ 11:05AM | Comment (0)

カテゴリー » スタイルシート » CSS3 July 12, 2013

CSS3のアニメーション ID:1373589916


・CSS3を使ってイントロアニメーションを作る
http://tympanus.net/Tutorials/SplashComingSoonPageEffects/index.html

demo1〜demo3まで3つサンプル有り
プログラムの説明は
http://csspro.digitalskill.jp/%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/css/css3-animation-intro/


・CSS3アニメーションを使ったかっこいいページを簡単につくりたい!そんな人に -CSS3 Animation Cheat Sheet
http://coliss.com/articles/build-websites/operation/css/css3-animation-cheat-sheet.html

・文字の移動
https://developer.mozilla.org/samples/cssref/animations/cssanim1.html


・10分で作れる!初心者でも簡単にできるCSS3アニメーション その1
http://oreweb-e.hatenablog.com/entry/2013/02/04/10%E5%88%86%E3%81%A7%E4%BD%9C%E3%82%8C%E3%82%8B%EF%BC%81%E5%88%9D%E5%BF%83%E8%80%85%E3%81%A7%E3%82%82%E7%B0%A1%E5%8D%98%E3%81%AB%E3%81%A7%E3%81%8D%E3%82%8BCSS3%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC
回転とかある。

・フェイドイン
http://builder.japan.zdnet.com/story_media/20406086/fadein01.html

・フェイドイン・フェイドアウト
http://blog.oukasoft.com/htmlcss/%E3%80%90css3%E3%80%91css3%E3%81%A7%E3%83%95%E3%82%A7%E3%83%BC%E3%83%89%E3%82%A4%E3%83%B3%E3%80%81%E3%83%95%E3%82%A7%E3%83%BC%E3%83%89%E3%82%A2%E3%82%A6%E3%83%88%E3%82%92%E8%A1%A8%E7%8F%BE%E3%81%97/

— posted by midilin @ 09:45AM | Comment (0)

カテゴリー » スタイルシート » CSS3 February 08, 2012

CSSを使ってHTTPリクエストを減らす CSS Sprite(スプライト) ID:1328680575


スマホサイト作成時に、HTTPリクエストを減らすため、
必要な画像をひとつの背景画像にまとめ、
1つの画像で読み込み、
CSSで見える部分を制御する(部分表示する)方法がある。

これをCSS Spriteと言う。

背景画像のバリエーションや、ボタンなどを背景画像として
全画像を1つの画像で作成して表示することができる。

— posted by midilin @ 02:56PM | Comment (0)

カテゴリー » スタイルシート » CSS3 February 07, 2012

スマホデザインでCSS3のよく使うもの ID:1328604900


・border-radius:丸角
・box-shadow、text-shadow:影つけ。box-shadowはinsertを使用することで内側にも影がつけられる(へこんでいるように見える)
・Gradients:グラデーション
・transform:図形を変形させる。(回転や歪ませるなど)
・transition、animation:アニメーション。
・transitionはシンプルな一定の変化のないアニメーション。
・animationはFlashでいうところのシェイプのようなもので、キーフレームという概念を持つ。

— posted by midilin @ 05:55PM | Comment (0)