こんにちはマダラです。
プログラミング基礎備忘録その②です。今回は私がよく使用するものだけでなく、１年以上前に利用したものもあります。
久々に利用する際にネットで調べてみて１年前にも同じことをしたな〜〜と感じました。
時間の無駄ですよね！
同じことを繰り返さないためにアウトプットしていきましょう！
cursor:pointer;
cssでhoverやactiveで使いますね！cursorの設定値自体は他にもたくさんありますがとりあえずpointerを置く使うのでこれだけ押さえときましょう。
youtubeレンスポンシブ
youtube動画のレスポンシブ化はかなり汎用性がありますね！
動画を記事に投稿する際には絶対に設定するべき作業です。
/*yutubeレスポンシブ*/
.youtube-width{
display:block;
width:100%;/*動画幅は％のみ指定可能*/
margin:0 auto;
}
.youtube {
position: relative;
padding-bottom: 56.25%;
}
.youtube iframe {
position: absolute;
top: 0;
left:0;
width: 100% ;
height: 100% ;
}
こんな感じですね。逐一調べるのもめんどくさいので次からはこの記事からコピペします笑
レスポンシブフォント
私は大抵下記のcssでレスポンシブフォントを設定しています。%の方はいまいち何ピクセルかわかりませんし、ベストではないかもしれませんがまぁ大体あっていますね。
font-size: calc(112.5% + 0.5vw);
font-size: calc(18px + 0.25vw);
もっとよく調べると、vwを精密に計算して適切フォントサイズを出力する記事もありましたが、メンドくさがり屋の私は上記のコードで大雑把に実装しているのが現状です。
そのうち時間があればちゃんとやりたいですね、、、笑
テキストの折り返しを…に
cssによるテキストの折り返し実装です。記事タイトルなどが長くなりすぎて、レイアウトが崩れてしまった時に活躍します。
省略符号「...」を表示するには
text-overflow: ellipsis;
省略符号「...」を表示しないときには
text-overflow: clip;
改行禁止
white-space: nowrap;
はみ出た部分を消す
overflow: hidden;
まとめ
今回のプログラミング備忘録は以上です。いくつか溜まっていたものを処理できてよかったです。
そのうちPHPのウェブアプリの備忘録とか色々追加したいのですが、、、
なかなか忙しいですがブログの方も頑張っていきます、、！