この記事でわかること 二つの要素の隙間をなくす方法がわかる 2つの要素を横に並べると隙間ができてしまうんだけど・・ 困るよね！今回はその隙間をなくしてみるよ でもどうやって隙間をなくすの？ 一度フォントサイズを初期化してから、また戻せばいいんだ 二つの要素の隙間をなくす方法 まず一度フォントのサイズを0として初期化します。 フォント初期化のスタイルシート div oya{ font-size: 0px;　  /*fontsizeの初期化*/ } 次に要素を横に並べるスタイルシートを作って ここでフォントサイズを元に戻します div.yoko2{ display: inline-block;   /*要素を横に並べる*/ font-size: 16px;           /*フォントサイズを元に戻す*/ } 四角を作るスタイルシート div.sikaku2{ border: 1px so

こんにちは、１２回目の今日は 吹き出しの顔アイコンと吹き出しを横に並べてみました。 どんどん実戦的になってきました。戦えるかな笑 アイコンと吹き出しを横に並べる方法 要素を横に並べる方法、吹き出しの詳細な説明は下のページからご覧下さい。 purechan22.hatenablog.com purechan22.hatenablog.com まず吹き出しアイコンはフリー素材のページにいくらでもあるのでそこから取ってきます。 今回取ってきたのはこれです。 吹き出し部分のスタイルシートは次のようになります。 p.yokohuki { position: relative; display: inline-block; /*要素を横並びにする*/ border-radius: 10px; /* 四隅を丸くする */ padding: 10px; /*領域と文字との余白10px*/ backgrou

こんにちは、今日はHTML,CSSの復習の10回目となります。 不具合で記事が消えたので書き直しました　涙 要素を横並びにする方法 要素を横に並べるには display : inline-block;  /*要素を横並びにする*/ を追加するだけです。 まずは角が丸い四角を作ります。 スタイルシートには次のように記述します。 div.yokonarabi{ display:  inline-block; border-radius: 10px; /* 四隅を丸くする */ padding: 10px; /*領域と文字との余白10px*/ background: lightblue; /*背景色　lightblue*/ border: 2px solid pink; /*境界線の幅2px solidは実戦　色はskyblue*/ height: 100px; } 記事中には次のように記述しま