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

 

気まぐれデジタル好奇心

Appleやネットを中心に、気になるデジタルネタを取り上げてみたいと思います。

  • ホーム
  • »
  • [CSS]ブログで書けるインラインスタイルシートに挑戦!

カテゴリ:[CSS]ブログで書けるインラインスタイルシートに挑戦!

【#800000】WEB色見本、ブラウザで定義されている名前「maroon」


maroon
#800000


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


【Seesaaブログ】インラインCSSで画像表示をレスポンシブ化、画面からはみ出した画像をきっちり収めよう!

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


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

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

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

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

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

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


レスポンシブ非対応


【最大25%OFFキャンペーン】.jpg10月15日まで


CSSコード



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

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

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

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

関連記事



レスポンシブ対応


【最大25%OFFキャンペーン】.jpg10月15日まで


CSSコード



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

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

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


レスポンシブ非対応


Fotolia_69185815_S.jpg

CSSコード



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


レスポンシブ対応


Fotolia_69185815_S.jpg

CSSコード



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

関連記事



あとがき


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

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

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

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

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

インラインCSS記述で画像を回転表示させる方法

インラインCSS記述で画像を回転表示させる方法.png
HTMLタグにインラインCSSを追加して、
少しだけ表現力をアップさせる試みの第二弾!!


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

http://digitalkoukisin.seesaa.net/article/249746272.html右向き三角1画像を重ね合わせて表示するインラインスタイルシートの記述方法

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

» 続きを読む

ブログ記事の入力画面で記述するインラインスタイルシートの書き方

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

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

» 続きを読む

ブログの記事投稿画面から指定できる!コンテンツをセンタリングするインラインスタイルシートの記述方法

ブログコンテンツをセンタリングするインラインスタイルシートの記述方法.png

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

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

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

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

そこで今回は、

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

という試みです。
 

» 

Seesaaブログのカスタマイズ:CSSに挑戦!記事スペースの横幅を変更してみよう!

CSS.jpg

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

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

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

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

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

» 続きを読む

Seesaaブログのカスタマイズ:CSSに挑戦!記事本文の文字サイズ、行間変更してみよう!

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

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

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

» 続きを読む

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

画像を重ね合わせて表示するインラインスタイルシートの記述方法.png
画像を重ね合わせて表示させる、
インラインスタイルシートのテクニック!


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

» 続きを読む

ブロックレベル要素をセンタリングする方法

ブロックレベル要素をセンタリングするには、センタリングしたい要素の左右のマージンをautoにし、ブロックレベル要素に幅を指定するのが正しい方法。
<div style="border:black;">
<div style="margin-left:auto;
    margin-right:auto;width:10em;
border:red;">
ブロックレベル要素
</div>
</div>

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



無料体験版はこちらから
無料体験版はこちらから

 
 
 
 
 
 
 
 
 
 
 
 
Copyright © 気まぐれデジタル好奇心 All Rights Reserved.

テキストや画像等すべての転載転用販売を固く禁じます