CSS

【CSS】column-countは使いにくい

CSS

当ブログは「column-count」を使っています。 簡単に言えば、「display:flex」と似たような動きをするモノです。 ここでは詳しく書きません。いや、書きたくても書けないのです(笑)。 で、「column-count」はとても手軽で使えるCSSですが、ちょっと使いにく…

IEで「display:grid」は癖があるし使わない方がいい

CSS

時間が許す限りホームページ制作をしています。 ここはブログですけどね。 はてなブログを使っております。 さて、今日の話題はIEです。 IEを嫌っている人は沢山いる印象ですが、まぁ、僕も嫌いですよ(笑)。 IEを無視して作ったサイトがいくつかあって、対応…

【CSS】画像の正方形は無理があるのでbackground-imageを使うことにした。

CSS

先日、object-fitについて書きました。 coool.blue object-fitで正方形にするのは簡単です。 しかし、px指定するのですが、画面サイズが変わるとpxを変えないといけない。 これは。。。 でた結論がこちら。HTMLから。 <a href="sample-2.html"><div class="photo" style="background-image:url('images/tum-2.png');display:block;"></div></a> imgではなくて、background-imageを使…

【CSS】object-fitで画像を正方形にトリミングできる!

CSS

今、ポートフォリオサイトを作っています。 特にネットに公開することはないのですけどね。 実力試しとCSSを忘れないようにするために作業しています。 今日、一番ポイントとなったのは、画像の正方形トリミングです。 まぁ、2~3枚程度なら手動でトリミング…

はてなブログのパンくずリストをカスタマイズしてみた。

CSS

はてなブログでは、パンくずリストを設置することが出来ます。 まずは、パンくずリストを表示させるようにしました。 そして、CSSをこんな感じで書きました。 #top-box { background: #fff; margin: 0 8px; border-radius: 10px; } .breadcrumb { padding:4p…

【CSS】エラーに困る。

CSS

本日、記事をスマホで見たとき、横スクロールが出ていました。 「うそんw」 という感じで、はじめは全ての記事でそうなっているのかと思いましたが、どうもこの記事だけらしい。 こやつです。 coool.blue CSSを書いて表示させたのですが、それを削除すると…

【CSS】消しゴム機能のあるモノ

CSS

表示させたくないときは ブログデザインをしていますが、どうしても表示させたくないモノがあります。 そのときはどうするのかと言うと、こやつを使います。 display:none SEOの観点から言うとどうなのって話ですが、まぁ、僕的には気にしないですね(笑)。 …

【css】文字リンクに下線を引くか問題。

CSS

皆さんのブログでは、文字リンクに下線を引きますか? 作業で頻繁にグーグル先生に教えてもらっていますが、ほとんどのサイトで下線は表示されていないですね。 リンクは下線を引く? デザイン的に見て グーグルの検索結果で 下線を取っ払った 「青色→リンク…

【ブログ】background-positionで上手くいかないので・・・。

CSS

皆さんは、ブログのアイキャッチ画像がない場合、どうしますか? 空白にしますか? 僕は空白にしていましたが、トップページに統一感がありません。 何故なら、画像があるのとないのとでは、トップページの印象が変わるからです。 なので、自作で画像を作り…

「display:flex」→「display:grid」に変えてみる。

CSS

当サイトは、はてなブログを使っていて、元になるCSSの上に自作のCSSを上書きするという感じになっています。 ヘッダとフッタ、2カラム構成のレイアウトというのは残しています。 あとは、自分好みにCSSでデザインしていく形にしています。 display:flexを使…

【CSS】軽微な調整をしました。バージョン1終了。

3日ほどかけてブログデザインのカスタマイズをしていたのですが、ひと段落つきました。 しかし、気に入らないことがあったのです。 paddingからの離脱(完璧ではない) レスポンシブ対応(条件付き) 左右の余白の問題 さいごに paddingからの離脱(完璧では…