[CSS]ブログで書けるインラインスタイルシートに挑戦！のカテゴリ記事一覧

辞書では「くり色」「えび茶色」と表現されているようです。
私は最初目に入ったとき「あずき色」という風に捉えました。
趣のあるいい色だと思います。

画像表示をレスポンシブ対応してみよう

スマートフォンやタブレットの利用が日常の中で当たり前の時代、
WEBもパソコンだけではなくさまざまなデバイスで閲覧されるようになりました。

私はブログ記事を投稿する場合、Macで編集しMacでデザイン確認をするという作業をしています。

MacやWindowsPCなどパソコン画面で表示した時の見え方は確認できるのですが、スマートフォンなどの狭い画面で表示した時の見え方は確認することができません。

たまにスマホで表示してみると、画像やYoutube動画が画面からはみ出しているのを確認したこともあるのですが、とりあえず放置状態でした。

WordPress版「気まぐれデジタル好奇心」では、テーマでレスポンシブ対応されているのですが、当ブログで利用しているテーマは完全には対応されていないようです。

今回レスポンシブ対応させるための表示方法を少し調べたので、参考までにポイントを投稿しておきたいと思います。

レスポンシブ非対応

CSSコード



レスポンシブ非対応では、画像のdivボックスの幅と高さの指定に画素数の「px」を指定しています。
この例では画像にテキストを重ね合わせて表示させていますが、テキストを表示させる位置も画素数で位置を指定しています。

表示させたい大きさや位置を絶対数値で指定しているので、ウィンドウサイズが変わり親要素（この記事では親要素は記事スペースで、現在600pxに設定しています）が600pxより小さくなると600pxの画像は画面からはみ出るという仕組みですね。

パソコンのWEBブラウザ上でもウィンドウの端をドラッグして縮めたり伸ばしたりするとそれを確認することができます。

ちなみに縮めて行くとサイドバーエリアが消えて１カラムになり、テキスト部分などはしっかりその中におさまっています。これは今利用しているテーマのカエテンジョイがレスポンシブ対応されているためです。しかし画像がはみ出してしまう部分についてはテーマ側では対応されていないため投稿する記事で細工してやる必要があるわけですね。

関連記事

レスポンシブ対応

CSSコード



レスポンシブ対応では、画像のdivボックスの幅と高さ、テキストの表示位置の指定に相対数値の「％」を指定しています。

表示させたい大きさや位置を相対数値で指定しているので、ウィンドウサイズが600pxより小さくなってもそれに追従して画像も小さいくなり、画面からはみ出ることがなくなるというわけですね。

画像サイズは、記事スペースに対し600[px] ÷600[px] × 100 = 100％
テキスト位置は、画像高さに対し260[px] ÷ 400[px] × 100 = 65%
という値を算出しました。

レスポンシブ非対応

CSSコード



これは１枚の画像ですが、
レスポンシブ非対応では記事幅600pxに対して500px幅の画像をセンタリング配置しています。

レスポンシブ対応

CSSコード



レスポンシブ対応ではセンタリング指定に画素数[px]で指定せず、パーセンテージ[％]指定します。
画像サイズは、記事スペースに対し500[px] ÷600[px] × 100 ≒ 83％

関連記事

あとがき

画面からはみ出る画像やYoutube動画が気になっていましたが、とりあえずレスポンシブ対応させて画面の中へ納める方法がわかりスッキリしました。

これでまた一つ、技を吸収できたという感じです。

既存記事についても順次確認・対応して行きたいと考えているところです。今後はこの点に留意して記事を投稿してゆきたいと思います。

私は趣味でWEB作成をしていますので、解釈が間違っているところもあるかもしれません。その点についてはご容赦ください。そのような内容を発見された場合は、忌憚のないご意見をお待ちしています。

参考にさせていただいた記事
少し難しいかもしれませんが、じっくり学んでその技を吸収しましょう。

　
CSSミニテクニック



ワンポイントで挿入すると、見映えがよくなると思いませんか。

↓上記画像の実記事はこちら
>> 【Web・通販 専用モデル】ネットするなら小型・省電力PC「NP31S」がおすすめ！
　
　

» 続きを読む

HTMLタグにインラインCSSを追加して、
少しだけ表現力をアップさせる試みの第二弾！！

前回は、画像を重ね合わせて表示する方法をやってみました。

画像を重ね合わせて表示するインラインスタイルシートの記述方法

今回は、画像を回転表示させるテクニックを調べてみました。
　

» 続きを読む

　
わたしは、普段ブログ記事を書いたり編集したりする中で、見よう見まねで何気なくスタイルシート（CSS）の記述を使用していますが、基本をもう一度よく確認してみたいと思います。

スタイルシートの記述方法には大きく３つの方法があるようです。
　
　

» 続きを読む

みなさん、こんにちは。
ブログ管理人のk.144です。

無料ブログでは、
設定画面や管理画面のなかに「HTML」と「CSS」のコードが記述されているところがありますよね。
この部分って素人にはとてもむずかしい内容だと思います。

でも、ここをいじってやるとブログのデザインを変えられることが少しわかってきました。

しかし、ここを変更するのはWEBデザイン素人の私にとってはハードルが高く、容易にできることではありません。

そこで今回は、

• 記事の投稿画面からでも気軽に指定できる。
  インラインスタイルシートでデザインを変更してみよう！

という試みです。
　

» 

Seesaaブログのカスタマイズ作戦！

ちょっとだけCSS（スタイルシート）を変更してブログを読みやすくする試み。

いじるポイントだけ理解しておけば、変更するのは数字だけ！
そんなに難しいことではありません。

文字サイズ・行間のカスタマイズがうまく行き、記事がとても見やすくなりました。

元々記事スペースの幅が狭く、文字が大きくなったことにより、更に幅が狭くなったように感じます。
そこで、記事スペースの幅も変更してみることにしました。

» 続きを読む

Seesaaブログを利用していて、以前から文字サイズが気になっていました。
記事本文の文字の大きさが小さく、行間も狭くて「ゴチャゴチャ」と書かれている印象が強かったのです。

有効的なブログ記事の書き方を参照していたところ、「基本中の基本で、無視できないこと」として「背景色、文字の色や大きさ、フォントの組み合わせは適正か」という項目がありました。

やはり文字の大きさや見やすさは、訪れた人への配慮であり、重要なことと考え見直してみることにしました。

» 続きを読む

画像を重ね合わせて表示させる、
インラインスタイルシートのテクニック！

このテクニックを使うと、絵や写真などの上にバッジのようなアイコン画像を重ねて表示することができます。
　

» 続きを読む

ブロックレベル要素をセンタリングするには、センタリングしたい要素の左右のマージンをautoにし、ブロックレベル要素に幅を指定するのが正しい方法。

<div style="border:black;">
	<div style="margin-left:auto;
　　　　margin-right:auto;width:10em;border:red;">
		ブロックレベル要素
	</div>
</div>

↓参考させていただいたサイトです。
ブロックレベル要素をセンタリングする方法 - Web標準普及プロジェクト
ブロックレベル要素のセンタリング（CSS編集） yozoの気が向いたと記2.0

無料体験版はこちらから